以下内容以 Ghost-3.21.0, Casper-3.0.12 为例,其他版本可能会略有差异,请自行调整。

1. 从disqus上找到你自己站点的代码

可以从这里找到你自己主站的代码:

Home => Settings => Installation => Universal Code

或者访问下面的链接:disqus.com/admin/universalcode/

2. 添加评论框

2.1 打开post.hbs模版文件,找到相关代码段

post.hbs 模版文件的路径:content/themes/casper/post.hbs

然后找到如下代码段落

            {{!--
            <section class="post-full-comments">
                If you want to embed comments, this is a good place to do it!
            </section>
            --}}

2.2 粘贴disqus代码到post.hbs模版文件的建议位置

去掉模版评论代码位置上下的注释,替换掉中间的提示文字,大概样子参考如下:


            <section class="post-full-comments">
<div id="disqus_thread"></div>
<script>
    /**
     *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
     *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
     */
    /*
    var disqus_config = function () {
        this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
    */
    (function() {  // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');

        s.src = 'https://yousite.disqus.com/embed.js';

        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
            </section>



s.src = 'https://your-site.disqus.com/embed.js';

这里需要将 your-site 替换成 你自己的 DisqusCode

disqus_config 我们可以不用设置,disqus会根据url来管理你的评论。

3. 官方参考文章

官方教程链接:https://ghost.org/integrations/disqus/