在前面的系列文章中，我们成功的利用Github Pages搭建了基于hugo生成的博客站，并且可以通过Github Action实现CI/CD。
随着博文的不断更新，势必有一天会出现读者希望通过评论直接与作者沟通的需求，我们写博文的目的之一就是希望与更大范围的人建立联结。因此，评论系统成为了刚需。
选型giscus
希望以最小代价上手，我选择评论系统的依据如下：
- 越轻越好，尽量不需要自建服务，如果可以和
Github Pages整合最好。 - 配置越简单越好。
- 当前使用的主题很容易支持。
我当前选择的Hugo主题是Clean White Theme for Hugo, 目前支持三种评论系统，分别是Giscus 、Disqus 和Twikoo 。
Giscus
Giscus 是由 GitHub Discussions 驱动的评论系统，与GitHub Pages有非常好的天然联结。根据官网，Giscus的特性有：
- 开源。
- 无跟踪，无广告，永久免费。
- 无需数据库。全部数据均储存在
GitHub Discussions中。 - 支持自定义主题！
- 支持多种语言。
- 高度可配置。
- 自动从
GitHub拉取新评论与编辑。 - 可自建服务！
Clean White Theme for Hugo 主题配置Giscus只需要在config.toml中加上一段配置：
[params.giscus]
data_repo="your GitHub repo"
data_repo_id="your repo id"
data_category="your category"
data_category_id="your category id"
data_mapping="pathname"
data_reactions_enabled="1"
data_emit_metadata="0"
data_theme="light"
data_lang="en"
crossorigin="anonymous"
Disqus
Disqus 目前最主流的第三方社会化评论系统，主要为网站主提供评论托管服务。简单易用，功能丰富。但官方对于免费版会自带很多广告推广，不清爽。
Twikoo
Twikoo 是基于腾讯云服务的评论系统，官方自称为一个简洁、安全、免费的静态网站评论系统。
对于国内网站来说，确实可以提供很丰富的功能，包括微信和QQ的即时提醒，以及评论检测和审核功能。额，所以呢，还是弃用吧。
最终，我选择了主题所支持的Giscus 作为自己的评论系统。
原理
Giscus 加载时，会使用 GitHub Discussions 搜索 API 根据选定的映射方式（如 URL、pathname、<title> 等）来查找与当前页面关联的 discussion。如果找不到匹配的 discussion，giscus bot 就会在第一次有人留下评论或回应时自动创建一个 discussion。
要评论，访客必须按 GitHub OAuth 流程授权 giscus app 代表他发帖。或者访客也可以直接在 GitHub Discussion 里评论。你可以在 GitHub 上管理评论。
配置过程
Giscus 官网提供了配置参数生成的功能。你可以通过各种选择获得配置参数，并且按提示安装giscus app以及开启Discussions功能。
这里需要注意的地方是，仓库要选择Github Pages项目，这样开启的Discussions功能才能正常使用。
对于Clean White Theme for Hugo 主题，最重要的4个参数，分别是：data-repo，data-repo-id，data-category，data-category-id。我生成的配置参数如下所示：
<script src="https://giscus.app/client.js"
data-repo="DeeWooo/DeeWooo.github.io"
data-repo-id="**************************"
data-category="Announcements"
data-category-id="*********************"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="preferred_color_scheme"
data-lang="zh-CN"
crossorigin="anonymous"
async>
</script>
最终，我在主题示例的配置参数中只修改了data-repo，data-repo-id，data-category，data-category-id4个参数的值，在config.toml文件最后，加上了下面一段配置：
[params.giscus]
data_repo="DeeWooo/DeeWooo.github.io"
data-repo-id="**************************"
data_category="Announcements"
data_category_id="*********************"
data_mapping="pathname"
data_reactions_enabled="1"
data_emit_metadata="0"
data_theme="light"
data_lang="en"
crossorigin="anonymous"
这样就完成了Giscus的配置。
效果
在每个博文页面下，都出现了评论框
image.png
参考文章
- giscus官网，https://giscus.app/zh-CN
- Clean White Theme for Hugo，https://github.com/zhaohuabing/hugo-theme-cleanwhite
>
本作品由 IvyWooo 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可，转载请注明出处。 本文链接
网友评论