Hexo如何添加多说评论分享组件

By MLTech at: 2016-11-24

添加多说组件，让每个人听到你的声音。

添加多说评论

在站点配置文件_config.yml（根目录下）中添加多说的配置：

1
duoshuo_shortname: 你站点的short_name  #申请多说评论组件时设置的

然后在themes\landscape\layout_partial\article.ejs文件中，将

1
2
3
4
5
6
7
<% if (!index && post.comments && config.disqus_shortname){ %>
  <section id="comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
  </section>
<% } %>

替换成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<% if (!index && post.comments && config.duoshuo_shortname){ %>
  <section id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
      (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 -->
  </section>
<% } %>

添加多说分享

在多说后台管理的左栏，有一个“+”的图标，复制右边面板的代码。粘贴到themes\landscape\layout_partial\article.ejs文件的 <footer> <\footer> 标签中。

如下图所示：

被我注释掉的是Disqus（Hexo默认的评论插件），关于data-thread-key等参数的值和多说评论代码的值一样，直接照我的写就好了；data-images和data-content的值我没细看，应该也是post.xx，感兴趣可以看一下post文件。

当添加了多说分享组件之后，会发现它会出现在home首页-每篇文章的摘要下面（关于如何设置摘要见下面），这是不科学的，所以我只想让它出现在每篇文章中。

Hexo设置摘要是通过 <!--more--> 实现的，如图标注1。你只需要在你的文章中添加此标志，则该标志之前的内容会被当做摘要。

所以我在文件起始处定义了一个flag=0（标志3），当文章需要显示摘要的时候（即打开home首页），设置flag=1（标志2）；设置当flag==0的时候，加载多说分享组件（见第二幅图标志1）。如此便实现了显示全文加载多说分享组件，显示摘要不加载组件的功能。