为hexo-theme-cactus主题添加Giscus评论系统

博客维护
,
467 words , 2 mins.

启发

最近添加了 Pinpe的云端 博友的友链，并且在留言页面留过言。

今天晚上收到了来自 GitHub 的其他博友留言的抄送邮件，遵循周末晚上要把友链都翻一遍的习惯，点进了博友的留言页面，惊奇的发现留言和回复是连贯的。

原 hexo-theme-cactus 主题的基于 Utterances 的评论系统中，评论和回复是分开的，只能引用回复。

我还以为是我使用错误，最后确认 GitHub 的 issues 中确实不能直接 Reply，只能 Quote Reply。

Giscus

很久之前就看到过 Giscus 这个评论系统的名字，可是没机会仔细了解，本能的以为是和 disqus、wolai 类似的第三方的评论系统。

点进主页，这主页风格和 Utterances 如出一辙，惊喜的发现 Giscus 就是受到 Utterances 的启发利用 GitHub Discussions 功能开发的，而 GitHub Discussions 系统是支持直接回复的。

于是打算将评论切换为 Giscus。

不过 hexo-theme-cactus 主题默认只支持 disqus 和 utterances，并没有 Giscus 的选项。

没有了解过 Hexo 的评论系统，不过看从 Giscus 主页生成的配置看，就一个 script 标签，所以想着应该也不复杂。

尝试着看看原有的主题相关的配置和 ejs 文件，复制了改改就弄好了，比想象中的简单。

代码变更

主要涉及 theme/_config.yml、theme/layout/_partial/comments.ejs、theme/layout/_partial/scripts.ejs 这几个文件。

在 theme/_config.yml 文件中新增配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
giscus:
  enabled: true
  repo: "username/repository"  # 用户名/仓库名，仓库名不带 .git 后缀
  repo_id: "repo-id"
  category: "Announcements"  # 推荐使用的 Discussions 类别
  category_id: "category-id"
  mapping: "pathname"
  strict: "0"
  reactions_enabled: "1"
  emit-metadata: "0"
  input_position: "top"
  theme: "light"
  lang: "zh-CN"
  loading: "lazy"
  crossorigin: "anonymous"

theme/layout/_partial/comments.ejs 文件末尾新增内容：

1
2
3
4
5
6
7
<% if(page.comments && theme.giscus.enabled){ %>
    <div class="blog-post-comments">
        <div id="giscus_thread">
            <noscript><%= __('comments.no_js') %></noscript>
        </div>
    </div>
<% } %>

在 theme/layout/_partial/scripts.ejs 中新增内容：

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
<% if (page.comments && theme.giscus.enabled && theme.giscus.repo && theme.giscus.category && theme.giscus.theme){ %>
  <script type="text/javascript">
    var giscus_repo = '<%= theme.giscus.repo %>';
    var giscus_repo_id = '<%= theme.giscus.repo_id %>';
    var giscus_category = '<%= theme.giscus.category %>';
    var giscus_category_id = '<%= theme.giscus.category_id %>';
    var giscus_mapping = '<%= theme.giscus.mapping %>';
    var giscus_strict = '<%= theme.giscus.strict %>';
    var giscus_reactions_enabled = '<%= theme.giscus.reactions_enabled %>';
    var giscus_emit_metadata = '<%= theme.giscus.emit_metadata %>';
    var giscus_input_position = '<%= theme.giscus.input_position %>';
    var giscus_theme = '<%= theme.giscus.theme %>';
    var theme_lang = '<%= theme.lang %>';
    var giscus_loading = '<%= theme.giscus.loading %>';
    var giscus_crossorigin = '<%= theme.giscus.crossorigin %>';

    (function(){
        var script = document.createElement('script');

        script.src = 'https://giscus.app/client.js';
        script.setAttribute('data-repo', giscus_repo);
        script.setAttribute('data-repo-id', giscus_repo_id);
        script.setAttribute('data-category', giscus_category);
        script.setAttribute('data-category-id', giscus_category_id);
        script.setAttribute('data-mapping', giscus_mapping);
        script.setAttribute('data-strict', giscus_strict);
        script.setAttribute('data-reactions-enabled', giscus_reactions_enabled);
        script.setAttribute('data-emit-metadata', giscus_emit_metadata);
        script.setAttribute('data-input-position', giscus_input_position);
        script.setAttribute('data-theme', giscus_theme);
        script.setAttribute('data-lang', theme_lang);
        script.setAttribute('data-loading', giscus_loading);
        script.setAttribute('crossorigin', giscus_crossorigin);
        script.async = true;
        (document.getElementById('giscus_thread')).appendChild(script);
    }());
</script>
<% } %>

hexo clean && hexo g && hexo s 本地运行测试，一次通过！

历史评论迁移

看 Giscus 主页提到如果历史评论基于 Utterances，还可以进行迁移，非常的便利，有空再看看迁移。