Blog集成评论功能

在思考博客初期流量如何增长的过程中，网上有建议增加评论功能，所以我打算把这个功能加上，但我原本以为评论数据需要额外的数据库存储，后来发现不用那么麻烦，Hugo框架下本身就有集成Giscus评论系统的搭建方案，数据可以存在Github Reop的Discussion中。但对我而言可能需要注意一点，因为我的博客站点是私用仓库，所以需要另外用一个独立的公开 GitHub 仓库来专门存放评论数据。

整个过程分为三步：在 GitHub 上准备评论仓库、在 Giscus 官网生成配置、最后将配置写入你的 Hugo 站点。

1.在GitHub上创建一个“评论仓库”

这个新仓库将专门用于存储所有博客文章的评论数据。具体操作如下：

创建公开仓库：在 GitHub 上创建一个新仓库，例如命名为 blog-comments。注意：仓库必须设置为“公开”（Public）。
开启 Discussions 功能：
- 进入新仓库页面，点击 Settings (设置) 标签页。
- 在左侧菜单选择 General (通用)。
- 向下滚动到 Features (功能) 区域，勾选 Discussions 复选框。
安装 Giscus GitHub App：
- 访问 Giscus 官方 App 页面：github.com/apps/giscus。
- 点击 Install (安装) 按钮。
- 在权限设置页面，选择 “Only select repositories” (仅选择仓库)。
- 在下拉菜单中，选中你刚创建的评论仓库（如 blog-comments）。
- 点击 Install 完成安装。

2.在giscus.app官网生成配置代码

访问配置页面：打开 giscus.app。
填写仓库信息：在“仓库”输入框中，按你的GitHub用户名/评论仓库名的格式填写（例如 Emerex/blog-comments），输入后页面应出现“成功”提示。
配置页面与讨论的映射：在“页面↔️Discussion 映射”部分，推荐选择 “Discussion 标题包含页面路径 (pathname)”。这个选项能让每篇博客文章自动匹配一个对应的 GitHub Discussion。
选择讨论分类：在“分类”部分，推荐选择 Announcements。选择此分类可以避免访客在评论时误创建新的 Discussion 类别。
复制配置代码：向下滚动页面，在 “启用 giscus” 部分，你会看到一段以 <script> 开头的代码。请复制这段完整的代码并妥善保存，我们下一步会用到它。这段代码看起来会是这样：

   <script src="https://giscus.app/client.js"
    data-repo="你的用户名/评论仓库名"
    data-repo-id="你的仓库ID"
    data-category="Announcements"
    data-category-id="你的分类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-id 和 data-category-id 这两个关键数据由 giscus.app 网站自动生成，你需要从复制的代码中获取它们。

3.集成评论功能

Hextra 主题已经内置了对 Giscus 的支持，配置非常简单。

找到配置文件：在你的 Hugo 站点根目录下，找到配置文件（通常是 hugo.yaml 或 hugo.toml）。
添加 Giscus 配置：在配置文件中，按照以下结构添加或修改 params 部分：

yaml
params:
  comments:
    enable: true          # 全局启用评论
    type: giscus          # 指定使用 giscus
    giscus:
      # 将下面这些值替换成你从 giscus.app 复制的代码里的对应内容
      repo: "你的用户名/评论仓库名"         
      repoId: "你的仓库ID"                 # 从复制的代码中获取
      category: "Announcements"           # 保持与 giscus.app 设置一致
      categoryId: "你的分类ID"             # 从复制的代码中获取

注意：如果你使用的是 hugo.toml 格式，语法会稍有不同，但配置项是相同的。 3. （可选）控制单篇文章的评论开关：你可以在某篇文章的 front matter 中，通过 comments: false 来单独关闭该篇文章的评论功能。

至此，评论功能就配置好了，每篇文章底部会自动出现评论框，用户用GitHub 登录即可评论，数据存在blog-comments仓库的Discussions里。

4.评论查看和回复

评论功能有了，但之后我在哪里可以统一查看呢，不会让我一篇一篇去翻吧。

最直接的方法：在 GitHub的Discussions上查看

所有评论都在你创建的评论仓库（例如 blog-comments）的 Discussions（讨论） 板块里。

进入评论仓库，点击上方的 “Discussions” 标签。
会看到一个列表，里面每一行对应博客的一篇文章。
点击任意一条，就能看到这篇文章下的所有评论及回复。
可以在 GitHub 上直接编辑、删除或锁定任何不当评论，对评论进行集中管理。