Hexo Next主题添加Utterances评论系统

Posted on Last updated on

当前网上有很多给Hexo NexT主题添加Utterances评论系统的教程，但是这些实现并没有充分利用Hexo的特性，所以我参考了其他评论模块的代码，将Utterances模块插入到文章中。

过程

创建utterances.swig

在layout/_third-party/comments里创建utterances.swig，内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{%- if page.comments %}
<script>
NexT.utils.loadComments(document.querySelector('#utterances-container'), () => {
    // if (typeof parcelRequire === 'function') { return; }
    var js = document.createElement('script');
    js.type = 'text/javascript';
    js.src = 'https://utteranc.es/client.js';
    js.async = true;
    js.crossorigin = 'anonymous';
    js.setAttribute('repo', '{{ theme.utterances.repo }}');
    js.setAttribute('issue-term', '{{ theme.utterances.issue_term }}');
    js.setAttribute('theme', '{{ theme.utterances.theme }}');
    document.getElementById('utterances-container').appendChild(js);
});
</script>
{%- endif %}

创建utterances.js

在scripts/filters/comment下创建utterances.js，内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* global hexo */

'use strict';

const path = require('path');

// Add comment
hexo.extend.filter.register('theme_inject', injects => {
  let theme = hexo.theme.config;
  if (!theme.utterances.enable) return;

  injects.comment.raw('utterances', '<div class="comments" id="utterances-container"></div>', {}, {cache: true});

  injects.bodyEnd.file('utterances', path.join(hexo.theme_dir, 'layout/_third-party/comments/utterances.swig'));

});

修改主题配置文件

在主题配置文件中添加

1
2
3
4
5
utterances: 
  enable: true
  repo: "你的repo地址"
  issue_term: "pathname"
  theme: "github-light"

关于配置选项的更多信息可参考官方网站.

分析

在swig文件中调用了NexT提供的函数来插入评论模块，查看这个函数的源码的话可以发现这个函数其实是个观察者，用来Lazyload评论模块的。

而js文件是一个以相对正式的方法在document的评论里精准插入一个用来attach新元素的div标签，相当于指定了新添加的Utterances显示的位置。

已知问题

似乎有部分地区的网络不能加载这个评论模块，至少我的移动宽带是不能直接加载这个模块的，大概这就是NexT没集成这个模块的原因吧。