【add】comment

docusaurus.config.js

@@ -136,9 +136,6 @@ const config = {
               {
                 html: `<a href="https://docusaurus.io/zh-CN/" target="_blank" rel="noreferrer noopener"><img style="height:50px;margin-top:0.5rem" src="https://www.docusaurus.cn/img/docusaurus_keytar.png" /><a/>`,
               },
-              {
-                html: `<a href="https://docusaurus.io/zh-CN/" target="_blank" rel="noreferrer noopener"><img style="height:50px;margin-top:0.5rem" src="https://waline.js.org/logo.png"/><a/>`,
-              },
             ],
           },
         ],

package.json

@@ -17,6 +17,7 @@
     "@docusaurus/core": "2.4.0",
     "@docusaurus/preset-classic": "2.4.0",
     "@docusaurus/theme-search-algolia": "^2.4.1",
+    "@giscus/react": "^2.3.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
     "dayjs": "^1.11.9",
@@ -40,4 +41,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/components/Comment.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Giscus from "@giscus/react";
+
+export default function Comment() {
+  return (
+    <div>
+      <Giscus
+        id="comments"
+        repo="lkzwc/fe-ddu"
+        repoId="R_kgDOHUkdvQ"
+        category="Announcements"
+        categoryId="DIC_kwDOHUkdvc4CYeiv"
+        mapping="title"
+        term="Welcome to @giscus/react component!"
+        reactionsEnabled="1"
+        emitMetadata="0"
+        inputPosition="top"
+        theme="preferred_color_scheme"
+        lang="zh-CN"
+        loading="lazy"
+      />
+    </div>
+  );
+}

src/theme/BlogPostItem.tsx

@@ -1,28 +1,22 @@
 // import BlogPostItem from "@theme-original/BlogPostItem";
 import React from "react";
 import clsx from "clsx";
-// import {useBlogPost} from '@docusaurus/theme-common/internal';
 import BlogPostItemContainer from "@theme/BlogPostItem/Container";
 import BlogPostItemHeader from "@theme/BlogPostItem/Header";
 import BlogPostItemContent from "@theme/BlogPostItem/Content";
 import BlogPostItemFooter from "@theme/BlogPostItem/Footer";
 import type { Props } from "@theme/BlogPostItem";
+import Comment from "../components/Comment";
 
 export default function BlogPostItem(props): JSX.Element {
-  // const {
-  //   children: {
-  //     type: { metadata },
-  //   },
-  // } = props;
-  // console.log("propos", props);
-
   const { children } = props;
 
   return (
     <>
       <BlogPostItemHeader />
       <BlogPostItemContent>{children}</BlogPostItemContent>
       <BlogPostItemFooter />
+      <Comment />
     </>
   );
 }