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

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


添加多说评论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中的内容。但可以肯定的是,打开主页一定会加载网站的headfooter,那么我们就把多说公共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

阅读
1,912
阅读预计8分钟
创建日期 2016-05-08
修改日期 2016-08-12
类别
百度推荐