pagefind_dcd{"url":"/posts/how-to-integrate-giscus-comments/","content":"如何将 Giscus 评论集成到 AstroPaper Updated: 12 Mar, 2025 | Edit page 在像 GitHub Pages 这样的平台上托管轻量级静态博客有很多优点，但也会削弱一些互动性。幸运的是，Giscus 的出现提供了一种在静态网站上嵌入用户评论的方式。 目录. Giscus 的工作原理. Giscus 使用 GitHub API 来读取和存储 GitHub 用户在仓库关联的 Discussions 中发表的评论。 在你的网站上嵌入 Giscus 客户端脚本包，配置正确的仓库 URL，用户就可以在登录 GitHub 后查看和撰写评论。 这种方法是无服务器的，因为评论存储在 GitHub 上，并在客户端从那里动态加载，因此非常适合像 AstroPaper 这样的静态博客。 设置 Giscus. Giscus 可以很容易地在 giscus.app 上设置，但我还是会简要概述一下过程。 前提条件. 让 Giscus 工作的前提条件包括： 仓库是公开的. 已安装 Giscus 应用. 已为你的仓库开启 Discussions 功能. 如果由于任何原因无法满足这些条件，很遗憾，Giscus 无法集成。 配置 Giscus. 接下来，需要配置 Giscus。在大多数情况下，预设的默认值已经适用，只有在你特定原因且知道自己在做什么时才应修改它们。不必过于担心做错选择；你以后随时可以调整配置。 不过，你需要： 选择正确的 UI 语言. 指定要连接的 GitHub 仓库，通常是你在 GitHub Pages 上托管静态 AstroPaper 博客的仓库. 如果你想确保没有人能在 GitHub 上直接创建随机评论，则创建一个 Announcement 类型的讨论并设置. 定义颜色方案. 配置设置后，Giscus 会为你提供一个生成的 只需将其添加到网站的源代码中。如果你使用 AstroPaper 并希望在文章中启用评论，请导航到 PostDetails.astro，将其粘贴到你希望评论出现的位置，比如在”分享此文章到：“按钮下方。 src/layouts/PostDetails.astro 大功告成！你已成功在 AstroPaper 中集成了评论功能！ 支持浅色/深色主题的 React 组件. 布局中嵌入的脚本标签是相当静态的，Giscus 配置（包括 theme）被硬编码在布局中。鉴于 AstroPaper 具有浅色/深色主题切换功能，让评论能够无缝地在浅色和深色主题之间切换将是很好的。为了实现这一点，我们需要一种更复杂的方法来嵌入 Giscus。 首先，我们将安装 Giscus 的 React 组件： npm i @giscus/react && npx astro add react 然后，在 src/components 中创建一个新的 Comments.tsx React 组件： import Giscus, { type Theme } from \"@giscus/react\"; import { GISCUS } from \"@/constants\"; import { useEffect, useState } from \"react\"; interface CommentsProps { lightTheme?: Theme; darkTheme?: Theme; } export default function Comments({ lightTheme = \"light\", darkTheme = \"dark\", }: CommentsProps) { const [theme, setTheme] = useState(() => { const currentTheme = localStorage.getItem(\"theme\"); const browserTheme = window.matchMedia(\"(prefers-color-scheme: dark)\") .matches ? \"dark\" : \"light\"; return currentTheme || browserTheme; }); useEffect(() => { const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\"); const handleChange = ({ matches }: MediaQueryListEvent) => { setTheme(matches ? \"dark\" : \"light\"); }; mediaQuery.addEventListener(\"change\", handleChange); return () => mediaQuery.removeEventListener(\"change\", handleChange); }, []); useEffect(() => { const themeButton = document.querySelector(\"#theme-btn\"); const handleClick = () => { setTheme(prevTheme => (prevTheme === \"dark\" ? \"light\" : \"dark\")); }; themeButton?.addEventListener(\"click\", handleClick); return () => themeButton?.removeEventListener(\"click\", handleClick); }, []); return (
); }src/components/Comments.tsx 这个 React 组件不仅包装了原生的 Giscus 组件，还引入了额外的 props，即 lightTheme 和 darkTheme。利用两个事件监听器，Giscus 评论将与网站主题保持一致，在网站或浏览器主题更改时动态切换深色和浅色主题。 我们还需要定义 GISCUS 配置，最佳位置是在 constants.ts 中： import type { GiscusProps } from \"@giscus/react\"; ... export const GISCUS: GiscusProps = { repo: \"[在此输入仓库地址]\", repoId: \"[在此输入仓库 ID]\", category: \"[在此输入分类名称]\", categoryId: \"[在此输入分类 ID]\", mapping: \"pathname\", reactionsEnabled: \"0\", emitMetadata: \"0\", inputPosition: \"bottom\", lang: \"en\", loading: \"lazy\", };src/constants.ts 注意，在这里指定 theme 将覆盖 lightTheme 和 darkTheme props，导致主题设置变为静态，类似于之前用