feat: add giscus comment

Author: luckfunc

docs/.vitepress/theme/components/GiscusComment.vue

@@ -0,0 +1,27 @@
+<template>
+  <div style="margin-top: 24px">
+    <Giscus
+        :key="route.path"
+        :theme="isDark ? 'dark' : 'light'"
+        id="comments"
+        repo="luckfunc/blog"
+        repoid="R_kgDOIN2Meg"
+        category="General"
+        category-id="DIC_kwDOIrDrIs4ClpeT"
+        mapping="pathname"
+        term="Welcome to giscus!"
+        reactionsenabled="1"
+        emitmetadata="0"
+        inputposition="top"
+        loading="lazy"
+    />
+  </div>
+</template>
+
+<script setup>
+import Giscus from '@giscus/vue';
+import { useRoute, useData } from 'vitepress';
+
+const route = useRoute();
+const { isDark } = useData();
+</script>

docs/.vitepress/theme/index.ts

@@ -1,6 +1,14 @@
-import Theme from "vitepress/theme";
+import { h } from 'vue';
+import Theme from 'vitepress/theme';
+import GiscusComment from './components/GiscusComment.vue';
 import './style/custom.css';
 import './style/var.css'
+
 export default {
-  ...Theme
+  ...Theme,
+  Layout() {
+    return h(Theme.Layout, null, {
+      'doc-after': () => h(GiscusComment)
+    })
+  }
 }