Hexo NexT 主题集成 utterance 评论系统

使用 Hexo 的 Next 主题搭建的博客内置了很多种评论系统,如:gitalk,changyan 等。

这里讲解集成另外一种评论系统:utterancehttps://utteranc.es/)

其配置非常简单,支持 Github 账号登录后才能评论。原理就是使用了 Github 的 Issues 功能来保存评论。

配置步骤

创建 Github 仓库

上面提到,utterance 使用 Github 保存评论,那我们就需要创建一个 repository 专门保存评论。

repository名称可以根据自己喜好取,这个后面会用到。

授权

用户在博客页面上输入评论,utterance 拿到这个评论后,自动的提交到上面刚创建仓库的 Issues 里。

所以我们需要授权 utterance 应用能访问仓库的 Issues。

点击链接: https://github.com/apps/utterances ,如下图所示:

主题配置

一,在主题的配置文件 _config.yml 文件中,加入如下配置:

位置可以放到其它评论配置的后面

1
2
3
4
5
6
7
8
9
# 整合 utterance 评论
utterance:
enable: true
# 仓库名字,格式:你的用户 ID/ 仓库名称,如:zhangsan/utterance_repo
repo:
# 主题
theme: github-light
# 映射配置
issue_term: pathname

二,在主题的 layout\_third-party\comments 文件夹下,创建 utterance.swig 文件,添加如下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
(function() {
// 匿名函数,防止污染全局变量
var utterances = document.createElement('script');
utterances.type = 'text/javascript';
utterances.async = true;
utterances.setAttribute('issue-term','{{ theme.utterance.issue_term }}')
utterances.setAttribute('theme','{{ theme.utterance.theme }}')
utterances.setAttribute('repo','{{ theme.utterance.repo }}')
utterances.crossorigin = 'anonymous';
utterances.src = 'https://utteranc.es/client.js';
// content 是要插入评论的地方
document.getElementById('gitment-container').appendChild(utterances);
})();
</script>

三,还是刚才那个文件夹,找到 index.swig 文件,加入如下配置:

1
2
{% elif theme.utterance.enable %}
{% include 'utterance.swig' %}

注意加在 endif 后面,如:

四,以上只是添加了脚本,还需添加 comment 样式。找到 layout\_partials\comments.swig 文件。在最后加入内容:

1
2
3
4
{% elif theme.utterance.enable %}
<div class="comments" id="comments">
<div id="gitment-container"></div>
</div>

如:

总结

以上就是整个集成 utterance 评论的流程,按照流程一步一步来应该是没问题的。

有问题可在评论区留言。