添加多说评论

最近又突然想给博客做点改变，然后看到其他人添加了很多东西，今天就先添加一个评论吧。看到多说貌似不错，就用他了。 ###首先去多说注册个账号 自己百度 ###添加评论 在_config.yml 中添加

1
2
3

# duoshuo comments
duoshuo_comments: true
duoshuo_short_name: yourname #这里的yourname是你在多说注册的二级域名，比如我是superzhang.duoshuo.com.这里就填superzhang

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

1
2
3
4
5
6

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

下方添加多说评论模块

1
2
3
4
5
6

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

如果你希望一些单独的页面下方也放置评论功能，譬如 rake new_page[“xxx”] 产生的页面也能评论，那么请在 source/_layouts/page.html 中也做如上的修改。

创建一个source/_includes/post/duoshuo.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!-- Duoshuo Comment BEGIN -->
<div class="ds-thread" data-title="添加多说评论"></div>
<script type="text/javascript">
  var duoshuoQuery = {short_name:"superzhang.duoshuo.com"};
  (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>
<!-- Duoshuo Comment END -->

随后，再修改_includes/article.html 在

1
2

{% if site.disqus_short_name and page.comments != false and post.comments != false and site.disqus_show_comment_count == true %}| <a href="{% if index %}{% endif %}#disqus_thread">Comments</a>
{% endif %}

下方添加如下代码

1
2

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

###侧边栏插入最新评论

首先在_config.yml中再插入如下代码

1
2
3
4
5
6

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

再创建_includes/custom/asides/recent_comments.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<section>
<h1>Recent Comments</h1>
<ul class="ds-recent-comments" data-num-items="10" data-show-avatars="0" data-show-time="0" data-show-title="0" data-show-admin="0" data-excerpt-length="18"></ul>
{% if index %}
<!--多说js加载开始，一个页面只需要加载一次 -->
<script type="text/javascript">
  var duoshuoQuery = {short_name:"superzhang.duoshuo.com"};
  (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>`

最后，在_config.yml中的blog_index_asides行或pages_asides行或post_asides添加

1

custom/asides/recent_comments.html

rake generate

rake preview 下就可以看效果了

技术
Comments "

Comments