feat: add comments

Author: guangzhengli

.vitepress/theme/index.ts

@@ -1,15 +1,11 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
 import Theme from 'vitepress/theme'
+import MyLayout from './layout/MyLayout.vue'
 import './style.css'
 
 export default {
   extends: Theme,
-  Layout: () => {
-    return h(Theme.Layout, null, {
-      // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    })
-  },
+  Layout: MyLayout,
   enhanceApp({ app, router, siteData }) {
     // ...
   }

.vitepress/theme/layout/Comments.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { watchEffect } from 'vue'
+
+const { title, isDark } = useData()
+let darkTheme = isDark.value ? 'dark' : 'light'
+
+watchEffect(() => {
+  darkTheme = isDark.value ? 'dark' : 'light'
+})
+
+</script>
+
+<template>
+  <div class="layout-comments">
+    <component
+      :is="'script'"
+      :key="title"
+      src="https://giscus.app/client.js"
+      data-repo="guangzhengli/k8s-tutorials"
+      data-repo-id="R_kgDOHS_wpg"
+      data-category="General"
+      data-category-id="DIC_kwDOHS_wps4CRGNY"
+      data-mapping="pathname"
+      data-strict="0"
+      data-reactions-enabled="1"
+      data-emit-metadata="0"
+      data-input-position="bottom"
+      :data-theme="darkTheme"
+      data-lang="en"
+      data-loading="lazy"
+      crossorigin="anonymous"
+      async
+    />
+  </div>
+</template>

.vitepress/theme/layout/MyLayout.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import DefaultTheme from 'vitepress/theme'
+import Comments from './Comments.vue'
+
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+  <Layout>
+    <template #doc-after>
+      <Comments />
+    </template>
+  </Layout>
+</template>

.vitepress/theme/style.css

@@ -89,3 +89,7 @@
   --docsearch-primary-color: var(--vp-c-brand) !important;
 }
 
+.layout-comments {
+  margin-top: 2rem;
+}
+