feat: add giscus

.vitepress/config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vitepress'
-import vuetify from 'vite-plugin-vuetify'
+import { defineConfig } from "vitepress";
+import vuetify from "vite-plugin-vuetify";
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -8,14 +8,30 @@ export default defineConfig({
   vite: {
     plugins: [vuetify({ autoImport: true })],
     ssr: {
-      noExternal: ['vuetify'],
+      noExternal: ["vuetify"],
     },
   },
-  base: '/vitepress-material3/',
+  base: "/vitepress-material3/",
   markdown: {
     headers: {
       level: [2, 3],
-    }
+    },
   },
   appearance: false,
-})
+  themeConfig: {
+    giscus: {
+      host: "https://giscus.app",
+      repo: "zivenyang/vitepress-material3",
+      repoId: "R_kgDOKOGqfQ",
+      category: "General",
+      categoryId: "DIC_kwDOKOGqfc4CZER1",
+      mapping: "pathname",
+      strict: "0",
+      reactionsEnabled: "1",
+      emitMetadata: "0",
+      inputPosition: "top",
+      lang: "zh-CN",
+      loading: "lazy",
+    },
+  },
+});

.vitepress/theme/components/PostContentContainer.vue

@@ -8,11 +8,19 @@
                 <Content />
             </v-col>
         </v-row>
+        <v-row no-gutters class="fill-height align-middle">
+            <v-col>
+                <v-card variant="outlined" rounded="xl">
+                <PostGiscus></PostGiscus>
+            </v-card>
+            </v-col>
+        </v-row>
     </v-container>
 </template>
 <script setup lang="ts">
 import { useData } from 'vitepress'
 import PostToc from '../components/PostToc.vue';
+import PostGiscus from './PostGiscus.vue';
 import { ref } from 'vue'
 const data = useData();
 const active = ref(0);
@@ -22,4 +30,7 @@ const active = ref(0);
     min-width: 900px;
     max-width: fit-content;
 }
+.v-card--variant-elevated{
+    background-color: unset;
+}
 </style>

.vitepress/theme/components/PostGiscus.vue

@@ -0,0 +1,13 @@
+<template>
+    <v-card :key="page.relativePath" class="giscus-card pa-4">
+        <Giscus v-bind="theme.giscus" theme="light" />
+    </v-card>
+</template>
+
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { BlogThemeConfig } from '../types/config'
+import Giscus from '@giscus/vue'
+const { page, theme } = useData<BlogThemeConfig>()
+
+</script>