前言

在博客中添加评论区，以便作者和读者及时交流互动，以下为你的Astro博客添加评论区功能

评论区插件

Giscus：是一个开源的评论系统，它允许开发者在网站上添加评论功能。Giscus 的特别之处在于，它是通过 GitHub Discussions 来存储和管理评论的。

Gitalk： 是一个基于 GitHub Issue 和 Preact 开发的评论插件。

本文选择使用Giscus

配置Giscu

前置要求如下图

1. 仓库的公开就不多说了
2. giscus app的安装
3. 启用Discussion功能

settings中找到github apps点进去即可看到giscus

设置开启评论对应的仓库 可选择所有

启用Discussion功能

4. 输入仓库，用title来做映射，它会作为discussion的标题，分类选择announcements

5. 启用以下feature特性：

• reaction
• 评论输入框在上方
• 懒加载效果太难看我就关闭了

同时选择主题

配置完毕后，会生成以下代码，具体要输入的地方是根据你自己生成的来填写（复制自己那个配置代码会直接生成子相关的）

<script src="https://giscus.app/client.js"
        data-repo="[在此输入仓库]"
        data-repo-id="[在此输入仓库 ID]"
        data-category="[在此输入分类名]"
        data-category-id="[在此输入分类 ID]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

此刻，你就可以使用带有.giscus的class选择器的容器，把生成的script复制到你要使用的页面，就能看到评论区出现在你的页面了

主题切换配置

由于本人的Astro博客网站支持切换黑暗/明亮主题的，所以我们这里需要安装了 @giscus/react。

在 Astro 中，还需要集成React。

执行以下命令：

npx astro add react
npm 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;

配置下主题的切换：

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

以上代码，我们初始化时，获取了 localStorage 和 系统的主题，来初始化评论主题。 然后通过 MutationObserver 来监听 document.documentElement 上的 data-theme 的值，来进行主题切换。

在 Astro 中使用评论组件

---
import Comments from "@components/Comment";
---
<!-- 使用 client:only 指令 -->
<Comments client:only="react" />

✨效果如图：