Hexo-Theme-Butterfly 添加 Beaudar 评论插件指南

背景介绍

Beaudar 是一款基于 GitHub Issues 的轻量级评论系统，它是 Utterances 的中文版本。对于使用 Hexo-Theme-Butterfly 主题的博客用户来说，若想替换默认的评论系统为 Beaudar，需要进行一些简单的配置修改。

实现步骤

1. 理解 Beaudar 与 Utterances 的关系

Beaudar 实际上是 Utterances 的中文分支版本，两者在功能实现上基本一致，只是语言和部分细节有所区别。因此，在 Hexo-Theme-Butterfly 主题中，可以通过修改 Utterances 的相关文件来实现 Beaudar 的集成。

2. 定位修改文件

需要修改的核心文件位于主题目录下的：

themes/butterfly/layout/includes/third-party/comments/utterances.pug

3. 具体修改内容

在该文件中，主要需要调整的是 JavaScript 的引入地址，将原本指向 Utterances 的 CDN 地址替换为 Beaudar 的对应地址。具体修改示例如下：

script(src='https://beaudar.lipk.org/client.js' 
       repo='YOUR_REPO'
       issue-term='pathname'
       theme='github-light'
       crossorigin='anonymous'
       async)

4. 配置参数说明

• repo: 必须设置为你的 GitHub 仓库，格式为 "用户名/仓库名"
• issue-term: 定义如何关联 issues，常用值有 'pathname', 'url', 'title' 等
• theme: 可设置评论框的主题样式，如 'github-light', 'github-dark' 等
• crossorigin: 设置为 'anonymous' 以确保跨域安全
• async: 异步加载脚本

注意事项

1. 修改前建议备份原文件，以便出现问题时可以快速恢复
2. 确保你的 GitHub 仓库已启用 Issues 功能
3. 需要在 GitHub 上安装 Beaudar 应用并授权对应仓库的访问权限
4. 修改后建议清除 Hexo 缓存并重新生成静态文件

效果验证

完成上述修改后，重新部署博客，在文章页面应该可以看到 Beaudar 评论框正常显示。如果遇到问题，可以检查浏览器控制台是否有 JavaScript 错误，并确认 GitHub 仓库配置是否正确。

通过这种简单的修改方式，Hexo-Theme-Butterfly 用户就可以轻松地将评论系统从 Gitalk 或其他系统迁移到 Beaudar，获得更好的中文评论体验。