将博客评论系统由 utterance 迁移至 giscus

前言

之前建博客的时候没听说过giscus，使用的是utterance。

不过看起来giscus的功能相对更优，而且之前配置博客时没有进行相应的记录，因此干脆直接换成giscus了。

这里需要感谢@chuxinyuan大佬在评论区的建议

这里就直接全文摘抄官网的简介了，说得很明白：

利用 GitHub Discussions 实现的评论系统，让访客借助 GitHub 在你的网站上留下评论和反应吧！本项目深受 utterances 的启发。

相较于使用 issue 的 utterance，使用 discussion 的 gisus 在功能上更为丰富，详见 GitHub Discussions 快速入门（而且 utterance 把评论全放在 issue 里也怪怪的）。

giscus的配置还是相当简单的。

首先，准备一个github仓库，这里我用的是原先utterance的仓库。

接下来在仓库的设置界面开启 Discussions 功能：

开启discussion

接下来的操作就是相当简单且无脑了，你需要做的就是在 github 上安装 giscus APP

安装界面

具体的安装过程不再赘述，安装完毕后就只需打开giscus官网，输入具体的仓库名称（或者仓库链接）：

输入界面

若该仓库可用，那么就可以随着官网的说明一步步配置下去。配置完成后便可在 启用 giscus 下找到需要的代码：

代码示例

之后的过程依主题的不同而不同，请参考各自的主题说明文档。

我使用的是Hugo的stack主题，需要在 config.yaml 中设置：

1
2
3


comments:
  enabled: true
  provider: giscus

之后再在giscus那栏中填入官网代码中的相应内容即可。

当然config.yaml中缺少了部分选项，你也可以直接将需要的js代码放进./themes/hugo-theme-stack/layouts/partials/comments/provider/giscus.html里：

文件界面

至此便配置完成，可以说是相当简单的。

还有一些高级用法，请自行参考官网对应说明。

utterance 之类使用 Github issue 实现的评论系统的内容是可以转换为相应的 discussion的，详见将议题转换为讨论

只需在相应库的 issues 界面的 labels 处将相应 label 转换为 discussion 即可（假如没标注的话请自行添加）。

转换界面

转换完成后，若 discussion 标题与页面的映射关系正确，那么 giscus 就可以展示这些评论，迁移结束。