给hexo/pacman增加“最新评论”的widget

自从不买vps以来，已经很久没写过blog了，之前用bae还得备案啥的，看起来还是在国外托管比较方便。最近发现github pages速度还挺不错的，于是研究了一下用hexo搭还挺方便的，pacman主题用着也比较方便，不过还有一些blog的常见功能不支持，比如最新评论。pacman用的是多说的评论系统，多说有最新评论的嵌入代码。当然直接嵌入肯定是不行的，和整体风格不统一看着不好看，那么就搞个类似友情链接、目录之类的widget好了。

研究了一下links.ejs以及archives.ejs发现写一个widget其实不难，参考多说的嵌入代码，在新建一个themes/pacman/layout/_widget/comment.ejs文件，内容如下：

<% if (theme.duoshuo.enable && theme.duoshuo.short_name.length) { %>
<div class="commentslist">
  <p class="asidetitle"><%= __('comments') %></p>
  <ul class="ds-recent-comments" data-num-items="5" data-show-avatars="0" data-show-time="1" data-show-admin="1" data-excerpt-length="32" data-show-title="1"></ul>
</div>
<!--多说js加载开始，一个页面只需要加载一次 -->
<script type="text/javascript">
  var duoshuoQuery = {short_name:"<%= theme.duoshuo.short_name %>"};
  (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加载结束，一个页面只需要加载一次 -->
<% } %>

下面那段js是多说提供的嵌入代码，<ul>标签有一些参数可以指定评论的具体数量之类的，大致有以下可选参数

//以下参数均为可选
data-num-items="10"     //显示最新评论的条数，最大支持200条
data-show-avatars="1"   //是否显示头像，1：显示，0：不显示
data-show-time="1"      //是否显示时间，1：显示，0：不显示
data-show-title="0"     //是否显示标题，1：显示，0：不显示
data-show-admin="1"     //是否显示管理员的评论，1：显示，0：不显示
data-excerpt-length="70"//最大显示评论汉字数

写好了widget之后需要把它配置进去，首先先添加“最新评论”的多语言版本字符串值，即用变量comments表示，需要修改的相关文件为themes/pacman/languages/*.yml，看一下文件内容就知道怎么改了，这里不详细说了。最后还需要添加一下相关的css样式，我是以友情链接widget的css作为基准，稍加修改的，在themes/pacman/source/css/_partial/aside.styl文件末尾添加如下内容：

//comments
.commentslist
  margin-top 0.5em 
  @media mini
    width 45% 
    float left
    margin 0 5% 0 0 
  @media tablet 
    width 100%
    float none
    margin 1em 0 0 
  ul  
    padding 0.5em 0
    a   
      font-size 1em 
      line-height line-height
      display block
      padding 0
      &:hover
        color color-theme
        transition color .25s

.ds-excerpt
  font-size 1.1em
  color color-theme

.ds-recent-comments
  margin-top -0.6em
  margin-left 0.3em

最后要做的工作就是在主题的_config.yml里开启comment这个widget了，这样最新评论就搞定了。hexo真是不错，做个二次开发基本照猫画虎就能搞定了。

我自己修改的pacman主题可以在这里找到: pacman