Octopress 博客添加多说评论系统

Posted by Sir0xb on 2016-08-17 20:07:10 +0800

以前用 hexo 维护网站的时候评论系统用的是多说，虽然 octopress 自带了一个 disqus 评论系统，不过感觉还是没有多说强大。所以这次改版之后也决定用多说。

 

添加文章评论

在 _config.yml 中找到 disqus 配置

# Disqus Comments 
disqus_short_name:
disqus_show_comment_count: false

在下面添加

duoshuo_comments: true
duoshuo_short_name: xxxxxx  # 多说帐号

在 source/_layouts/post.html 中的 disqus 代码

{% if site.disqus_short_name and page.comments == true %}
  <section>
    <h1><i class="fa fa-comments"></i> Comments</h1>
    <div id="disqus_thread" aria-live="polite">{% include post/disqus_thread.html %}</div>
  </section>
{% endif %}

下面添加多说的模块

{% if site.duoshuo_short_name and site.duoshuo_comments == true and page.comments == true %}
  <section>
    <h1><i class="fa fa-comments"></i> Comments</h1>
    <div id="comments" aria-live="polite">{% include post/duoshuo.html %}</div>
  </section>
{% endif %}

然后创建上面代码提及的新文件 post/duoshuo.html 具体路径是 source/_includes/post/duoshuo.html

<!-- 多说评论框 start -->
<div class="ds-thread" data-thread-key="{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}" data-title="{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}" data-url="{{page.previous.url}}"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
    var duoshuoQuery = {short_name:"{{ site.duoshuo_short_name }}"};
	(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> 
<!-- 多说公共JS代码 end -->
* 这里注意一下 data-thread-key 属性，如果不写，控制台会有警告信息。设置成跟 data-title 一样就好。

学 disqus 的实现方式，在文章头部也再加个评论按钮。修改 _includes/article.html 文件。

{% if site.disqus_short_name and page.comments != false and post.comments != false and site.disqus_show_comment_count == true %}
   | <a href="{% if index %}{{ root_url }}{{ post.url }}{% endif %}#disqus_thread"
     data-disqus-identifier="{% if post.meta.disqus_id %}{{ post.meta.disqus_id }}{% else %}{{ site.url }}{{ post.url }}{% endif %}">Comments</a>
{% endif %}

下方添加多说代码部分

{% if site.duoshuo_short_name and page.comments != false and post.comments != false and site.duoshuo_comments == true %}
 | <a href="{% if index %}{{ root_url }}{{ post.url }}{% endif %}#comments">评论</a>
{% endif %}

基本功能大功告成

 

侧边栏现实最新评论

在 _config.yml 添加如下配置:

duoshuo_asides: false       # 是否显示侧边栏 
duoshuo_asides_num: 10      # 侧边栏评论显示条目数 
duoshuo_asides_avatars: 0   # 侧边栏评论是否显示头像 
duoshuo_asides_time: 0      # 侧边栏评论是否显示时间 
duoshuo_asides_title: 0     # 侧边栏评论是否显示标题 
duoshuo_asides_admin: 0     # 侧边栏评论是否显示作者评论 
duoshuo_asides_length: 18   # 侧边栏评论截取的长度

还需要在侧边栏插件文件夹创建评论代码

{% if site.duoshuo_asides %}
<section>
    <h1><i class="fa fa-comments"></i> Recent Comments</h1>
    <ul class="ds-recent-comments" data-num-items="{{ site.duoshuo_asides_num }}" data-show-avatars="{{ site.duoshuo_asides_avatars }}" data-show-time="{{ site.duoshuo_asides_time }}" data-show-title="{{ site.duoshuo_asides_title }}" data-show-admin="{{ site.duoshuo_asides_admin }}" data-excerpt-length="{{ site.duoshuo_asides_length }}"></ul>
    {% if index %}
    <!--多说js加载开始，一个页面只需要加载一次 -->
    <script type="text/javascript">
      var duoshuoQuery = {short_name:"{{ site.duoshuo_short_name }}"};
      (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = 'http://static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
      })();
    </script> 
    <!--多说js加载结束，一个页面只需要加载一次 -->
    {% endif %}
</section>
{% endif %}

如果没有评价，不需要显示孤零零的变迁，可以把 duoshuo_asides 设置成 false。

最后在 _config.yml 的侧边栏数组中添加页面

default_asides: [asides/about.html, asides/recent_posts.html, asides/recent_comments.html, asides/links.html, asides/github.html, asides/delicious.html, asides/pinboard.html, asides/googleplus.html]

我选择在最新文章和链接之间显示最新评论。

Copyright © 2022, Built with Gatsby