Hexo NexT使用utterances评论区

本文简要介绍一下如何在博客使用utterances评论区，并移除其他评论区的过程。对于具体的细节则不会做过多解释，主要展示步骤。

本文运行环境：

node: v18.16.1
npm: 9.5.1
hexo: 6.3.0
hexo-cli: 4.3.1
NexT: 8.17.0

引言

在 Hexo NexT使用Gitalk评论区 一文中提到，在刚折腾完Gitalk评论区的情况下，又要进行迁移了。Gitalk面临的具体问题如下：

1. 对作者：client_id与client_secret直接暴露在前端，可能会有安全隐患；
2. 对评论者：首次使用时需要授权GitHub账户，而该授权竟然要求所有公开仓库的读写权限，权限过于夸张，如果有恶意网站，甚至可以删光所有公共仓库。

关于第一点，大概的结论是攻击者拿到client_id与client_secret也做不到什么实质的破坏。虽然如此，暴露client_id与client_secret终究是不太推荐的做法。

对于第二点，为什么需要这么高的权限，简而言之就是GitHub OAuth权限设计目前只能做到这样的粒度。Gitalk源码中，开发者没有保存 access_token，但是可能会存在恶意的攻击者来扩展这一点。基于此，本博客决定采用更安全的评论系统，例如utterances这类App，它的权限仅限于某个仓库，可以一定程度上降低破坏性。

那么开始吧。

移除Gitalk

这个算是比较简单的，因为刚刚建完Gitalk评论区，基本顺着 Hexo NexT使用Gitalk评论区 这篇文章的做法倒着来一遍就可以了。需要注意的是，可以考虑删除建立的GitHub Application、Personal Access Token以及评论区仓库，避免可能的安全隐患。当然，如果后续还有回归的可能，目前只是暂时移除，基本只需要做两件事：

1. 将_config.next.yml中的Gitalk关闭；
2. 在package.json与.github/workflows/main.yml里移除source/_scripts/gitalk-auto-init.js的相关内容。

设置utterances

其实utterances是相当好设置的，基本就根据官网的步骤做即可：

1. 新建一个评论区仓库用于存储Issues；
2. 点击此处安装App，请注意一定要把App的权限设定为上一步建好的仓库；
3. 去_config.next.yml里配置。配置项如下：

_config.next.yml

# Utterances
# For more information: https://utteranc.es
utterances:
  enable: true
  repo: your-name/your-repo # Github repository owner and name
  # Available values: pathname | url | title | og:title
  issue_term: pathname
  # Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
  theme: github-light

其中issue_term与theme可以根据你的喜好设置。如果你之前有其他的评论区，记得取消掉。如果你有多评论区配置也要做相应修改（例如active: utterances），这里不再赘述。

然后就没有了，一切配置均已结束，而且也不需要像Gitalk那样为老文章生成Issues，因为Issue是随着第一条评论自动生成的。简直太简单了有没有！

utterances vs Gitalk

除了前文所述，Gitalk必须为每篇文章显示初始化Issue，但是utterances不需要，因此对文章比较多的老博客非常友好。但并不是说Gitalk全然没有优点。参考这篇文章，主要如下：

1. Gitalk在「引言回复」与「＠用户」方面相对便捷，这些功能都整合在界面上，utterances相对麻烦；
2. 个人观点，Gitalk的UI设计更好看一些。这点见仁见智。

虽然但是，如果早点发现Gitalk等评论系统面临的权限问题，以及utterances的相关说明，或许就不用肝上一篇文章了呢。也算是一种体验吧。还是那句话，生命在于折腾。