【hexo】【评论系统】【utterance】-hexo next搭建utterance评论系统

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

utterance（https://utteranc.es/）

支持Github账号登录后才能评论，原理就是使用了Github的Issues功能来保存评论。

1.创建GITHUB仓库

utterance使用Github保存评论，那我们就需要创建一个repository专门保存评论

2.授权

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

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

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

3.主题配置

1.在主题的配置文件_config.yml文件中，加入如下配置

# 整合utterance评论
utterance:
  enable: true
  #仓库名字，格式：你的用户ID/仓库名称，如：zhangsan/utterance_repo 下面是我的地址
  repo: Molers/BlogComment
  #主题
  theme: github-light
  #映射配置
  issue_term: pathname

同时Comments的active项设置为utterance

# Multiple Comment System Support
comments:
  # Available values: tabs | buttons
  style: tabs
  # Choose a comment system to be displayed by default.
  # Available values: changyan | disqus | disqusjs | gitalk | livere | valine
  active: utterance

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

{% if theme.utterance.enable %}
  <script src="https://utteranc.es/client.js"
    repo="{{ theme.utterance.repo }}"
    issue-term="{{ theme.utterance.issue_term }}"
    theme="{{ theme.utterance.theme }}"
    crossorigin="anonymous"
    async>
  </script>
{% endif %}

或者

{% if theme.utterance.enable %}
    <script type="text/javascript">
        (function() {
            // 匿名函数，防止污染全局变量
            var e = document.createElement('script');
            e.type = 'text/javascript';
            e.async = true;
            e.setAttribute('issue-term','{{ theme.utterance.issue_term }}')
            e.setAttribute('theme','{{ theme.utterance.theme }}')
            e.setAttribute('repo','{{ theme.utterance.repo }}')
            e.crossorigin = 'anonymous';
            e.src = 'https://utteranc.es/client.js';
            // content 是要插入评论的地方
            document.getElementById('utterance-container').appendChild(e);
        })();
    </script>
{% endif %}

3.编辑 layout/_third-party/comments/index.swig，添加以下配置加入 utterance.swig 文件：

{% include 'utterance.swig' %}

4.编辑 layout/_partials/comments.swig 文件，加入以下内容：

{% elseif theme.utterance.enable %}
    <div class="comments" id="comments">
      {% include '../_third-party/comments/utterance.swig' %}
    </div>

测试

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