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

时间：2022-07-09 09:03:20

首先，全局载入多说的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


标签：

相关文章