feat: add giscus

package.json

@@ -8,6 +8,7 @@
     "preview": "vite preview --port 3333"
   },
   "dependencies": {
+    "@giscus/vue": "^3.0.0",
     "@vueuse/core": "^9.3.0",
     "vue": "^3.2.37",
     "vue-router": "^4.1.3"

src/components/ArticleWrapper.vue

@@ -1,5 +1,7 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
+import Giscus from '@giscus/vue';
+
 const { frontmatter } = defineProps<{
     frontmatter: {
         coverImage?: string,
@@ -10,9 +12,19 @@ const { frontmatter } = defineProps<{
 }>();
 
 useHead({
-    title: frontmatter.title
+    title: frontmatter.title,
+    meta: [
+        {
+            property: 'og:title',
+            content: frontmatter.title,
+        }
+    ]
 })
 
+const isDark = useDark()
+
+const discusTheme = isDark.value ? 'dark' : 'light';
+
 </script>
 
 <template>
@@ -22,6 +34,9 @@ useHead({
         <div class="mt-2 italic">{{ (frontmatter.tags || []).map(x => `#${x}`).join(' ') }}</div>
     </div>
     <slot></slot>
+    <Giscus id="comments" repo="ChenKS12138/ChenKS12138.github.io" repoId="MDEwOlJlcG9zaXRvcnkyNzA4Njc3ODM="
+        category="Announcements" categoryId="DIC_kwDOECUdR84Cd10_" mapping="og:title" reactionsEnabled="1" emitMetadata="0"
+        inputPosition="bottom" :theme="discusTheme" lang="zh-CN" loading="lazy" />
     <!-- <div class="rounded bg-gray mt-10 p-1 text-white italic indent-md text-lg">
         CC BY-SA 3.0协议 。转载请注明出处!
     </div> -->