给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/ 。点击首页的“我要安装“

接入参数设置界面:

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

添加评论组件代码

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

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

主要代码:

        <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);
})();

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

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

原理

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

加载评论时,通过动态加载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

为了验证多说评论接入是否成功,在下面评论区域说点什么吧 :)。

标签: none

→ 如果你觉得作者的文章不错,一不小心帮到了你,欢迎打赏作者几包辣条的钱💰