Hugo 添加 Giscus 评论

捣鼓了这么多天，看见别人的博客都有评论功能，十分羡慕，所以我在想有什么轻量又简单的方法，能让我的博客也能有评论功能，而这时我找到了 Giscus。

Giscus 是一个由 Github Discussions 驱动的评论系统，无需自己单独配置，直接白嫖 Github 的资源即可，而且 UI 和功能都十分的合适我，配合 LoveIt 的配置可以做到十分美观。

配置 Github 仓库

• 如下图，创建一个公开的 Github 仓库

  

• 找到Settings -> General -> Features -> Discussions 勾选，为仓库启动Discussions功能 ，如下图

  

使配置好的仓库安装 Giscus

• 点击这里，我们将会看到下面的界面，我们点击安装

  

• 点击安装后，要选择一个仓库，如下图，选择我们之前创造的仓库即可

  

  我遇到的问题

  我创了个新号打算试试，但是发现点击安装后直接 404 ，估计是对新创的号有限制吧。

从官网获取配置信息

接下来，我们只需到 Giscus 官网获取配置信息，然后将配置信息填到 Hugo 的配置文件中即可。但是由于主题的不同，所以配置文件的填写也不同，这里以 LoveIt 为例。

• 来到 Giscus 官网

  • 填写你的仓库名，如下图

    

  • 选择页面与嵌入的 discussion 之间的映射关系，如下图

    

    直接选第一个就行

  • 选择 Discussion 分类，如下图

    

    我们选择 Announcements 类型即可，官方也是这样推荐的，因为这样便于管理。

  • 其他选项默认，我们往下滑，找到配置文件，如下图

    

    我们要记下data-repo，data-repo-id，data-category，data-category-id，data-mapping这几个值。

• 修改 Hugo 配置文件
  注意

  这里使用的 Hugo 一定要是最新的版本，不然是不支持 Giscus 的（比如release的版本就是不支持的，因此要下载源码）。

  • 打开配置文件config.toml，找到# 评论系统设置的第一个 enable 参量，将其改为 true，如下图：

    

  • 找到# giscus comment 评论系统设置,并把其配置按照下面代码块修改。

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

    [params.page.comment.giscus] # 你可以参考官方文档来使用下列配置 enable = true repo = "<your_repo>" repoId = "<your_repoId>" category = "<your_category>" categoryId = "<your_categoryId>" # <your_repo> 对应官网的 data-repo # <your_repoId> 对应官网的 data-repo-id # <your_category> 对应官网的 data-category # <your_categoryId> 对应官网的 data-category-id # 为空时自动适配当前主题 i18n 配置 lang = "" mapping = "<your_mapping>" # <your_mapping> 对应官网的 data-mapping reactionsEnabled = "1" emitMetadata = "0" inputPosition = "bottom" lazyLoading = false lightTheme = "light" darkTheme = "dark_dimmed"

    配置好后,就可以开启 Giscus 评论系统了。

参考文章：

1. Hugo 博客引入 Giscus 评论系统
2. 迁移博客评论系统从Utteranc.es到Giscus
3. Giscus 官网