为Hexo添加多说评论功能(正文评论和列表评论数)

首先,全局载入多说的js,在/themes/light/layout/after_footer.ejs中加入

<script type="text/javascript">
var duoshuoQuery = {short_name:"你的shortname"};
        (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之后,在/themes/light/layout/article.ejs中加入

<% if (page.comments){ %>
        <div class="ds-thread" data-thread-key="<%- item.path %>"></div>
<% } %>

加入page.comments的变量判断的原因是在博客文章列表和博客文章正文是使用的同一个article.ejs模板,当这个变量为true时,说明在博客文章正文页中,所以需要显示评论列表。


列表评论数

找到下面的代码

<% if (item.excerpt){ %>
	<div class="alignleft">
		<a href="<%- config.root %><%- item.path %>#more" class="more-link"><%= theme.excerpt_link %></a>
	</div>
<% } %>
<% if (item.comment && config.disqus_shortname){ %>
        <div class="alignright">
         	<a href="<%- item.permalink %>#disqus_thread" class="comment-link">Comments</a>
        </div>
<% } %>


替换成

<div class="alignleft">
 	<a href="<%- config.root %><%- item.path %>#more" class="more-link"><%= theme.excerpt_link %></a>
</div>
<% if (!item.comment){ %>
	<a href="<%- config.root %><%- item.path %>" class="ds-thread-count comment-link alignright" data-thread-key="<%- item.path %>" data-count-type="comments"></a>
<% } %>


其实这两个东西的原理也非常简单,js会来查找ds-thread的css类,嵌入评论列表,查找ds-thread-count类,嵌入评论数,data-thread-key告诉js应该载入哪个评论列表,在文章正文页可以缺少这个值,因为js会根据页面url来判断,但是显示评论数的话就必须携带这个key了,否则则会出现异常。


DEMO: http://twwy.net


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值