Hexo Next 主题增加新的第三方评论系统 utterance

发表于 更新于 分类于 阅读次数：

问题

博客最近切换到了 hexo 博客, 目前用起来感觉很方便。很喜欢 markdown 写作。当然利用 Github Pages 也省下了一笔费用，某套路云的套路令人感到恶心。这里就不多说了。为什么要换评论呢？因为我使用的 next 主题的评论都不太合我的心意，Disqus 很好，但是广告太多，其他仿 git 的评论总觉得别扭，于是我也翻了找找看，发现了 utterance，觉得挺不错的，简洁风格也不缺失。所以就打算换这个了。

解决

hexo 的主题改起来还是很方便的，从配置开始，然后添加一小段的模块代码就可以了。标签也可以仿照其他文件，So Easy！开始动手吧。在这之前需要到 utterances app 申请一下，这样 utterances 才有权限访问你的仓库。

添加配置

找到 Next 主题的配置文件 _config.yml，配置随便你添加到哪里。你可以放在文件末尾或者可以和其他评论模块配置放在一块。

1
2
3
4
5
utterance:
  enable: true
  repo: #仓库名字
  theme: #主题
  issue-term: #映射配置

评论主题的 theme 选项如下:

  • github-light
  • github-dark
  • github-dark-orange
  • icy-dark
  • dark-blue
  • photon-dark

评论 issue-term 映射配置选项如下：

  • pathname
  • url
  • title
  • og:title
  • issue-number
  • specific-term

引入 Utterance 插件

在 _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-item }}')
        utterances.setAttribute('theme','{{ themm.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>

增加 comment 样式

找到 _partials\comments.swig 然后增加下面代码:

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

还需要在 _third-party\comments\index.swig 添加如下代码

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

以上就是整个配置过程。如果有任何问题可以在评论区留言。