给Ghost博客增加多说评论组件

---

点击访问原文
您还可以加入全栈技术交流群（QQ群号：254842154）

---

Ghost作为一个纯粹的博客平台，暂时还没有评论功能（截止2015年2月，Ghost版本为0.5.8没有评论功能），相比起wordpress是有些弱。但是这也是Ghost设计的初衷吧：Just a Blogging Platform。

我们可以使用第三方社会化评论系统来对Ghost增加扩展功能，增加社交元素和互动。国内现在做的比较好的有多说:http://duoshuo.com/ 。 国外的有Disqus：https://disqus.com/ 。

由于Disqus是国外的，担心某天被墙，所以下面讲讲如何接入多说评论组件。

注册

登录多说官网：http://duoshuo.com/ 。点击首页的“我要安装“

3.pic_hd.jpg

接入参数设置界面：

4.pic.jpg

这里主要关注”多说域名”这个参数，它会在稍后的js引用中用到。它是多说分配给接入者的二级域名。

添加评论组件代码

进入后台设置，复制通用的评论组件代码。在这里可以看到，其他常用的第三方博客平台都有现成的插件，而Ghost目前还不支持插件安装，只能手动安装。

5.pic_hd.jpg

通常我们是需要在文章的末尾添加评论功能，所以编辑主题文件下的post.hbs文件：

6.pic_hd.jpg

主要代码：

        <section class="post-comments">
        <div class="ds-thread" data-thread-key="{{slug}}" data-title="{{{title}}}" data-url="{{url absolute="true"}}"></div>
    </section>

这段代码需要添加到 {{/author}} 和 {{/post}}标签之间，才能正确读取slgu这些值，它们是post这个对象下面的属性。

这里的data-thread-key是用来唯一标识每一篇文章的，相当于是文章的ID。

最后添加js代码，引入多说的核心js文件embed.js：

<script type="text/javascript">
var duoshuoQuery = {short_name:"hello1010"};
(function() {
    var ds = document.createElement('script');
    ds.type = 'text/javascript';ds.async = true;
    ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    ds.charset = 'UTF-8';
    (document.getElementsByTagName('head')[0]
     || document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>

这里的short_name就是之前配置的多说二级域名。

修改完毕之后，重启ghost服务，就可以看到评论组件了。由于是动态加载的，加速的快慢取决于多说的服务器。

7.pic.jpg

在多说的后台，可以看到评论的详情数据。

原理

第三方评论组件的使用，通常都是通过引入js文件来实现的，原理也比较简单。在特定的DOM节点中事先生成好指定的属性值，然后加载js文件动态绑定事件提交数据到第三方服务器。例如，多说是通过post方式提交评论到对应的二级域名下：

8.pic_hd.jpg

加载评论时，通过动态加载js文件引入评论数据，再动态组装html字符串append到body中。例如，多说加载评论的方式是通过下面这个url来实现的，参数都在url中。把下面这段代码复制到浏览器中，就可以获取本篇文章的所有评论数据。

http://hello1010.duoshuo.com/api/threads/listPosts.json?thread_key=ghost-comment-duoshuo&url=http%3A%2F%2Fhello1010.com%2Fghost-comment-duoshuo%2F&title=%E7%BB%99Ghost%E5%8D%9A%E5%AE%A2%E5%A2%9E%E5%8A%A0%E5%A4%9A%E8%AF%B4%E8%AF%84%E8%AE%BA%E7%BB%84%E4%BB%B6&require=site%2Cvisitor%2Cnonce%2Clang%2Cunread%2Clog%2CextraCss&site_ims=1423403026&lang_ims=1423403026&referer=http%3A%2F%2Fhello1010.com%2Fghost%2Feditor%2F43%2F&v=15.1.30

扩展

多说除了支持评论，还支持评论数据的同步，它可以把评论数据同步到开发者自己的服务器中；除此之外，还支持单点登录，登录回调等。更多功能参考多说的开发者文档：http://dev.duoshuo.com/docs