评论系统

Hey，同学！想让读者在你的博客文章下面留言互动吗？这一篇介绍 iFluxArt 集成的评论系统～ 💬

🤔 为什么选择 Giscus？

🏗️ 工作原理

读者访问文章
       ↓
页面加载 Giscus 组件
       ↓
Giscus 调用 GitHub API
       ↓
获取该文章的 Discussions
       ↓
展示评论列表

核心逻辑：

• 每篇文章对应 GitHub 上的一个 Discussion
• 评论就是 Discussion 的 Comments
• 数据存在你的 GitHub 仓库中！

⚙️ 配置步骤

步骤 1：启用 GitHub Discussions

1. 进入你的 GitHub 仓库
2. Settings → Features → 勾选 Discussions

步骤 2：安装 Giscus App

1. 打开 giscus.app
2. 点击「Connect Repository」
3. 选择你的博客源码仓库
4. 授权安装

步骤 3：获取配置信息

在 Giscus 页面会得到类似这样的配置：

giscus.app/xxxxx?repo=yourname/yourrepo
             &repoId=xxxxx
             &category=Announcements
             &categoryId=xxxxx
             &mapping=pathname

步骤 4：配置环境变量

# .env.local
NEXT_PUBLIC_GISCUS_REPO=yourname/yourrepo
NEXT_PUBLIC_GISCUS_REPO_ID=xxxxx
NEXT_PUBLIC_GISCUS_CATEGORY=Announcements
NEXT_PUBLIC_GISCUS_CATEGORY_ID=xxxxx

🎨 主题配置

Giscus 支持多种主题，自动跟随网站：

在 apps/blog/src/components/comments/giscus-comments.tsx 中：

<GiscusComponent
  repo="yourname/yourrepo"
  repoId="xxxxx"
  category="Announcements"
  categoryId="xxxxx"
  mapping="pathname"
  theme={isDark ? 'dark' : 'light'}
/>

🔧 自定义选项

评论排序

// 最新在前
strictNewMapping: true

// 最旧在前
strictOldMapping: true

加载时机

默认在页面加载时加载评论，也可以设置为「点击加载」：

lazy: true

语言设置

默认是英文，可以设置中文：

lang: 'zh-CN'

📊 管理功能

在 GitHub 管理

所有评论都在 GitHub Discussions 中，可以：

• 删除评论
• 标记为答案
• 关闭 Discussion
• 迁移评论

审核（待实现）

未来会支持：

• 关键词过滤
• 登录要求
• 评论审核

💡 最佳实践

1. 选对分类

在 Giscus 设置中，建议：

• 新建一个「博客评论」分类
• 设为公开
• 启用「Q&A」功能（可以标记答案）

2. 配置欢迎语

在 GitHub Discussions 设置中，可以设置自动欢迎：

欢迎留言！请遵守社区规则，友善交流～

3. 定期回复

读者留言后，尽量及时回复：

• 鼓励更多互动
• 积累社区活跃度

🔗 与 Docs 的关系

Docs 文档站点也使用 Giscus！

Blog → Giscus → GitHub Discussions
Docs → Giscus → GitHub Discussions

可以共用一个 Discussion 分类，也可以分开。

❓ 常见问题

Q: 读者没有 GitHub 账号？

解决：Giscus 只支持 GitHub 登录。如果需要更多登录方式，可以考虑其他评论系统（如 Disqus、 utteranc.es）。

Q: 评论加载很慢？

解决：

• 检查 GitHub API 访问是否稳定
• 考虑开启「懒加载」

Q: 想迁移评论？

解决：Giscus 数据在 GitHub 中，导出相对简单。导入到其他系统可能需要写脚本。

🔗 下一步

• RSS 订阅 —— 让读者订阅更新
• SEO 优化 —— 吸引更多访客
• 媒体管理 —— 管理文章图片