在Docusaurus博客中使用giscus评论区

Giscus是一个基于github discussion的无后端评论区，恰好今天学会了自定义docusaurus组件，拿它试一下吧！

配置giscus

请到这里完成官方给定的配置.由于docusaurus基于React，我们不需要手动注入js脚本，而是和此处一样用React组件。

自定义docusaurus组件

docusaurus提供了swizzle功能，可以基于此自定义组件。我们需要自定义BlogPostItem/Content组件。

yarn swizzle @docusaurus/theme-classic BlogPostItem/Content --eject

然后在/src/theme/BlogPostItem/Content/index.tsx你可以找到一个可编辑的组件文件，把它改成这样：

import React from "react";
import clsx from "clsx";
import { blogPostContainerID } from "@docusaurus/utils-common";
import { useBlogPost } from "@docusaurus/theme-common/internal";
import MDXContent from "@theme/MDXContent";
import {useColorMode} from '@docusaurus/theme-common'；
import Giscus from "@giscus/react";

export default function BlogPostItemContent({ children, className }) {
  const { isBlogPostPage } = useBlogPost();
  const isDarkTheme = useColorMode().colorMode === "dark";
  return !isBlogPostPage ? (
    <div
      // This ID is used for the feed generation to locate the main content
      id={isBlogPostPage ? blogPostContainerID : undefined}
      className={clsx("markdown", className)}
      itemProp="articleBody"
    >
      <MDXContent>{children}</MDXContent>
    </div>
  ) : (
    <div
      // This ID is used for the feed generation to locate the main content
      id={isBlogPostPage ? blogPostContainerID : undefined}
      className={clsx("markdown", className)}
      itemProp="articleBody"
    >
      <MDXContent>{children}</MDXContent>
      <Giscus(此处记得改成你自己的Giscus React组件！！！)/>
    </div>
  );
}