Ghost(2) 增加评论模块

Ghost作为一个更加纯粹的博客平台,并没有打算为其开发内置的文章评论功能。而是将评论功能托管给第三方,好处也是让用户更有精力集中于网站内容的建设。实现的办法也很简单,只需要向Ghost主题的模板Handlebars(.hbs)插入第三方评论组件的JavaScript代码来为Ghost博客增加评论功能。


国内最常用的多说评论框,支持国内常见的社交网络一键注册登录、盖楼讨论和分享而且对新用户上手简单。而Disqus功能强大、完善的社交网络和多国语言支持并且为其插件启用全球CDN加速。总的来说两个插件各有所长。


基于默认主题Casper的安装指南:





创建一个模板


为了在需要评论框代码的时候方便引用,我选择事先在主题文件夹content\themes\casper\partials下面创建一个叫做comments.hbs的模板文件,也就是评论框的专属模板。


现在我只需要在我的Casper主题下面的post.hbs模板中的


            </section>

</footer>
</article>
</main>

前面部分添加一句{{> comments}}就可以展示评论框了。


添加后就像这样:


            </section>
{{> comments}}
</footer>
</article>
</main>

这样以来的好处就可以在任何主题中轻松移植评论框代码。


开始之前:对评论框Html代码进行简要说明。



  • <section class=”post-comments”>…</section>用于展示评论框

  • <script type=”text/javascript”>…</script>评论框公共代码

  • {{slug}} 引用文章短名作为第三方社交平台识别文章的特征标志

  • {{title}} 引用文章标题

  • {{url absolute="true"}} 获取永久链接




安装多说评论框


1.将下面的评论框代码插入comments.hbs文件。

多说评论框:


<section class=”post-comments”>
<div class=”ds-thread” data-thread-key=”{{slug}}“ data-title=”{{title}}“ data-url=”{{url absolute="true"}}“></div>
<!– 务必插入多说公共JS代码 –>
</section>

2.如何获取多说公共JS代码?


登录多说 > 点击“我要安装”> 创建站点 > 获取公共代码(如图)


多说公共JS代码




安装Disqus评论框


1.将下面的评论框代码插入comments.hbs文件。

Disqus评论框评论框:


  <section class=”post-comments”><div id=”disqus_thread”></div>
<!– 务必插入Disqus公共JS代码 –>
</section>

2.获取Disqus的公共JS代码


注册Disqus > 安装平台选则 Universal Code > 直接复制代码


3.添加完毕后,重新启动Ghost博客。


4.Disqus不能成功加载的时候可以在JavaScript中强制使用HTTPS以链接Disqus服务器。具体方法就是在s.src的提供的URL中加入https://

# Ghost
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×