feat(vitepress): 添加 giscus 评论 (#8)

docs/.vitepress/config.ts

@@ -56,6 +56,13 @@ export default defineConfig({
     visitor: {
       badgeId: 'maomao1996.vitepress-nav-template',
     },
+
+    comment: {
+      repo: 'maomao1996/vitepress-nav-template',
+      repoId: 'R_kgDOJC09Jg',
+      category: 'Announcements',
+      categoryId: 'DIC_kwDOJC09Js4Cekn0',
+    },
   },
 
   vite: {

docs/.vitepress/theme/components/MLayout.vue

@@ -2,12 +2,18 @@
 import { useData } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { nextTick, provide } from 'vue'
+import Giscus from '@giscus/vue'
+
+import { usePageId } from '../composables'
 
 import MNavVisitor from './MNavVisitor.vue'
 import MDocFooter from './MDocFooter.vue'
 
 const { Layout } = DefaultTheme
-const { isDark } = useData()
+const { isDark, theme, frontmatter } = useData()
+const pageId = usePageId()
+
+const { comment } = theme.value
 
 const enableTransitions = () =>
   'startViewTransition' in document &&
@@ -54,8 +60,40 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
     <template #nav-bar-title-after>
       <MNavVisitor />
     </template>
+
+    <template v-if="comment && frontmatter.comment !== false" #doc-footer-before>
+      <div class="doc-comments">
+        <Giscus
+          id="comments"
+          mapping="specific"
+          :term="pageId"
+          strict="1"
+          reactionsEnabled="1"
+          emitMetadata="0"
+          inputPosition="top"
+          :theme="isDark ? 'dark' : 'light'"
+          lang="zh-CN"
+          loading="lazy"
+          v-bind="{ ...comment }"
+        />
+      </div>
+    </template>
+
     <template #doc-after>
       <MDocFooter />
     </template>
   </Layout>
 </template>
+
+<style>
+.prev-next.prev-next {
+  border-top: none;
+}
+
+.doc-comments {
+  margin-top: 24px;
+  margin-bottom: 48px;
+  border-top: 1px solid var(--vp-c-divider);
+  padding-top: 24px;
+}
+</style>

env.d.ts

@@ -12,6 +12,21 @@ declare module 'vitepress' {
         /** 统计 id（单独页面的统计会作为前缀使用）*/
         badgeId: string
       }
+
+      /**
+       * giscus 评论配置
+       *  请根据 https://giscus.app/zh-CN 生成内容填写
+       */
+      comment?: {
+        /** github 仓库地址 */
+        repo: `${string}/${string}`
+        /** giscus 仓库 ID */
+        repoId: string
+        /** Discussion 分类 */
+        category: string
+        /** giscus 分类 ID */
+        categoryId: string
+      }
     }
   }
 }

package.json

@@ -25,6 +25,7 @@
     "@femm/prettier": "^1.1.0",
     "@femm/tailwind-config": "^1.0.0",
     "@femm/verify-commit": "^1.0.1",
+    "@giscus/vue": "^3.0.0",
     "@mdit-vue/shared": "^0.12.1",
     "@types/node": "^18.18.6",
     "autoprefixer": "^10.4.17",