skip to content
Logo Faust

astro添加评论功能

/ 3 min read

前几天用astro搭建好了本博客,感觉缺点什么,想起来是没有评论功能,遂有了本文。评论插件用的是giscus,是用GitHub Discussions存储的,也不会丢失,随便选一个仓库就行了。

配置giscus

首先,对你的仓库有一些前置要求:

giscus.app 创建配置。

输入仓库名称,然后选择用做映射,它会作为discussion的标题。

分类选择 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了。

效果图: