前言

感觉博客还是应该有一个评论区比较好，来增加互动性（虽然没人看QAQ）。由于本博客目前使用的是静态博客 Hugo 并且托管在 Cloudflare 上，所以使用 Giscus 组件比较好。

Giscus 利用 GitHub Discussions 实现的评论系统，让访客借助 GitHub 在网站上留下评论和反应。虽然需要访客登录 Github 账号，提高了评论的门槛，但是同样也筛选了垃圾评论，可以说是各有利弊吧。

部署流程

下面的操作适用于 papermod 的主题：

  1. 创建新仓库。因为我的博客仓库设置为私有，但是 Giscus 要求使用公开的仓库，因此我先创建了一个空仓库 blog-comments。如果博客仓库本身就是公开的，就不用这一步的操作了。
  2. 安装 Giscus。在这个网址 GitHub Apps - giscus 安装 app 到对应的评论仓库，安装完成的示例如下图所示。
  3. 打开仓库的讨论区功能。在 blog-comments -> settings -> Features 中找到 Discussions 并将其勾选。

4. 生成并复制评论代码。在官方网页中 giscus 粘贴仓库地址，并选择分类为Announcements，其余设置根据喜好进行修改。你会获得类似下面的代码，注意不要泄露自己的 id 信息：

<script src="https://giscus.app/client.js"
        data-repo="tabtac/blog-comments"
        data-repo-id="XXXXXXX"
        data-category="Announcements"
        data-category-id="XXXXXXX"
        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>

5. 在 layouts\partials 中创建一个新的文件 comments.html，并将上面的代码粘贴进该文件中。别忘了在配置文件 hugo.yaml 中将评论功能打开 comments: true。 到这里，Hugo 博客 Papermod 主题的 Giscus 评论功能就全部设置完成了。