使用 GitHub Issue 作为 Hugo 的评论系统



安装 Octomments

按照 Octomments 的介绍,将 Octomments 安装到您的 GitHub 账户,确保它拥有访问您的目标 repo 的 issue 的权限。

配置 GitHub issue

在配置文件中增加配置项:

  • comment.owner:Issue repo 的拥有者
  • comment.repo:Issue repo 的名字

配置 Comment 组件

在您的博客站点根目录下的layouts/partials/comments.html 模板中增加:

 1{{ if .Params.issueNumber -}}
 2<link href="https://unpkg.com/octomments/build/ocs-ui.min.css" rel="stylesheet">
 3<div id="comments"></div>
 4<script src="https://unpkg.com/octomments/build/ocs.min.js"></script>
 5
 6<script>
 7  Octomments({
 8    github: {
 9      owner: '{{ $.Site.Params.comment.owner }}',
10      repo: '{{ $.Site.Params.comment.repo }}',
11    },
12    issueNumber: {{ .Params.issueNumber }},
13    renderer: [OctommentsRenderer, '#comments']
14  }).init();
15</script>
16
17{{ end }}

配置需要评论的文章

在文章的 metadata 章节加入创建的 issue 的 issue number,如本文的 metadata:

 1---
 2title: "使用 GitHub Issue 作为 Hugo 的评论系统"
 3date: 2022-02-10T15:07:10+08:00
 4draft: true
 5toc: false
 6issueNumber: 3
 7images:
 8tags: 
 9  - Hugo
10  - Github
11---

这样本文的末尾就会出现一个评论栏啦,所有对本文的评论都会同步到 GitHub 的 issue 中。