为Hexo博客melody主题添加Giscus评论系统

2025-12-06| 技术|字数总计: 2.2k|阅读时长: 7 分钟

前言

Giscus是一个基于利用 GitHub Discussions 实现的评论系统，让访客可以借助 GitHub 在你的网站上留下评论和反应。这个评论系统具有开源、免费、无跟踪、无广告、可自定义主题、支持Markdown语法，并且可以在发表前进行预览等特点，是一个非常好用的评论系统。
我的博客原来使用的是主题提供的Disqus评论系统，但在实际使用过程中存在着以下不便：

这个系统对国内的用户是无法访问的，因此想要评论就得使用一些手段（虽然没人看我的博客，更别提评论了🙃）。
即使能访问了，你想评论还得注册一个Disqus的账号，麻烦。

总之，Giscus能完美的解决以上的痛点，因此我决定为我的博客加上Giscus评论系统。但是博客使用的Melody主题的最新版本没有集成Giscus评论系统，并且最后更新时间停留在了2022年，因此在不更换博客主题的基础上需要自己动手。本篇文章就是在这个想法的基础上对主题进行适当的修改，同时为以后的自定义修改主题打下基础。如果你使用的是其他不支持Giscus评论的主题，可以参考本文章思路，对你的主题进行修改，希望对你有用！

具体思路

创建新的Giscus仓库
生成Giscus配置信息
将Giscus添加到博客主题中
应用主题并查看Giscus效果

创建新的Giscus仓库

访问Giscus的官网，根据指引，创建一个公开仓库（Repository），名称随意，我的这个仓库名称是giscus。然后保持默认选项，点击创建仓库（Creat repository）。

注意：仓库的属性必须是Public，这里我已经创建好了仓库，所以提示名称已存在。
然后安装Giscus APP 至你的仓库中,点击右边的Configure按钮，进入安装页面，然后在Only select repositories选项中，选择你刚才创建的giscus仓库，然后点击保存。
让Discussions 功能已在你的仓库中启用。在仓库的设置（Settings）页面里将Discussions选项打上勾。

在你的giscus仓库内新建一个.giscus.yml的文件，在文件内添加如下内容后点击保存：

# .giscus.yml 文件

# The origins authorized to load giscus must be listed here.
origins:
# 添加您的生产域名，例如：
- https://yourdomain.com  \\你自己博客的域名 
- http://localhost:4000     \\你本地调试的地址
- http://0.0.0.0:4000

# Optionally, you can use originsRegex instead of origins to use     regular expressions.
# originsRegex:
#   - https://.*\.your-production-domain\.com

这个文件的作用是方便你在本地进行调试预览Giscus评论的效果。添加完成后，进行下一步，生成Giscus配置信息。

生成Giscus配置信息

在Giscus的配置页面里分别填入仓库连接，在检查没有问题后在进行页面映射的关系、discussion分类、特性、主题等配置：
按照指引配置Giscus
然后会生成以下JS内容：

<script src="https://giscus.app/client.js"
        data-repo="[在此输入仓库]"
        data-repo-id="[在此输入仓库 ID]"
        data-category="[在此输入分类名]"
        data-category-id="[在此输入分类 ID]"
        data-mapping="url"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

至此，Giscus的相关配置工作完成。

将Giscus添加到博客主题中

基于前言中说到的情况，Hexo的Melody主题是通过npm发布并安装的，除非作者更新主题，否则要将Giscus集成到Hexo主题中有以下两个方案：

方案一：自己创建一个主题仓库，在现在的主题进行上传，并在此基础上进行修改。
方案二：在Hexo网站根目录下创建Script文件夹，根据Hexo的文档说明将Giscus的配置文件作为一个JS文件进行处理。

这里我考虑了以下，为了方便以后进行其他方面的修改，决定使用方案一。其具体步骤操作如下：

创建一个新的公开仓库，名称自定义，我命名为了hexo-theme-melody。
复制现在使用的主题文件，Melody主题保存在Hexo目录下node_modules文件夹中，找到hexo-theme-melody文件夹，复制一份放到其他位置。
进入复制的hexo-theme-melody文件夹中，删除.git文件夹（没有的可以跳过这个步骤）。

打开git软件，进入到主题文件夹hexo-theme-melody中，使用如下命令：

