Hexo NexT 主题使用 utterances 搭建评论系统

前言

utterances 是一个基于 Github issues 构建的轻量级评论插件。使用 Github 账号登录后才能评论。

A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!

官网地址：https://utteranc.es/

Github：https://github.com/utterance/utterances

配置

配置 Github 仓库

由于是基于 Github issues，我们需要一个仓库来存储评论，所以我们需要在 Github 上创建一个空库，并且必须是 pulbic 的，这样用户才可以查看并发布评论。

安装 Github App

安装地址：https://github.com/apps/utterances

访问安装地址，进入安装页面，单击 Install 按钮；

选择关联的仓库，我们选择刚刚建好的仓库；

至此，Github 端配置完成，接下来在网页或博客中配置使用 utterances。

使用 utterances

直接在网页中使用

在需要评论的页面添加如下代码：

<script src="https://utteranc.es/client.js"
        repo="xxx"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

其中 repo 要换为自己的仓库名，格式为 [user-name]/[repo-name]；

默认的主题为 github-light，可选的主题还有：

github-dark
preferred-color-scheme
github-dark-orange
icy-dark
dark-blue
photon-dark
boxy-light

更多的配置请查看： https://utteranc.es/

在 Hexo NexT 中使用

我的 NexT 版本是 5.1.4，不知道最新的版本有没有集成 utterances ，如果有一般在主题配置文件中添加相关 utterances 配置即可。

但我使用 5.1.4 版本没有集成，需要修改NexT的布局文件，不然单添加配置不会在页面中看到效果的。

编辑 Hexo 主题配置文件 _config.yml，添加以下配置：

# 整合 utterances 评论
utterance:
enable: true
# 仓库名字，格式：[user-name]/[repo-name]，如：lanweihong/utterance_repo
repo: xxx
# 主题
theme: github-light
# 映射配置
issue_term: pathname

在主题的 layout/_third-party/comments 目录中添加 utterance.swig文件：

{% if theme.utterance and theme.utterance.enable %}



{% endif %}

编辑 layout/_third-party/comments/index.swig，添加以下配置加入 utterance.swig 文件：
```
{% include 'utterance.swig' %}
```

编辑 layout/_partials/comments.swig 文件，在最后加入以下内容，配置存放评论的 dom 元素：

{% elseif theme.utterance.enable %}
 <div class="comments" id="comments">
   <div id="utterance-container"></div>
 </div>

如：

测试

配置完成后，使用 hexo clean && hexo g 重新生成页面。效果图如下：

参考文档

Hexo NexT 主题集成 utterance 评论系统