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

直接在网页中使用

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

1
2
3
4
5
6
7
<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的布局文件,不然单添加配置不会在页面中看到效果的。

  1. 编辑 Hexo 主题配置文件 _config.yml,添加以下配置:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 整合 utterances 评论
    utterance:
    enable: true
    # 仓库名字,格式:[user-name]/[repo-name],如:lanweihong/utterance_repo
    repo: xxx
    # 主题
    theme: github-light
    # 映射配置
    issue_term: pathname
  2. 在主题的 layout/_third-party/comments 目录中添加 utterance.swig文件:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    {% if theme.utterance and theme.utterance.enable %}

    <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('utterance-container').appendChild(utterances);
    })();
    </script>

    {% endif %}
  3. 编辑 layout/_third-party/comments/index.swig,添加以下配置加入 utterance.swig 文件:

    1
    {% include 'utterance.swig' %}
  4. 编辑 layout/_partials/comments.swig 文件,在最后加入以下内容,配置存放评论的 dom 元素:

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

如:

示例

测试

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

测试

参考文档

  1. Hexo NexT 主题集成 utterance 评论系统