git init  \\初始化仓库
git branch -M master  \\将仓库主分支命名为master
git remote add origin [email protected]:yourname/your-repository.git  \\将远程仓库与本地文件夹关联起来
git commit -m "Initial commit of custom melody theme" \\提交commit信息
git push - u origin master \\将本地文件推送至远程仓库

注意：

这里我使用的GitHub的SSH链接，也可以使用HTTPS连接。

git push的操作可以在修改完成后再进行操作。

找到主题目录中的layout\includes\comments文件夹，新建一个giscus.pug的文件，文件内容就是前面提到的Giscus配置js里的内容，将具体的内容变成可以修改数值的项：

if theme.giscus && theme.giscus.enable

 script(
   src="https://giscus.app/client.js"
   data-repo=theme.giscus.repo
   data-repo-id=theme.giscus.repo_id
   data-category=theme.giscus.category
   data-category-id=theme.giscus.category_id
   data-mapping=theme.giscus.mapping
   data-strict=theme.giscus.strict
   data-reactions-enabled=theme.giscus.reactions_enabled
   data-emit-metadata=theme.giscus.emit_metadata
   data-input-position=theme.giscus.input_position
   data-theme=theme.giscus.theme
   data-lang=theme.giscus.lang
   data-loading=theme.giscus.loading
   crossorigin="anonymous"
   async
 )

打开layout\includes\comments文件夹中的index.pug，在文件中末尾添加一行代码：
1
2
3
else if theme.giscus && theme.giscus.enable
include ./giscus.pug
如果是第一个判断条件，就用if，在后面就用else if，我这里直接在源文件后面加的。

找到并打开你主题文件夹下的config.yml文件，在文件中添加以下内容：

#giscus comment system. https://giscus.app
#根据页面上给出的参数逐一填写
giscus:
  enable: false     # 设置true开启
  repo: ""          # 使用giscus的仓库名称
  repo_id: ""       # 您的 Repo ID
  category: ""      # 您的讨论分类名称
  category_id: ""   # 您的 Category ID
  mapping: ""       # giscus评论映射路径
  strict: ""
  reactions_enabled: ""
  emit_metadata: ""
  input_position: ""
  theme: ""          #giscus主题
  lang: ""
  loading: ""

注意：配置文件里的项可以灵活修改，如果你觉得填的太多，只想填个别的项，其他写死，那么你可以只留下如repo、repo_id、category等你觉得必需要填的项，其他不需要填的项可以删除（如theme）。但是相应的，你在giscus.pug里相应项的数值就要写死（如`data-theme=“preferred_color_scheme”）。

将修改后的主题git push到你的远程仓库中。

至此，主题的修改工作已完成，现在进行主题的应用。

应用主题并查看Giscus效果

如果你是第一次安装这个主题，请参照主题的原文档进行安装，当然，这是官方的主题，没有Giscus，假如你要使用你自己修改后的主题，请进行如下操作：

安装官方版本主题（如果你已经安装了该主题，可以跳过此步骤）

找到Hexo目录下的package.json文件并进行修改如下内容：

1 2	"hexo-theme-melody": "git+https://github.com/your-username/your-repository.git#master" \\指定你主题的安装链接。

删除node_modules文件夹和package-lock.json文件并重新加载依赖。
1
2
3
4
rm -rf node_modules/
rm package-lock.json
npm install
将主题文件夹hexo-theme-melody内的config.yml复制到你的Hexo的根目录下，重命名为_config.melody.yml并修改配置。（如果你已经安装过博客，有这个文件，那么就把config.yml里关于Giscus的那些项复制到已存在的_config.melody.yml就行，填写好对应的数值，不用重新配置整个文件。
使用以下命令本地测试Giscus加载是否成功。
1
2
3
4
hexo clean \\清除缓存
hexo g
hexo s -p 4000 \\启动hexo本地服务，端口4000
重要：端口一定要和前面的.giscus.yml文件里的localhost的端口对应上，否则Giscus是不会加载出来的。

最后我们在本地看一下效果，输入localhost:4000进入你的一篇文章，加载成功！🎉🎉🎉

查看测试效果

测试没有问题后，你就可以部署博客到正式环境中，开始享受美妙的评论交互之旅了！