diff --git a/docs/.vitepress/theme/components/MLayout.vue b/docs/.vitepress/theme/components/MLayout.vue
index 52fc1104b..8074122ce 100644
--- a/docs/.vitepress/theme/components/MLayout.vue
+++ b/docs/.vitepress/theme/components/MLayout.vue
@@ -2,6 +2,9 @@
 import { useData } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import { nextTick, provide } from 'vue'
+import Giscus from '@giscus/vue'
+
+import { useFormatPath } from '../composables'
 
 import MNavVisitor from './MNavVisitor.vue'
 import MDocFooter from './MDocFooter.vue'
@@ -9,6 +12,7 @@ import MAsideSponsors from './MAsideSponsors.vue'
 
 const { Layout } = DefaultTheme
 const { isDark } = useData()
+const formatPath = useFormatPath()
 
 const enableTransitions = () =>
   'startViewTransition' in document &&
@@ -55,6 +59,26 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
     <template #nav-bar-title-after>
       <MNavVisitor />
     </template>
+    <template #doc-footer-before>
+      <div class="doc-comments">
+        <Giscus
+          id="comments"
+          repo="maomao1996/mm-notes"
+          repoId="MDEwOlJlcG9zaXRvcnkxNTc0ODc5Mjg="
+          category="Announcements"
+          categoryId="DIC_kwDOCWMTOM4CZ2rf"
+          mapping="specific"
+          :term="formatPath"
+          strict="1"
+          reactionsEnabled="1"
+          emitMetadata="0"
+          inputPosition="top"
+          :theme="isDark ? 'dark' : 'light'"
+          lang="zh-CN"
+          loading="lazy"
+        />
+      </div>
+    </template>
     <template #doc-after>
       <MDocFooter />
     </template>
@@ -63,3 +87,16 @@ provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
     </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>
diff --git a/package.json b/package.json
index fbbf0091a..8db9ee010 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
   "devDependencies": {
     "@femm/prettier": "^1.1.0",
     "@femm/verify-commit": "^1.0.1",
+    "@giscus/vue": "^2.3.0",
     "@mdit-vue/shared": "^0.12.1",
     "@octokit/rest": "^19.0.13",
     "@types/fs-extra": "^11.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f5a815ca3..fa9cccf29 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,9 @@ devDependencies:
   '@femm/verify-commit':
     specifier: ^1.0.1
     version: 1.0.1
+  '@giscus/vue':
+    specifier: ^2.3.0
+    version: 2.3.0(vue@3.3.4)
   '@mdit-vue/shared':
     specifier: ^0.12.1
     version: 0.12.1
@@ -466,10 +469,29 @@ packages:
       terminal-link: 3.0.0
     dev: true
 
+  /@giscus/vue@2.3.0(vue@3.3.4):
+    resolution: {integrity: sha512-ZZ1ZRqRwoHEfYpepSozU4HKjvCQ/4PjVt6P391/c0F4ly1i57OUup2h6Pd+l7dUnh9j7fbqUp6CfFk5+99S3Jw==}
+    peerDependencies:
+      vue: '>=3.2.0'
+    dependencies:
+      giscus: 1.3.0
+      vue: 3.3.4
+    dev: true
+
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
     dev: true
 
+  /@lit-labs/ssr-dom-shim@1.1.1:
+    resolution: {integrity: sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==}
+    dev: true
+
+  /@lit/reactive-element@1.6.3:
+    resolution: {integrity: sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.1
+    dev: true
+
   /@mdit-vue/shared@0.12.1:
     resolution: {integrity: sha512-bXgd0KThe4jC2leCFDFsyrudXIckvTwV4WnQK/rRMrXq0/BAuVdSNdIv1LGCWZxD5+oDyPyEPd0lalTIFwqsmg==}
     dependencies:
@@ -638,6 +660,10 @@ packages:
     resolution: {integrity: sha512-2yrWpBk32tvV/JAd3HNHWuZn/VDN1P+72hWirHnvsvTGSqbANi+kSeuQR9yAHnbvaBvHDsoTdXV0Fe+iRtHLKA==}
     dev: true
 
+  /@types/trusted-types@2.0.4:
+    resolution: {integrity: sha512-IDaobHimLQhjwsQ/NMwRVfa/yL7L/wriQPMhw1ZJall0KX6E1oxk29XMDeilW5qTIg5aoiqf5Udy8U/51aNoQQ==}
+    dev: true
+
   /@types/web-bluetooth@0.0.17:
     resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==}
     dev: true
@@ -1058,6 +1084,12 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /giscus@1.3.0:
+    resolution: {integrity: sha512-A3tVLgSmpnh2sX9uGjo9MbzmTTEJirSyFUPRvkipvy37y9rhxUYDoh9kO37QVrP7Sc7QuJ+gihB6apkO0yDyTw==}
+    dependencies:
+      lit: 2.8.0
+    dev: true
+
   /glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -1192,6 +1224,28 @@ packages:
       wrap-ansi: 8.1.0
     dev: true
 
+  /lit-element@3.3.3:
+    resolution: {integrity: sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.1
+      '@lit/reactive-element': 1.6.3
+      lit-html: 2.8.0
+    dev: true
+
+  /lit-html@2.8.0:
+    resolution: {integrity: sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==}
+    dependencies:
+      '@types/trusted-types': 2.0.4
+    dev: true
+
+  /lit@2.8.0:
+    resolution: {integrity: sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==}
+    dependencies:
+      '@lit/reactive-element': 1.6.3
+      lit-element: 3.3.3
+      lit-html: 2.8.0
+    dev: true
+
   /log-update@5.0.1:
     resolution: {integrity: sha512-5UtUDQ/6edw4ofyljDNcOVJQ4c7OjDro4h3y8e1GQL5iYElYclVHJ3zeWchylvMaKnDbDilC8irOVyexnA/Slw==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}