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

添加多说评论

在站点配置文件_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)。如此便实现了显示全文加载多说分享组件,显示摘要不加载组件的功能。