<!– ref: gitalk –> <!– github.com/geektutu/hexo-theme-geektutu/blob/master/layout/_widget/comments.ejs#L31 –> <!– ref: geektutu.com/post/blog-experience-7.html –>

<!– Start gitalk –> {% assign cache_bust = site.time | date:'?v=%s' %} <script src=“{{ ”/assets/js/gitalk.min.js“ | relative_url | append: cache_bust }}” /></script> <!– <div id=“disqus_thread”><h3>Discussion and feedback</h3></div> –> <div id=“gitalk-container”>

<div class="gt-container text-center" style="margin-top: 50px;">
    <button class="gt-btn gt-btn-public"><span class="gt-btn-text">去 Github 评论</span></button>
</div>

</div>

<div id=“gitalk-related”></div>

<script>

window.addEventListener('load', function () {
    function renderCommentUrl(data) {
        var url = (data[window.location.pathname] || {}).url
        url && getDom('#gitalk-container button').addEventListener('click', function (e) { window.open(url)})
        url || (getDom('#gitalk-container').style.display = 'none')
    }
    function getDom(str) { return document.querySelector(str) }

    const gitalk = new Gitalk({
        clientID: '{{ site.gitalk.client_id }}',
        clientSecret: '{{ site.gitalk.client_secret }}',
        repo: '{{ site.gitalk.repo }}',
        owner: '{{ site.gitalk.owner }}',
        admin: '{{ site.gitalk.admin }}',
        id: location.pathname,      // Ensure uniqueness and length less than 50
        distractionFreeMode: false  // Facebook-like distraction free mode
    })

    fetch("https://api.github.com/user").then(function(resp){
        gitalk.render('gitalk-container');
    }).catch(function(e){
        fetch('/assets/data/issues.json').then(function (r) { return r.json() }).then(renderCommentUrl).catch(function (e) { })
    })
    getDom('#gitalk-container').addEventListener('click', function (e) {
        e && e.stopPropagation && e.stopPropagation();
    });
})

</script> <noscript>Please enable JavaScript to view the <a href=“comments”>gitalk.github.io/“>comments powered by gitalk.</a></noscript> <!– End gitalk –>

<!– gitalk plus –> <script>

window.addEventListener('load', function () {
    function render(comments) {
        var template = '<a href="${comment.url}?utm_source=gitalk" class="dis-item-url"><h3 class="dis-item-title">${comment.title}</h3>' +
            '<p class="dis-item-des">${comment.count} 评论 ● ${comment.date}</p>' +
            '<div class="dis-item-content"><img class="dis-item-img" src="${comment.icon}" alt="icon"><p><b><span class="dis-item-user">${comment.user}</span></b>&nbsp;——&nbsp;${comment.body}</p></div>' +
            '</a>'

        var wrapper = getDom('#gitalk-related');
        comments = shuffle(comments);
        comments.slice(0, 4).forEach(function (c) {
            var div = document.createElement('div');
            div.classList.add('dis-item');
            div.innerHTML = template.replace("${comment.url}", c.url)
                .replace("${comment.title}", c.title)
                .replace("${comment.count}", c.count)
                .replace("${comment.date}", c.date)
                .replace("${comment.icon}", c.icon)
                .replace("${comment.user}", c.user)
                .replace("${comment.body}", c.body)
            wrapper.appendChild(div)
        })
        var p = document.createElement('p')
        p.innerHTML = '<a href="https://geektutu.com/post/blog-experience-7.html">Gitalk Plus</a>';
        p.classList.add('dis-divide');
        wrapper.appendChild(p);
        wrapper.classList.add('dis-wrapper')
    }
    function shuffle(a) {
        for (var i = a.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            [a[i], a[j]] = [a[j], a[i]];
        }
        return a;
    }
    function getDom(str) { return document.querySelector(str) }
    fetch('/assets/data/comments.json').then(function (r) { return r.json() }).then(render).catch(function (e) { })
})

</script>