开启Hexo博客评论

发表于 2022-01-19 更新于 2023-11-12 分类于折腾日记阅读次数：本文字数： 3.8k 阅读时长 ≈ 3 分钟

banner

2023年11月11日更新：由于本站全面重构迁移至Next主题，本文内容已不再适用，正式归档。

前言

在上一篇文章中[Hexo 进阶美化设置]，笔者进行了一系列的博客样式修改，由于本人审美水平有限，尽管做了很多设置，博客的颜值仍然比较简陋。不过既然本学渣搭这个博客的目的原本就是为了随便折腾折腾，顺带夹带点私货，难看点就难看了吧，反正也不扣钱。

闲言少叙，书归正传。在博客整体框架搭建完毕后，笔者考虑到，作为一个博客，理应是需要有一个和读者交互的系统（有没有读者另说），于是便着手研究了一系列的Hexo支持的评论系统插件。

而作为一个文科生，本学渣技术力实在有限，基本处于啥代码都看不懂的水平，因此在过程中遇到了许多问题，虽然最终评论系统也勉强算是成功上线，但过程实在痛苦万分，导致这一次的折腾体验很差，但无论如何，也都记录于此，权当给未来的自己提个醒。

评论插件的选择

笔者的博客用的是Matery主题，该主题本体自带了许多可用的评论插件，包括Gitalk、Gitment、Disqus、来必力、Valine、畅言等等，总体来说这些插件的配置比较方便，在主题下的配置文件中已经写好变量名，只需按规则填写即可。

Valine

起初笔者比较倾向于用Valine作为评论系统，主要是看重了其可以匿名发布的特点，毕竟大部分人对于登录才能评论的设计内心会比较反感，而且输入信息登录的这一步骤虽然看似简单，但是对于读者来说，其实很麻烦，存在登陆评论的系统，除非内容极其优秀，否则读者评论的积极性会很低。

然而，具体的配置过程却实在不尽如人意。原理上，按道理只要在主题配置文件中将Valine的开关打开，且填好后端的账号密码即可。但是在具体操作的过程中，笔者发现：由于Matery自带的Valine系统版本落后，并不能接入国际版的后端，导致无法使用。后来经多方查询，笔者了解到：要解决连接问题，需要手动更新Valine的代码。这一步操作原理上其实不难，然而就这个小小的操作，由于没有细节的教程，直接阻挡住了本学渣的后续配置。再加上我本人也不是那种遇到问题非要解决的类型，在参考了诸多大佬的文章也没看懂后，本学渣果断选择了放弃。

Gitalk & Gitment

Valine配置失败，笔者便转向另一个评论插件：Gitalk。这一款插件也很有名，主要是利用了程序猿聚集地Github的一个提issue的功能，“曲线救国”实现博客的评论区功能，具体技术细节笔者不懂，就不多描述了。

要配置Gitalk，需要先在Github账号中创建一个叫OAuthApp的东西，然后将创建完毕生成的密码输入到主题文件的配置中即可。相当简单，然而由于本人对这个插件不太喜欢，就不多谈配置细节了。

笔者不喜欢Gitalk（以及Gitment）的原因很简单：需求权限过高。在这个系统下评论，首先要登录Github账号，然而在登陆时Gitalk会要求对于你的所有公共仓库的读写权限，这一点就比较离谱了，而之前也有大佬讨论过这里的安全性问题建议大家弃用 Gitalk 和 Gitment 等权限过高的 Github OAuth App ，于是虽然配置没有问题，出于安全考量，本人最终还是放弃了这款插件。

来必力、畅言等

至此，Matery主题自带的插件就只剩下来必力、畅言、Disqus等，由于Disqus已经被墙，用起来会不舒适，故放弃，而国产的都要进行备案，烦，故放弃。也就是说，主题自带的已经没有堪用的插件了。

Utterances 配置过程

寻觅一圈后，笔者发现了Utterances这个评论插件，这里不得不说，Utterances实在是评论插件之光，究极轻量，权限合理，本人很推荐。

