0%

Hexo Next主题添加Utterances评论系统

当前网上有很多给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
/* 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没集成这个模块的原因吧。