内建评论系统

learn/.vitepress/theme/giscus.ts

@@ -0,0 +1,35 @@
+import { defineComponent, h } from "vue";
+
+import { useData, useRoute } from "vitepress";
+import Giscus from "@giscus/vue";
+
+export default defineComponent({
+  setup() {
+    const route = useRoute();
+    const { isDark } = useData();
+
+    return () =>
+      h(
+        "div",
+        {
+          style: {
+            marginTop: "20px",
+          },
+        },
+        h(Giscus, {
+          repo: "learnzig/learnzig",
+          repoId: "R_kgDOKRsb5Q",
+          category: "Comments",
+          categoryId: "DIC_kwDOKRsb5c4Cbx2i",
+          mapping: "url",
+          strict: "1",
+          reactionsEnabled: "1",
+          emitMetadata: "0",
+          inputPosition: "top",
+          theme: isDark.value ? "dark" : "light",
+          lang: "zh-CN",
+          term: route.path,
+        }),
+      );
+  },
+});

learn/.vitepress/theme/index.ts

@@ -1,53 +1,28 @@
 // .vitepress/theme/index.js
 import DefaultTheme from "vitepress/theme";
 
-import giscusTalk from "vitepress-plugin-comment-with-giscus";
-
-import codeblocksFold from "vitepress-plugin-codeblocks-fold";
-import "vitepress-plugin-codeblocks-fold/style/index.scss";
-
 import "viewerjs/dist/viewer.min.css";
 import imageViewer from "./ImgViewer";
 
-import { useData, useRoute } from "vitepress";
+import giscus from "./giscus";
+
+import { useRoute } from "vitepress";
+import { h } from "vue";
 
 export default {
   ...DefaultTheme,
-  enhanceApp(ctx) {
+  enhanceApp(ctx: any) {
     DefaultTheme.enhanceApp(ctx);
   },
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      "doc-after": () => h(giscus),
+    });
+  },
   setup() {
-    // Get frontmatter and route
-    const { frontmatter } = useData();
     const route = useRoute();
 
-    // code fold support
-    codeblocksFold({ route, frontmatter }, true, 400);
-
     // imageView
     imageViewer(route);
-
-    // Obtain configuration from: https://giscus.app/
-    giscusTalk(
-      {
-        repo: "learnzig/learnzig",
-        repoId: "R_kgDOKRsb5Q",
-        category: "Comments", // default: `General`
-        categoryId: "DIC_kwDOKRsb5c4Cbx2i",
-        mapping: "pathname", // default: `pathname`
-        inputPosition: "top", // default: `top`
-        lang: "zh-CN", // default: `zh-CN`
-        strict: "1",
-        reactionsEnabled: "1",
-        // theme:"dark",
-        lightTheme: "light",
-        darkTheme: "dark",
-      },
-      {
-        frontmatter,
-        route,
-      },
-      true,
-    );
   },
 };

package.json

@@ -11,9 +11,7 @@
     "vitepress": "^1.0.0-rc.11"
   },
   "dependencies": {
-    "sass": "^1.69.5",
-    "viewerjs": "^1.11.6",
-    "vitepress-plugin-codeblocks-fold": "^1.2.28",
-    "vitepress-plugin-comment-with-giscus": "^1.1.11"
+    "@giscus/vue": "^2.3.0",
+    "viewerjs": "^1.11.6"
   }
 }