使用 GitHub Issue 作为 Hugo 的评论系统
安装 Octomments
按照 Octomments 的介绍,将 Octomments 安装到您的 GitHub 账户,确保它拥有访问您的目标 repo 的 issue 的权限。
配置 GitHub issue
在配置文件中增加配置项:
comment.owner
:Issue repo 的拥有者comment.repo
:Issue repo 的名字
配置 Comment 组件
在您的博客站点根目录下的layouts/partials/comments.html
模板中增加:
{{ if .Params.issueNumber -}}
<link href="https://unpkg.com/octomments/build/ocs-ui.min.css" rel="stylesheet">
<div id="comments"></div>
<script src="https://unpkg.com/octomments/build/ocs.min.js"></script>
<script>
Octomments({
github: {
owner: '{{ $.Site.Params.comment.owner }}',
repo: '{{ $.Site.Params.comment.repo }}',
},
issueNumber: {{ .Params.issueNumber }},
renderer: [OctommentsRenderer, '#comments']
}).init();
</script>
{{ end }}
配置需要评论的文章
在文章的 metadata 章节加入创建的 issue 的 issue number,如本文的 metadata:
---
title: "使用 GitHub Issue 作为 Hugo 的评论系统"
date: 2022-02-10T15:07:10+08:00
draft: true
toc: false
issueNumber: 3
images:
tags:
- Hugo
- Github
---
这样本文的末尾就会出现一个评论栏啦,所有对本文的评论都会同步到 GitHub 的 issue 中。