前几天用astro搭建好了本博客,感觉缺点什么,想起来是没有评论功能,遂有了本文。评论插件用的是giscus,是用GitHub Discussions存储的,也不会丢失,随便选一个仓库就行了。
配置giscus
首先,对你的仓库有一些前置要求:
-
必须是 公开的 GitHub 仓库
-
安装了 giscus app
-
在仓库中 启用 Discussions 功能
在 giscus.app 创建配置。
输入仓库名称,然后选择用

分类选择 announcements。
启用以下特性:
-
reaction
-
评论输入框在上方
-
懒加载
主题暂时选择dark,下面再讲主题的配置。
配置好后会得到一段代码
<script src="https://giscus.app/client.js"
data-repo="faust6312/astroblog"
data-repo-id="R_kgDONnB1Tadawadadadg"
data-category="Announcements"
data-category-id="DIC_kwDONnB1Ts4Cldawdada1Oz"
data-mapping="title"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="top"
data-theme="dark"
data-lang="en"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>
配置主题亮暗切换
由于博客网站是可以切换黑暗/明亮主题的,所以我们这里安装了 @giscus/react。
在 Astro 中,还需要安装 React 集成。
先把仓库克隆下来:

然后执行:
pnpm install
npx astro add react
pnpm i @giscus/react
创建Comment.tsx
import * as React from 'react';
import Giscus from '@giscus/react';
const id = 'inject-comments';
const Comments = () => {
const [mounted, setMounted] = React.useState(false);
React.useEffect(() => {
setMounted(true);
}, []);
return (
<div id={id} className="w-full">
{mounted ? (
<Giscus
id={id}
repo="username/repo"
repoId="R_kgDOKeudTw"
category="Announcements"
categoryId="DIC_kwDOKeudT84Cch4W"
mapping="title"
reactionsEnabled="1"
emitMetadata="0"
inputPosition="top"
lang="zh-CN"
loading="lazy"
theme="dark"
/>
) : null}
</div>
);
};
export default Comments;
路径在—>src/components/Comment.tsx
配置主题切换
import * as React from 'react'
import Giscus from '@giscus/react'
const id = 'inject-comments'
// 获取 localStorage 中 theme 的值
function getSavedTheme() {
return window.localStorage.getItem('theme')
}
// 获取系统主题
function getSystemTheme() {
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
}
const Comments = () => {
const [mounted, setMounted] = React.useState(false)
const [theme, setTheme] = React.useState('light')
React.useEffect(() => {
const theme = getSavedTheme() || getSystemTheme()
setTheme(theme)
// 监听主题变化
const observer = new MutationObserver(() => {
setTheme(getSavedTheme())
})
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-theme'],
})
// 取消监听
return () => {
observer.disconnect()
}
}, [])
React.useEffect(() => {
setMounted(true)
}, [])
return (
<div id={id} className="w-full">
{mounted ? (
<Giscus
id={id}
repo="username/repo"
repoId="R_kgDOKeudTw"
category="Announcements"
categoryId="DIC_kwDOKeudT84Cch4W"
mapping="title"
reactionsEnabled="1"
emitMetadata="0"
inputPosition="top"
lang="zh-CN"
loading="lazy"
theme={theme}
/>
) : null}
</div>
)
}
export default Comments
导入组件
---
import Comments from "@components/Comment";
---
<!-- 使用 client:only 指令 -->
<Comments client:only="react" />
路径为—>src/layouts/BlogPost.astro
然后把配置好的文件,直接push到仓库,重新部署一下就OK了。
效果图:
