Hexo高级教程之多说评论

引言

Hexo的评论系统在国内一般选用多说或友言，在我的博客主题中，早期使用的是友言，在0.1.0版本之后，我在主题中将其替换成了多说。为什么要替换呢？因为友言对于评论数，转发数等支持不好，而且也不开放API。

多说配置

登录

直接访问http://duoshuo.com 登录，多说支持QQ，微博等多种方式登录。

创建二级域名

登录多说后，先创建一个xxx.duoshuo.com的二级域名，比如我创建的ieclipse.duosuo.com，然后在管理台中做相应的配置。因为都是中文，就不详细说了。特别提一下的是以下几点：

• 域名白名单，在设置中，在域名白名单中添加本地地址，如127.0.0.1，不然有可能本地测试时，发现评论框不显示。
• 审核规则，最好选择游客发布的评论，不然会有许多非法的评论，比如色情广告。
• 在个人设置中心，修改主页，如果你出现在别人博客的最近访问中，别人可以点击你的头像进入你的主页。可以提高访问量。

获取代码

在管理台->工具中，可以获取评论，热评文章等代码。按官方的文档来配置即可。注意的是data-thread-key的配置，在你的文章页面中，data-thread-key必须唯一。在列表页，可以设置相同的data-thread-key，以合并评论。

多说组件

获取评论数

在首页，获取文章的评论数等信息。通过AJAX调用多说API来实现。注意，这里有个坑，就是ajax的跨域问题。使用jsonp，必须指定callback。代码（layout/post/index_script_ds.swig）如下：

  // load comments/likes count 
  function ds_load_comments(selector, options) {
    var o = options || {};

    var tkeys;
    $(selector).each(function(i) {
      var tkey = $(this).data('tkey');
      if (tkeys) {
        tkeys += ',' + tkey;
      }
      else {
        tkeys = tkey;
      }
    });
    var url = "http://api.duoshuo.com/threads/counts.jsonp";
    var label = {

    };
    $.ajax({
      url : url,
      dataType : "jsonp",
      type : 'get',
      data : {
        short_name : ds_short_name,
        threads : tkeys
      },
      jsonp : 'callback',
      success : function(data) {
        var r = data.response;
        $(selector).each(function(i) {
          var tkey = $(this).data('tkey');
          $(this).data("tid", r[tkey].thread_id);
          if (o.p) {
            for ( var key in o.p) {
              var c = '' + r[tkey][key] + '';
              $(this).find(o.p[key]).html(c);
            }
          }
        });
      }
    });//end ajax;
  }

通过在主题中给文章html标签添加data-tkey属性，然后通过ajax请求多说API，将指定thread-key的文章信息返回。当请求成功之后，再将likes, comments等数目更新到相应的html中。

获取最近访客

官方有示例，稍做修改即可使用，代码（layout/post/widget_ds_recent_visitors.swig）如下：

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">{{ __('widget.recent_visitors') }}</h3>
      </div>
      <ul class="ds-recent-visitors" data-num-items="12"><li class="text-center">{{__('ajax.loading')}}</li></ul>
    </div>

我的博客稍微修改了一下css，点击头像时，可以360旋转头像。

获取热评文章

前面的组件，在多说官网文档中心都可以找到示例。本着爱学习，爱折腾，爱装逼的精神，我当然不会仅限于使用别人开发好的组件，怎么也得自己亲自动手，通过多说API来实现一个组件吧。

html代码（layout/post/widget_ds_hot.swig）如下：

    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">{{ _p('widget.hot', 2) }}</h3>
      </div>
      <div  class="list-group" id="top-threads" data-range="weekly" data-num-items="5">
        <div class="text-center">{{__('ajax.loading')}}</div>
      </div>
    </div>

跟官方的差不多，只不过，class不是ds-top-threads，如果使用官方的ds-top-threadsclass那么官方的js脚本会运行，然后生成热评文章列表。由于官方生成的html不好修改样式。所以，我使用自己的脚本来生成html，js代码（layout/post/widget_ds_hot.swig）如下：

      var ds_top_url = 'http://api.duoshuo.com/sites/listTopThreads.jsonp';
      var ds_top_dom = $('#top-threads');
      var ds_top_param = ds_top_dom.data();
      ds_top_param.short_name = '{{theme.comments.ds.short_name}}';
      $.ajax({
        url : ds_top_url,
        dataType : "jsonp",
        type : 'get',
        data : ds_top_param,
        jsonp : 'callback',
        success : function(data) {
          if (data.code==0) {
            var arr = data.response;
            if (arr.length == 0) {
              ds_top_dom.html('{{_p("widget.hot", 0)}}');  
            } else {
              ds_top_dom.html('');  
              for(var i =0; i<arr.length;i++){
                var a = $('<a></a>').text(arr[i].title).attr('href', arr[i].url).addClass('list-group-item');
                ds_top_dom.append(a);
              }
            }
          }
        },
        error: function (xhr, msg, e) {
          ds_top_dom.html('<div class="text-center">{{__("ajax.error")}}</div>');
        }
      });

组件初始化时，显示加载中...，接口调用成功之后，生成热评文件列表html，接口调用失败，则显示加载失败。

参考

多说评论: http://duoshuo.com Nova主题: http://github.com/Jamling/hexo-theme-nova