hugo-PaperMod 默认没有评论功能，网上游览一圈，最后选用 Giscus，主要是部署方便
1. Github 端
1.1 创建仓库
到 Github 新建仓库，仓库名称根据自己的需求自己定，没有要求
需要注意：
- 该仓库是公开的，否则访客将无法查看 Discussion
1.2 启用讨论
（1）单击 设置
（2）向下滚动到 Features 部分 –> 勾选 讨论 –> 点击 Set up Discussions
（3）滚动到下方，点击 Start discussions
1.3 安装 giscus APP
（1）访问 giscus 配置页
（2）点击 Configure ，填写 Github 登录密码
（3）在 Repository access 部分添加在（1）中创建的仓库，然后保存
2. 获取 Giscus 配置信息
（1）访问 Giscus
（2）往下滚动到 “配置” 部分，填写仓库名称
（3）“页面 <–> discussion 映射关系” 勾选 Discussion 的标题包含页面的 pathname
（4）Discussion 分类 选择 Announcements
（5）特性部分勾选 启用主帖子上的反应（reaction） 和 将评论框放在评论上方
（6）拷贝这部分信息，待会需要在 hugo.yaml 填写配置信息，关注这 4 个信息项即可：data-repo、data-repo-id、data-category、data-category-id
<script src="https://giscus.app/client.js"
data-repo="xxxxx/xxxxx"
data-repo-id="xxx"
data-category="xxxxx"
data-category-id="xxxxx"
data-mapping="pathname"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="xxxx"
data-lang="zh-CN"
crossorigin="anonymous"
async>
</script>3. 添加 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>4. 添加 comments 样式
在 ./assets/css/extended/ 添加 comments.css
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;
}5.调整 hugo.yaml
hugo.yaml
comments: true # 默认开启评论
params:
giscus:
repo: "填写 [giscus 配置信息]中的 data-repo"
repoId: "填写 [giscus 配置信息]中的 data-repo-id"
category: "填写 [giscus 配置信息]中的 data-category"
categoryId: "填写 [giscus 配置信息]中的 data-category-id"
mapping: "pathname"
strict: "0"
reactionsEnabled: "1"
emitMetadata: "0"
inputPosition: "top"
lightTheme: "light"
darkTheme: "dark"
lang: "zh-CN"
discussionTitle: "" # 按需填写，评论框上方的标题
discussionSubtitle: "" # 按需填写，评论框上方的副标题
评论