使用 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 中。