Hexo NexT 主题集成 utterance 评论系统

发表于 |

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

这里讲解集成另外一种评论系统：utterance（https://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 评论的流程，按照流程一步一步来应该是没问题的。

本文转载自:https://zhangzw.com/posts/20190720.html

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%