建站第十二篇 Hugo博客使用giscus作为评论系统

在前面的系列文章中，我们成功的利用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、等）来查找与当前页面关联的 discussion。如果找不到匹配的 discussion，giscus bot 就会在第一次有人留下评论或回应时自动创建一个 discussion。

要评论，访客必须按 GitHub OAuth 流程授权 giscus app 代表他发帖。或者访客也可以直接在 GitHub Discussion 里评论。你可以在 GitHub 上管理评论。

配置过程

Giscus 官网提供了配置参数生成的功能。你可以通过各种选择获得配置参数，并且按提示安装giscus app以及开启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的配置。

效果

在每个博文页面下，都出现了评论框。

参考文章

giscus官网，https://giscus.app/zh-CN
Clean White Theme for Hugo，https://github.com/zhaohuabing/hugo-theme-cleanwhite

本作品由 IvyWooo 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可，转载请注明出处。本文链接

「真诚赞赏，手留余香」

本文总阅读量次