Hexo + Chic 主题集成 Giscus 评论系统详细教程

本教程将教你如何在 Hexo 博客（使用 Chic 主题）中添加 Giscus 评论系统，让你的博客拥有简洁现代的评论功能，并且支持明暗模式自动切换。

项目地址：https://github.com/EvannZhongg/Blog-Learning.git

一、准备工作

1. 确保你已完成以下条件：

  • 博客已搭建并使用 Hexo 框架
  • 正在使用 hexo-theme-Chic 主题
  • 博客托管在 GitHub

2. 启用 GitHub Discussions 功能

  1. 打开你的博客仓库页面
  2. 点击顶部的 Settings
  3. 在 General 中 Features 区域点击 Discussions
  4. 勾选 “Enable discussions for this repository”

setting_discussions

二、使用 Giscus.app 获取评论配置代码

  1. 打开 Giscus 官网：https://giscus.app
  2. 登录 GitHub 账号
  3. 安装 giscus app ，否则访客将无法评论和回应
  4. 按照如下选择进行配置：
    • Repository: 选择你的博客仓库（注意填写格式为 用户名/仓库名）
    • Discussion Category: 建议选择 Announcements（防止读者随意发帖）
    • Page ↔️ Discussion Mapping: 选择 pathname
    • Theme: 选择任意（我们后续会动态控制）
    • Language: 选择 zh-CN
  5. 点击页面底部的 “Copy code snippet”，复制生成的 <script> 标签代码

三、创建评论模块文件

1. 打开博客主题目录

路径：themes/hexo-theme-Chic/layout/_partial/

2. 创建或编辑 livers.ejs 文件

将 Giscus 中生成的 <script> 标签代码填入文件（注意部分参数的区别），同时增加主题自动同步功能代码：

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!-- Giscus 评论区挂载点 -->
<div id="giscus-container" style="margin-top: 2.5rem;"></div>

<!-- Giscus 动态加载脚本：初始加载 + 明暗主题切换 -->
<script>
  function createGiscus(theme) {
    const giscusContainer = document.getElementById('giscus-container');
    if (!giscusContainer) return;

    // 清除旧的评论 iframe
    giscusContainer.innerHTML = '';

    const script = document.createElement('script');
    script.src = 'https://giscus.app/client.js';

    // 替换为你的 GitHub 仓库信息（格式：username/repo）
    script.setAttribute('data-repo', 'your-github-username/your-repo-name');

   // 替换为你的 repo-id 和 category-id（在 giscus.app 配置页面生成）
    script.setAttribute('data-repo-id', 'your-repo-id');
    script.setAttribute('data-category', 'your-category-name');
    script.setAttribute('data-category-id', 'your-category-id');

    // 其他常规推荐设置
    script.setAttribute('data-mapping', 'pathname');           // 用页面路径匹配评论帖
    script.setAttribute('data-strict', '0');                   // 若无匹配帖则创建新帖
    script.setAttribute('data-reactions-enabled', '1');        // 启用表情反应
    script.setAttribute('data-emit-metadata', '0');            // 不输出元数据
    script.setAttribute('data-input-position', 'top');         // 输入框在评论上方
    script.setAttribute('data-theme', theme);                
    script.setAttribute('data-lang', 'zh-CN');                 // 中文界面
    script.setAttribute('crossorigin', 'anonymous');           // 跨域资源安全
    script.async = true;                                       
     
    giscusContainer.appendChild(script);
  }

  function getCurrentTheme() {
    return document.body.classList.contains('dark-theme') ? 'dark' : 'light';
  }

  document.addEventListener('DOMContentLoaded', () => {
    // 页面首次加载，根据当前主题挂载评论
    createGiscus(getCurrentTheme());

    // 监听按钮点击切换主题 → 重载评论区
    const buttons = [
      document.querySelector('.toggleBtn'),
      document.getElementById('mobile-toggle-theme')
    ];
    buttons.forEach(btn => {
      if (!btn) return;
      btn.addEventListener('click', () => {
        setTimeout(() => {
          createGiscus(getCurrentTheme());
        }, 400); // 稍作延迟，确保 class 切换完毕
      });
    });

    // 监听 body class 改变（保险方案）
    const observer = new MutationObserver(() => {
      createGiscus(getCurrentTheme());
    });
    observer.observe(document.body, { attributes: true, attributeFilter: ['class'] });
  });
</script>

⚠️ 请将 data-repo-id 和 data-category-id 替换为你从 giscus.app 获取的值。

四、引入评论模块到文章模板

打开文件：themes/hexo-theme-Chic/layout/_page/post.ejs

找到代码底部，在 </article> 上方添加一行代码 <%- partial('_partial/livers') %> ：

1
2
3
4
5
6
7
8
9
10
11
12
13
        <section class="post-nav">
            <% if(post.prev){ %>
                <a class="prev" rel="prev" href="<%- url_for(post.prev.path)%>"><%- post.prev.title%></a>
            <% } %>
            <% if(post.next){ %>
            <a class="next" rel="next" href="<%- url_for(post.next.path)%>"><%- post.next.title%></a>
            <% } %>
        </section>

	<%- partial('_partial/livers') %>

    </article>
</div>

这会让评论区出现在每篇文章的底部。

五、重新部署博客

执行以下命令：

1
2
3
hexo clean
hexo g
hexo d

然后访问你的博客文章页面，应该就能看到 Giscus 评论框

成功效果

discussions

  • 支持 GitHub 登录评论
  • 评论存储在 Discussions 中，便于管理
  • 评论区支持明暗主题自动切换，与 Chic 博客风格一致

如有问题，可以：

  • 检查浏览器控制台是否有加载错误
  • 确保 repo-id 和 category-id 正确
  • 确保启用了 Discussions 功能

该项目代码基于 Hexo 和 hexo-theme-Chic 。