为Docusaurus中的Blog启用评论功能
最近想在Docusaurus中启用评论功能, 但是官方并没有提供这个功能, 所以只能自己动手了.
目前的解决方案是通过Giscus来实现, 它是一个基于Github的Discussions的评论系统实现的.
Discussions需要依赖Github账号来进行评论, 所以后续需要一个公共的仓库来存放评论数据.
如果你的博客是私有项目, 可以考虑创建一个新的公共的仓库用于存放评论数据, 这样可以确保原来的项目还可以为私有的.
以下内容会假设你拥有Github相关知识
配置Giscus
进入Giscus官网浏览文档, 然后根据文档中的要求进行配置.
主要有以下几个步骤:
- 准备一个公共的仓库
该仓库主要用于存放评论数据, 如果你的博客是私有项目可以考虑创建一个公共的仓库用于存放评论数据 - 为公共的仓库启用
Github Discussions, 参考Enabling or disabling GitHub Discussions for a repository - 安装giscus-github-app并配置可以访问哪些仓库,
安装页面完成后可以在应用页面中可以找到
Configure按钮, 点击该按钮进入配置页面
以上是大致的配置步骤, 还有一些细节可以在刚才的官网页面中查看具体的配置说明. 例如:
Docusaurus博客的评论到Discussion中的映射关系
验证配置
这些配置做好之后, 你需要对你的配置进行验证, 以确保你的配置是正确的.
giscus页面下的Repository提供了一个可以验证你的repo
获取参数
为了后续在Docusaurus中启用评论功能, 还需要获取一些参数, 这些参数后续会在Docusaurus中使用.
giscus页面下的Enable giscus会根据你的配置生成一段代码, 该代码包含了你需要的参数.
它看起来像这样:
<script
src="https://giscus.app/client.js"
data-repo="[ENTER REPO HERE]"
data-repo-id="[ENTER REPO ID HERE]"
data-category="[ENTER CATEGORY NAME HERE]"
data-category-id="[ENTER CATEGORY ID HERE]"
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="en"
crossorigin="anonymous"
async
></script>安装Giscus
Giscus组件是一个React组件, 用于在Docusaurus中启用评论功能.
我们需要在项目中安装Giscus组件
npm install --save @giscus/react组件扩展
Docusaurus中提供了Swizzling功能, 可以对Docusaurus
中的组件进行扩展并增加新的功能.
BlogPostItem是Docusaurus中用于展示博客文章的组件, 该组件位于@theme-original/BlogPostItem中.
为了给在Docusaurus中启用评论功能, 需要对BlogPostItem进行扩展.
执行swizzle命令创建BlogPostItem组件
npm run swizzle @docusaurus/theme-classic BlogPostItem -- --wrap该命令执行完成后src/theme/BlogPostItem/index.js文件会被创建
接下来对该文件进行编辑
注意: 该文件中的
Giscus组件的xxx参数需要根据你的配置进行修改, 配置的参数在上一节中已经介绍过了
import React from "react";
import BlogPostItem from "@theme-original/BlogPostItem";
import Giscus from "@giscus/react";
import { useBlogPost } from "@docusaurus/theme-common/internal";
import { useColorMode } from "@docusaurus/theme-common";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
export default function BlogPostItemWrapper(props) {
const {
i18n: { defaultLocale, localeConfigs },
} = useDocusaurusContext();
const { colorMode } = useColorMode();
const { metadata, isBlogPostPage } = useBlogPost();
return (
<>
<BlogPostItem {...props} />
{isBlogPostPage && (
<Giscus
repo="xxx"
repoId="xxx"
category="xxx"
categoryId="xxx"
mapping="xxx"
strict="xxx"
reactionsEnabled="xxx"
emitMetadata="xxx"
inputPosition="xxx"
theme={colorMode}
lang={defaultLocale}
crossorigin="anonymous"
term="Welcome to @giscus/react component!"
loading="lazy"
async
/>
)}
</>
);
}最终效果
最终效果如下图所示:
