当前位置 : 首页 » 文章分类 :  开发  »  Hexo博客(06)添加多说评论系统

Hexo博客(06)添加多说评论系统

2019.5.11更新，已在vps用spring boot搭建自己的评论系统，参考 Hexo博客(25)自建博客评论系统

添加多说评论js公共代码

注册(或直接第三方账号登录)多说后，进入后台管理，工具，获取代码，通用代码，在其中能看到自己多说的shortname：
var duoshuoQuery = {short_name:"xxxxx"};
将其填入主题的_config.yml配置文件中的duoshuo_shortname:选项。

多说评论代码分为两部分，必须添加的是多说js公共代码，有了js公共代码评论系统才会工作。另一部分是多说评论框的展示，可以放到想要的位置，一般是文章底部。多说js公共代码也是后续的“最新评论”“最近访客”“热评文章”“评论数”等插件所必须的。

我使用的freemind主题内置了多说js代码，不需要自己添加。一般来说是添加到themes/你的主题/layout/_partial/article.ejs文件中，打开看一下，发现里面有：
<%- partial('post/comment_footer', {page: item}) %>，
原来是引用了post/comment_footer脚本，再打开post/comment_footer.ejs看下，内容为：

<% if (theme.duoshuo_shortname) { %>
<script type="text/javascript">
  var duoshuoQuery = { short_name: '<%= theme.duoshuo_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>
<% } else if (config.disqus_shortname){ %>
<script type="text/javascript">
var disqus_shortname = '<%= config.disqus_shortname %>';
(function(){
  var dsq = document.createElement('script');
  dsq.type = 'text/javascript';
  dsq.async = true;
  dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments){ %>embed.js<% } else { %>count.js<% } %>';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<% } %>

发现其中有多说和disqus的js代码，short_name直接引用了主题配置中的duoshuo_shortname:变量。如果发现代码和多说官网给出的代码不相同，可能是后来多说更新了，我们就替换为最新的代码。

添加多说评论框

我使用的freemind主题中，评论框展示脚本在post/comment.ejs中，如下：

<% if (page.comment){ %>
<section id="comment">
  <h2 class="title"><%= __('comment') %></h2>

  <% if(theme.duoshuo_shortname) { %>
         <div class="ds-thread" data-thread-key="<%- page.path %>" data-title="<%- page.title %>" data-url="<%- page.permalink %>"></div>
  <% } else if(config.disqus_shortname) { %>
         <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>
<% } %>

其中的<div class="ds-thread" data-thread-key="<%- page.path %>" data-title="<%- page.title %>" data-url="<%- page.permalink %>"></div>就是添加多说评论框的代码。
注意data-thread-key是文章和评论关联的唯一id，如果变动后则评论会丢失。同理，同id的文章，显示的是相同的评论内容。主题中配置为page.pah了，即不含根路径的页面网址，我们可以自己定义，可用的变量参见hexo文档-变量 。我们添加评论系统前要想好，不要经常变动data-thread-key值。

多说评论框设置

进入多说后台管理，设置，基本设置，可设置：

  • 评论框位于评论顶部还是底部
  • 是否需要游客输入邮件地址
  • 是否允许评论中插入图片

Hexo博客添加多说“最近评论”侧边栏

首先要添加多说js公共代码，否则无法使用多说“最近评论”。

侧边栏其实都是Widget，我们新建一个Widget并启用即可。在/themes/yourtheme/layout/_widget目录下新建duoshuo_recent_comments.ejs，将多说官方给出的“最近评论”脚本<div class="ds-recent-comments" data-num-items="5" data-show-avatars="1" data-show-time="1" data-show-title="1" data-show-admin="1" data-excerpt-length="70"></div>复制进去，然后在主题的_config.yml配置文件中的widgets:项添加duoshuo_recent_comments插件即可启用。“最近评论”显示的评论条数、字数等都可以修改<div>标签的参数来自定义。

更高级一点儿，可以根据有没有配置duoshuo_shortname来判定是否启用“最近评论”侧边栏，以及与主题自带的其他Widget保持样式一致，我的最终duoshuo_recent_comments.ejs如下：

<% if (theme.duoshuo_shortname){ %>
<div class="widget">
    <h4><%= __('最近评论') %></h4>
    <ul class="blogroll list-unstyled">
    <div class="ds-recent-comments" data-num-items="5" data-show-avatars="1" data-show-time="1" data-show-title="1" data-show-admin="1" data-excerpt-length="70"></div>
    </ul>
</div>
<% } %>

主页“最近评论”不显示

添加duoshuo_recent_comments插件后，我的主页出现了“最近评论”侧边栏的标题，但没有内容。分析了一下，感觉可能是打开主页时多说公共js代码还没有加载，而“最近评论”工具又依赖于公共js代码。做了个实验，将“最近评论”脚本添加到单篇文章的侧边栏，发现能够成功显示，因为打开单篇文章时js公共代码已经加载了，说明分析正确。下面就是把多说js公共代码放到打开网站主页就能够加载的脚本里。

我用的freemind主题的多说公共js代码是在_partial/article.ejs中引用post/comment_footer脚本加载的，看来只是打开主页时，并不会加载article.ejs中的内容。但可以肯定的是，打开主页一定会加载网站的head和footer，那么我们就把多说公共js代码放到footer.ejs中即可。

Hexo博客添加多说“热评文章”侧边栏

首先要添加多说js公共代码，否则无法使用多说“热评文章”。

侧边栏其实都是Widget，我们新建一个Widget并启用即可。在/themes/yourtheme/layout/_widget目录下新建duoshuo_top_pages.ejs，将多说官方给出的“热评文章”脚本<div class="ds-top-threads" data-range="daily" data-num-items="5"></div>复制进去，然后在主题的_config.yml配置文件中的widgets:项添加duoshuo_top_pages插件即可启用。“热评文章”显示条数、统计范围可以修改<div>标签的参数来自定义。

更高级一点儿，可以根据有没有配置duoshuo_shortname来判定是否启用“热评文章”侧边栏，以及与主题自带的其他Widget保持样式一致，我的最终duoshuo_top_pages.ejs如下：

<% if (theme.duoshuo_shortname){ %>
<div class="widget">
    <h4><%= __('热评文章') %></h4>
    <ul class="blogroll list-unstyled">
    <div class="ds-top-threads" data-range="monthly" data-num-items="5"></div>
    </ul>
</div>
<% } %>

Hexo博客添加多说“最近访客”侧边栏

首先要添加多说js公共代码，否则无法使用多说“最近访客”。

侧边栏其实都是Widget，我们新建一个Widget并启用即可。在/themes/yourtheme/layout/_widget目录下新建duoshuo_recent_visitors.ejs，将多说官方给出的“最近访客”脚本<div class="ds-recent-visitors" data-num-items="10"></div>复制进去，然后在主题的_config.yml配置文件中的widgets:项添加duoshuo_recent_visitors插件即可启用。“最近访客”显示条数可以修改<div>标签的参数data-num-items来自定义。

更高级一点儿，可以根据有没有配置duoshuo_shortname来判定是否启用“最近访客”侧边栏，以及与主题自带的其他Widget保持样式一致，我的最终duoshuo_recent_visitors.ejs如下：

<% if (theme.duoshuo_shortname){ %>
<div class="widget">
    <h4><%= __('最近访客') %></h4>
    <ul class="blogroll list-unstyled">
    <div class="ds-recent-visitors" data-num-items="10"></div>
    </ul>
</div>
<% } %>

参考

上一篇 Google-Gson

下一篇 Java-RMI

阅读
评论
2.2k字
阅读预计9分钟
创建日期 2016-05-08
修改日期 2016-08-12
类别
标签
目录

页面信息

location:
protocol:
host:
hostname:
origin:
pathname:
href:
document:
referrer:
navigator:
platform:
userAgent:

评论

▲