Astro 博客评论系统接入指南：Giscus vs Twikoo#

2.1 Giscus 简介#

Giscus 是一个基于 GitHub Discussions 的评论系统，特点：

• ✅ 免费，无需服务器
• ✅ 使用 GitHub 账号评论
• ✅ 与 GitHub 仓库集成
• ✅ 支持暗黑模式
• ✅ 部署简单

2.2 前置条件#

• 一个 GitHub 账号
• 博客所在的 GitHub 仓库开启 Discussions 功能
• 仓库地址：https://github.com/yuniow/my-blog

2.3 开启 GitHub Discussions#

step 1： 进入仓库 Settings

step 2： 找到 General → Features → Discussions，勾选 Enable

step 3： 点击 “Set up Discussions” 完成初始化

2.4 配置 Giscus#

step 1： 访问 https://giscus.app

step 2： 在 GitHub 上安装 giscus app 并授权

step 3： 填写仓库信息，配置页面和 discussion 的映射关系

step 4： 获取以下配置参数：

• data-repo
• data-repo-id
• data-category
• data-category-id

2.5 创建评论组件#

在项目中创建评论组件文件：

文件路径： src/components/Comment.astro

1
---
2
const pathname = decodeURIComponent(Astro.url.pathname || "");
3
const postName = pathname?.split("/").pop();
4
---
5

6
<section class="giscus" id="comments">
7
  <script src="https://giscus.app/client.js"
8
    data-repo="你的GitHub用户名/仓库名"
9
    data-repo-id="你的repo-id"
10
    data-category="General"
11
    data-category-id="你的category-id"
12
    data-mapping="og:title"
13
    data-strict="0"
14
    data-reactions-enabled="1"
15
    data-emit-metadata="0"
16
    data-input-position="top"
17
    data-theme="preferred_color_scheme"
18
    data-lang="zh-CN"
19
    data-loading="lazy"
20
    crossorigin="anonymous"
21
    async>
22
  </script>
23
</section>

2.6 在文章页面引入评论组件#

找到文章详情页面（通常是 src/pages/posts/[...slug].astro），在合适位置添加：

1
import Comment from "../../components/Comment.astro";
2

3
<Comment />

2.7 Giscus 配置参数说明#

3.1 Twikoo 简介#

Twikoo 是一个简洁、安全、免费的静态网站评论系统，特点：

• ✅ 免费部署在 Vercel
• ✅ 国内访问速度快
• ✅ 支持邮件通知
• ✅ 有管理后台

3.2 部署 Twikoo 后端#

step 1： fork Twikoo 仓库

https://github.com/twikoojs/twikoo

step 2： 登录 Vercel，导入 fork 的仓库

step 3： 点击 Deploy，Vercel 会自动部署

step 4： 部署完成后，Vercel 会提供一个域名，如：xxx.vercel.app

这就是你的 Twikoo 环境 ID！

3.3 博客配置 Twikoo#

臣妾的博客已经内置支持 Twikoo，只需修改配置：

文件路径： src/config.ts

1
export const commentConfig: CommentConfig = {
2
  enable: true, // 改为 true 启用评论
3
  twikoo: {
4
    envId: "你的Twikoo环境ID", // 例如: "https://xxx.vercel.app"
5
    lang: "zh-CN",
6
  },
7
};

3.4 Twikoo 配置参数说明#