本文最后更新于 240 天前 ，文中信息可能已经过时。如有问题请在评论区留言。

Gisucs

官网：giscus.app

利用 GitHub Discussions 实现的评论系统，让访客借助 GitHub 在你的网站上留下评论和反应吧！本项目深受 utterances 的启发。

教程参考

本站集成方式参考以下博文，为尊重原创作者，本文不再赘述，请移步到其站点查看：

教程参考
Hugo 博客引入 Giscus 评论系统 —— 意琦行

你也可以参考官方文档。

主题切换

按上述教程集成了 Giscus 评论系统，但评论区主题不能动态变更。

源码参考
issues#1200 —— giscus

如需评论区随界面主题变更，请按如下方式修改配置：

Hugo 配置

将 giscus 属性字段提取到 Hugo 配置中：

yaml
config.yml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

params:
  giscus:
    repo: "{{ YOUR REPOSITORY }}"
    repoId: "{{ YOUR REPO ID }}"
    category: "Announcements"
    categoryId: "{{ YOUR CATEGORY ID }}"
    mapping: "pathname"
    strict: "0"
    reactionsEnabled: "1"
    emitMetadata: "0"
    inputPosition: "top"
    lightTheme: "light"
    darkTheme: "dark"
    lang: "zh-CN"

评论界面

变更 comments.html 内容如下:

html
layouts/partials/comments.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<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": "",
        };

        // 动态创建 giscus script
        const giscusScript = document.createElement("script");
        Object.entries(giscusAttributes).forEach(
                ([key, value]) => giscusScript.setAttribute(key, value));
        document.querySelector("#tw-comment").appendChild(giscusScript);

        // 页面主题变更后，变更 giscus 主题
        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>

评论标题 & 子标题

增加评论区标题 & 子标题，引导用户进行评论。

修改评论界面，在最上面添加如下内容：

html
layouts/partials/comments.html
1
2
3
4

<div class="comments-title" id="tw-comment-title">
    <p class="x-comments-title">{{- .Param "discussionTitle" }}</p>
    <p style="font-size: 1rem">{{- .Param "discussionSubtitle" }} </p>
</div>

添加样式：

css
assets/css/extended/comment.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

/* giscus 评论组件 */
.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;
}

使用方式

  1. 你可以在 Hugo 配置中配置全局值：
yaml
1
2
3
4

params:
  # 评论区
  discussionTitle: 欢迎来到评论区
  discussionSubtitle: 感谢您的耐心阅读！来选个表情，或者留个评论吧！
  1. 也可在文章 frontmatter 中添加：(以本站 友链 为例)
markdown
1
2

discussionTitle: 👇 申请友链 👇
discussionSubtitle: 在下方评论区留下你的链接吧!