493 字
1 分钟
Giscus评论系统的配置
日色欲尽花含烟，月明欲素愁不眠
Giscus 评论系统
“利用 GitHub Discussions 实现的评论系统，让访客借助 GitHub 在你的网站上留下评论和反应吧！”
“本项目深受 utterances 的启发!”
---摘自Giscus官网
⭐Mizuki评论系统配置
Twikoo 评论系统配置位于 src/config.ts 文件中的 commentConfig 对象，控制博客的评论系统显示设置。
export const commentConfig: CommentConfig = { enable: false, // 启用评论功能。当设置为 false 时，评论组件将不会显示在文章 //twikoo区域 giscus: { repo: "your-github-username/your-repo-name", repoId: "your-repo-id", category: "Announcements", categoryId: "your-category-id", mapping: "pathname", strict: "0", reactionsEnabled: "1", emitMetadata: "0", inputPosition: "top", theme: "preferred_color_scheme", lang: SITE_LANG, loading: "lazy",},🌟Giscus 配置
- 准备 GitHub 仓库:
- 创建一个公开的 GitHub 仓库（或使用已有的,如yuqi-giscus）。
- 进入仓库
Settings-General-下拉页面 ,勾选Features中的Discussions选项-点击set up discussions。 - 前往 https://github.com/apps/giscus 安装 Giscus App 到该仓库(可选择全部仓库安装或指定仓库yuami-giscus,点击
install按钮进行安装)。 - 获取配置参数:
- 访问 Giscus 官网配置页面。
- 在
配置-仓库栏中输入你的仓库路径（如 username/blog-comments）。 - 选择页面 ↔️ Discussions 映射方式（推荐 pathname）。
- 选择 Discussion 分类（推荐 Announcements）。
- 页面底部会自动生成一段配置代码，其中包含你需要的 repo、repoId、category、categoryId 等值。
- 可查看无需服务器！为任何页面对接评论区！还有反垃圾
- 配置博客 config.ts 文件:
- 打开 src/config.ts 文件。
- 找到 commentConfig 对象。
- 将 enable 设置为 true。
- 将 system 设置为 “giscus”。
- 将从 Giscus 官网获取的参数填入 giscus 配置块。 配置好的示例:
export const commentConfig: CommentConfig = { enable: true, // 启用评论功能。 system: "giscus", // 使用 Giscus 评论系统 twikoo: { envId: "https://twikoo.vercel.app", lang: SITE_LANG, }, giscus: { repo: "my-username/blog-comments", // 替换成你的 GitHub 仓库路径 repoId: "R_kgDOxxxxxxx", // 替换成你的仓库 ID category: "Announcements", // 替换成你的 Discussion 分类名 categoryId: "DIC_kwDOxxxxxxx", // 替换成你的分类 ID mapping: "pathname", strict: "0", reactionsEnabled: "1", emitMetadata: "0", inputPosition: "top", theme: "preferred_color_scheme", lang: SITE_LANG, loading: "lazy", },};- 启动并测试:
- 保存 config.ts 文件。
- 启动或重启你的博客项目。
- 访问一篇文章的页面，滚动到文章底部，你应该能看到 Giscus 评论区已经加载出来了。
- 使用 GitHub 账号登录后，尝试发表一条评论，检查是否能成功提交和显示。
- 评论管理:
- 进入你的yuqi-giscus进入你的 Discussion 分类，查看并管理评论。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时