不过这个插件对我来说有一个难点：本人使用的主题Matery中并不集成它，这就意味着需要自行添加至源码，这对于本文科生来说已经是不能承受之重了。还好，几经搜索，我发现了已经有大佬走过我想走的路，且留下了详尽文档，具体可见本文参考资料。虽然网上已经有了资料，但由于本人是一个很喜欢重复造轮子的人，还是要在这里记录下我的过程。

添加Utterances主要有以下几个步骤：

创建评论区仓库

在Github里创建一个新的仓库，随意命名，如BlogComments。

Github中安装Utterances

Utterances安装，点击install，然后选择刚刚建立好的仓库。

生成Utterances源码

在下一页的repo:下，输入仓库名，如scorevicitm/blogcomments，然后下一项选择title，主题选择Github light，此时下方便会生成需要的源码，如：

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

修改主题源码

首先，在blog/themes/hexo-theme-matery/_config.yml中，加入：

1 2	utteranc: enable: true

作为用来控制插件的开关。

然后在blog/themes/hexo-theme-matery/layout/_partial/post-detail.ejs中，加入（在165行左右，可以看到其他的插件也在这里，加入后格式应该保持统一）：

1
2
3

<% if (theme.utteranc && theme.utteranc.enable) { %>
<%- partial('_partial/utteranc') %>
<% } %>

该处改动的目的是为了在所有博客文章中统一在底部加入一个评论模块，这个改动很关键、所放位置也很重要。post-detail.ejs 是所有博客文章渲染的模板，因此需要在此处统一改动。

最后，在blog/themes/hexo-theme-matery/layout/_partial中，创建utteranc.ejs，内容为：

<div class="card" data-aos="fade-up">
    <div id="utteranc-container" class="card-content">
        <script src="https://utteranc.es/client.js"
                repo="scorevictim/blogcomments"
                issue-term="title"
                theme="github-light"
                crossorigin="anonymous"
                async>
        </script>
    </div>
</div>

该文件就是评论模块的真实内容，具体为啥加div块，本人就不懂了，反正加了就能用了，不管了。

如果博客中开启了留言板模块，那么还需要改动一下这个文件：blog/themes/hexo-theme-matery/layout/contact.ejs，136行附近加入：

1
2
3

<% if (theme.utteranc && theme.utteranc.enable) { %>
    <%- partial('_partial/utteranc') %>
<% } %>

ok，重启服务器，搞定！

结语

至此，博客评论区便上线了，为了配置这个小小的功能，本人把自己折腾的够呛，深感文科生面对成片代码的无力感，这一次的评论插件，笔者配置完就后悔了。

说实话，长时间看代码的体验不是很好，完全是面对着一大堆逻辑严谨，然而空洞且没有灵魂的东西做操作，甚至比与灵魂贫瘠的人类相处还痛苦，这也是当年本学渣远离计算机专业，学文科的原因之一。当然这篇文章中并未记录本人花在看代码上的具体细节，所以读者可能难以想象为何写到这里笔者突然有些丧气，简单来说，就是花了太多时间在不该花的地方，在尝试Valine的更新时，第一眼发现要改多处源码时，本学渣就该及时收手，而不是去学什么JavaScript语法，试着看懂代码，这本就不是笔者折腾的初衷，折腾的一切只是为了爽而已，不是去搞学习的。与此同时，由于本人对于写码本就不感兴趣，只是喜欢拿别人的写码成果搭点东西而已，这种需要一系列深入到代码细节的修改操作让我非常烦躁，遑论最终还没成功。

因此，谨以此文为记，提醒未来的自己，以后一定以要远离这种需要大量修改源码的项目，娱乐就是娱乐，你所有的折腾的目的只是为了玩，以及给大脑一点新鲜的刺激感，而不是为了学怎么当码农的，主次要搞明白一点，让娱乐纯粹一点！！！