前言
利用 GitHub Discussions 实现的评论系统，让访客借助 GitHub 在网站上留下评论和反应（表情）。
Giscus 优势
- 开源
- 无跟踪，无广告，永久免费
- 无需数据库。所有数据均储存在 GitHub Discussions 中
- 支持自定义主题
- 支持多种语言（重要）
- 高可配置性
- 自动从 GitHub 拉取新评论与编辑
- 可自建服务
Giscus 运作
giscus 加载时，会使用 GitHub Discussions 搜索 API 根据选定的映射方式（如 URL、pathname、title 等）来查找与当前页面关联的 discussion。如果找不到匹配的 discussion，giscus bot 就会在第一次有人留下评论或回应时自动创建一个 discussion。
访客如果想要评论，必须按照 GitHub OAuth 流程授权 giscus app 代表他发布，或者可以直接在 GitHub Discussion 里评论。
为博客添加 Giscus 评论
接下来我们进入今天的主题 —— 添加 Giscus 评论
1.建仓
到 Github 新建 仓库，仓库名称根据自己的需求自己定，没有要求。下面3点需要注意：
2.获取 Giscus 配置信息
登录 Giscus ，往下拉，在配置那个地方，输入你的 GitHub 仓库名称，复制生成的代码。
下面是需要使用到的字段，请关注。
| 序号 | 字段 |
|---|---|
| 1 | data-repo |
| 2 | data-repo-id |
| 3 | data-category |
| 4 | data-category-id |
Giscus 配置信息截图：
3.配置 hugo.yaml 文件
因为我的博客有 2 种语言，所以 Giscus 配置信息需要添加在对应的语言下面。
提示
记得把 hugo.yaml 中的 comments 属性设置为 true，即：comments: true
comments: true
defaultContentLanguage: en
defaultContentLanguageInSubdir: false
languages:
en:
params:
giscus:
repo: "填写自己的 Giscus 配信信息"
repoId: "填写自己的 Giscus 配信信息"
category: "填写自己的 Giscus 配信信息"
categoryId: "填写自己的 Giscus 配信信息"
mapping: "pathname"
strict: "0"
reactionsEnabled: "1"
emitMetadata: "0"
inputPosition: "top"
lightTheme: "light"
darkTheme: "dark"
lang: "en"
discussionTitle: "Welcome to the comments section."
discussionSubtitle: "Thank you for your patience in reading! Come pick an emoji or leave a comment!"
zh:
params:
author: 龚东海
social: true
giscus:
repo: "填写自己的 Giscus 配信信息"
repoId: "填写自己的 Giscus 配信信息"
category: "填写自己的 Giscus 配信信息"
categoryId: "填写自己的 Giscus 配信信息"
mapping: "pathname"
strict: "0"
reactionsEnabled: "1"
emitMetadata: "0"
inputPosition: "top"
lightTheme: "light"
darkTheme: "dark"
lang: "zh-CN"
discussionTitle: "欢迎来到评论区"
discussionSubtitle: "感谢您的耐心阅读！来选个表情，或者留个评论吧！"
4.新建 comments.html 文件
在 ./layouts/partials/ 文件夹下新建 comments.html 文件，代码如下：
comments.html
<div class="comments-title" id="tw-comment-title">
<p class="x-comments-title">{{ .Site.Params.giscus.discussionTitle }}</p>
<p style="font-size: 1rem">{{ .Site.Params.giscus.discussionSubtitle }}</p>
</div>
<div id="tw-comment"></div>
<script>
const getStoredTheme = () => localStorage.getItem("pref-theme") === "dark" ? "{{ .Site.Params.giscus.darkTheme }}" : "{{ .Site.Params.giscus.lightTheme }}";
const setGiscusTheme = () => {
const sendMessage = (message) => {
const iframe = document.querySelector('iframe.giscus-frame');
if (iframe) {
iframe.contentWindow.postMessage({giscus: message}, 'https://giscus.app');
}
}
sendMessage({setConfig: {theme: getStoredTheme()}})
}
document.addEventListener("DOMContentLoaded", () => {
const giscusAttributes = {
"src": "https://giscus.app/client.js",
"data-repo": "{{ .Site.Params.giscus.repo }}",
"data-repo-id": "{{ .Site.Params.giscus.repoId }}",
"data-category": "{{ .Site.Params.giscus.category }}",
"data-category-id": "{{ .Site.Params.giscus.categoryId }}",
"data-mapping": "{{ .Site.Params.giscus.mapping | default "pathname" }}",
"data-strict": "{{ .Site.Params.giscus.strict | default "0" }}",
"data-reactions-enabled": "{{ .Site.Params.giscus.reactionsEnabled | default "1" }}",
"data-emit-metadata": "{{ .Site.Params.giscus.emitMetadata | default "0" }}",
"data-input-position": "{{ .Site.Params.giscus.inputPosition | default "bottom" }}",
"data-theme": getStoredTheme(),
"data-lang": "{{ .Site.Params.giscus.lang | default "en" }}",
"data-loading": "lazy",
"crossorigin": "anonymous",
"async": "",
};
const giscusScript = document.createElement("script");
Object.entries(giscusAttributes).forEach(
([key, value]) => giscusScript.setAttribute(key, value));
document.querySelector("#tw-comment").appendChild(giscusScript);
const themeSwitcher = document.querySelector("#theme-toggle");
if (themeSwitcher) {
themeSwitcher.addEventListener("click", setGiscusTheme);
}
const themeFloatSwitcher = document.querySelector("#theme-toggle-float");
if (themeFloatSwitcher) {
themeFloatSwitcher.addEventListener("click", setGiscusTheme);
}
});
</script>
5.新建 comments.css
在 ./assets/css/extended 文件夹下新建 comments.css 文件，代码如下：
.comments-title {
margin-top: 2rem;
margin-bottom: 2rem;
display: block;
text-align: center;
}
.x-comments-title {
display: block;
font-size: 1.25em;
font-weight: 700;
padding: 1.5rem 0 .5rem;
}
恭喜你，完成上述步骤后，你的博客已经拥有一个支持多语言，并跟随主题变化而变化的评论功能。
感谢您的耐心阅读！来选个表情，或者留个评论吧！