diff --git a/docs/package.json b/docs/package.json
index 4abfccdf..ffec19d6 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -18,7 +18,7 @@
     "katex": "^0.16.9",
     "leancloud-storage": "^4.15.2",
     "sass": "^1.69.5",
-    "sass-loader": "^13.3.2",
+    "sass-loader": "^13.3.3",
     "vue": "^3.3.13",
     "vuepress-theme-plume": "workspace:*"
   }
diff --git a/package.json b/package.json
index c2fb19cf..bdf2e021 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "commitizen": "^4.3.0",
     "concurrently": "^8.2.2",
     "conventional-changelog-cli": "^4.1.0",
-    "cpx2": "^6.0.1",
+    "cpx2": "^7.0.0",
     "cross-env": "^7.0.3",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.56.0",
@@ -67,7 +67,7 @@
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
     "minimist": "^1.2.8",
-    "ora": "^8.0.0",
+    "ora": "^8.0.1",
     "pnpm": "^8.12.1",
     "prettier": "^3.1.1",
     "prettier-config-vuepress": "^4.4.0",
diff --git a/plugins/plugin-netlify-functions/package.json b/plugins/plugin-netlify-functions/package.json
index 87182815..9ecfc7f5 100644
--- a/plugins/plugin-netlify-functions/package.json
+++ b/plugins/plugin-netlify-functions/package.json
@@ -44,7 +44,7 @@
     "@vuepress/utils": "2.0.0-rc.0",
     "chalk": "^5.3.0",
     "chokidar": "^3.5.3",
-    "cpx2": "^6.0.1",
+    "cpx2": "^7.0.0",
     "dotenv": "^16.3.1",
     "esbuild": "^0.19.10",
     "execa": "^8.0.1",
diff --git a/plugins/plugin-shikiji/package.json b/plugins/plugin-shikiji/package.json
index 7a046c11..6aa888ab 100644
--- a/plugins/plugin-shikiji/package.json
+++ b/plugins/plugin-shikiji/package.json
@@ -33,8 +33,8 @@
     "@vuepress/utils": "2.0.0-rc.0",
     "nanoid": "^5.0.4",
     "picocolors": "^1.0.0",
-    "shikiji": "^0.9.11",
-    "shikiji-transformers": "^0.9.11"
+    "shikiji": "^0.9.12",
+    "shikiji-transformers": "^0.9.12"
   },
   "publishConfig": {
     "access": "public"
diff --git a/plugins/plugin-windicss/package.json b/plugins/plugin-windicss/package.json
index 0c8913eb..2ae4fea1 100644
--- a/plugins/plugin-windicss/package.json
+++ b/plugins/plugin-windicss/package.json
@@ -33,7 +33,7 @@
     "@vuepress/core": "2.0.0-rc.0",
     "@vuepress/shared": "2.0.0-rc.0",
     "@vuepress/utils": "2.0.0-rc.0",
-    "vite-plugin-windicss": "^1.9.2",
+    "vite-plugin-windicss": "^1.9.3",
     "windicss": "^3.5.6",
     "windicss-webpack-plugin": "^1.8.0"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4dad767f..aae95179 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,8 +39,8 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0
       cpx2:
-        specifier: ^6.0.1
-        version: 6.0.1
+        specifier: ^7.0.0
+        version: 7.0.0
       cross-env:
         specifier: ^7.0.3
         version: 7.0.3
@@ -72,8 +72,8 @@ importers:
         specifier: ^1.2.8
         version: 1.2.8
       ora:
-        specifier: ^8.0.0
-        version: 8.0.0
+        specifier: ^8.0.1
+        version: 8.0.1
       pnpm:
         specifier: ^8.12.1
         version: 8.12.1
@@ -132,8 +132,8 @@ importers:
         specifier: ^1.69.5
         version: 1.69.5
       sass-loader:
-        specifier: ^13.3.2
-        version: 13.3.2(sass@1.69.5)
+        specifier: ^13.3.3
+        version: 13.3.3(sass@1.69.5)
       vue:
         specifier: ^3.3.13
         version: 3.3.13(typescript@5.3.3)
@@ -294,8 +294,8 @@ importers:
         specifier: ^3.5.3
         version: 3.5.3
       cpx2:
-        specifier: ^6.0.1
-        version: 6.0.1
+        specifier: ^7.0.0
+        version: 7.0.0
       dotenv:
         specifier: ^16.3.1
         version: 16.3.1
@@ -388,11 +388,11 @@ importers:
         specifier: ^1.0.0
         version: 1.0.0
       shikiji:
-        specifier: ^0.9.11
-        version: 0.9.11
+        specifier: ^0.9.12
+        version: 0.9.12
       shikiji-transformers:
-        specifier: ^0.9.11
-        version: 0.9.11
+        specifier: ^0.9.12
+        version: 0.9.12
 
   plugins/plugin-windicss:
     dependencies:
@@ -409,8 +409,8 @@ importers:
         specifier: 2.0.0-rc.0
         version: 2.0.0-rc.0
       vite-plugin-windicss:
-        specifier: ^1.9.2
-        version: 1.9.2(vite@5.0.10)
+        specifier: ^1.9.3
+        version: 1.9.3(vite@5.0.10)
       windicss:
         specifier: ^3.5.6
         version: 3.5.6
@@ -5067,6 +5067,16 @@ packages:
       - supports-color
     dev: false
 
+  /@windicss/config@1.9.3:
+    resolution: {integrity: sha512-u8GUjsfC9r5X1AGYhzb1lX3zZj8wqk6SH1DYex8XUGmZ1M2UpvnUPOFi63XFViduspQ6l2xTX84QtG+lUzhEoQ==}
+    dependencies:
+      debug: 4.3.4(supports-color@9.2.2)
+      jiti: 1.20.0
+      windicss: 3.5.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@windicss/plugin-utils@1.9.2:
     resolution: {integrity: sha512-P019ZVYJSBVzMBhYSzcMIWpMjZZWEynF4s7oXgP9+5msH4/Ek55erFXY6r+e3sysBFohnIr3hosQ5dp9FMG16Q==}
     dependencies:
@@ -5081,6 +5091,20 @@ packages:
       - supports-color
     dev: false
 
+  /@windicss/plugin-utils@1.9.3:
+    resolution: {integrity: sha512-3VG5HEGeuIfG/9iTwLyzWWm/aGKNTbtSVkpkAabdRuDP/2lEmf6Hpo4uo5drwE+2O9gXfc6nSYgAwBjotx5CfQ==}
+    dependencies:
+      '@antfu/utils': 0.7.6
+      '@windicss/config': 1.9.3
+      debug: 4.3.4(supports-color@9.2.2)
+      fast-glob: 3.3.2
+      magic-string: 0.30.5
+      micromatch: 4.0.5
+      windicss: 3.5.6
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /@xhmikosr/archive-type@6.0.1:
     resolution: {integrity: sha512-PB3NeJL8xARZt52yDBupK0dNPn8uIVQDe15qNehUpoeeLWCZyAOam4vGXnoZGz2N9D1VXtjievJuCsXam2TmbQ==}
     engines: {node: ^14.14.0 || >=16.0.0}
@@ -6372,14 +6396,9 @@ packages:
     dependencies:
       string-width: 4.2.3
 
-  /cli-spinners@2.9.0:
-    resolution: {integrity: sha512-4/aL9X3Wh0yiMQlE+eeRhWP6vclO3QRtw1JHKIT0FFUs5FjpFmESqtMvYZ0+lbzBw900b95mS0hohy+qn2VK/g==}
-    engines: {node: '>=6'}
-
   /cli-spinners@2.9.2:
     resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
     engines: {node: '>=6'}
-    dev: true
 
   /cli-truncate@3.1.0:
     resolution: {integrity: sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==}
@@ -7177,12 +7196,12 @@ packages:
       p-event: 4.2.0
     dev: false
 
-  /cpx2@6.0.1:
-    resolution: {integrity: sha512-yzeVueRl+HtxHYmaDnnFdpXkAocqtPD9STTh61m4GpX4B6+oFB/ClsoJLXwjj9lguA0Ry2EpLvWIpRJ/x0bWbw==}
-    engines: {node: '>=16'}
+  /cpx2@7.0.0:
+    resolution: {integrity: sha512-ehw/Dh16sw4JHQIHJg0JHZIGz5hxUORv9mbeYRgCmiEn9mTpWLb4tPxkzKU5Y7jHtk7/qugL6SiHNHnzGU4piQ==}
+    engines: {node: '>=20', npm: '>=10'}
     hasBin: true
     dependencies:
-      debounce: 1.2.1
+      debounce: 2.0.0
       debug: 4.3.4(supports-color@9.2.2)
       duplexer: 0.1.2
       fs-extra: 11.1.1
@@ -7191,7 +7210,7 @@ packages:
       ignore: 5.2.4
       minimatch: 9.0.3
       p-map: 6.0.0
-      resolve: 1.22.2
+      resolve: 1.22.8
       safe-buffer: 5.2.1
       shell-quote: 1.8.1
       subarg: 1.0.0
@@ -7405,8 +7424,9 @@ packages:
     resolution: {integrity: sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==}
     dev: false
 
-  /debounce@1.2.1:
-    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
+  /debounce@2.0.0:
+    resolution: {integrity: sha512-xRetU6gL1VJbs85Mc4FoEGSjQxzpdxRyFhe3lmWFyy2EzydIcD4xzUvRJMD+NPDfMwKNhxa3PvsIOU32luIWeA==}
+    engines: {node: '>=18'}
 
   /debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
@@ -9120,7 +9140,7 @@ packages:
     engines: {node: '>=14'}
     dependencies:
       cross-spawn: 7.0.3
-      signal-exit: 4.0.1
+      signal-exit: 4.1.0
 
   /form-data-encoder@2.1.4:
     resolution: {integrity: sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==}
@@ -9523,7 +9543,7 @@ packages:
     dev: false
 
   /glob2base@0.0.12:
-    resolution: {integrity: sha512-ZyqlgowMbfj2NPjxaZZ/EtsXlOch28FRXgMd64vqZWk1bT9+wvSRLYD1om9M7QfQru51zJPAT17qXm4/zd+9QA==}
+    resolution: {integrity: sha1-nUGbPijxLoOjYhZKJ3BVkiycDVY=}
     engines: {node: '>= 0.10'}
     dependencies:
       find-index: 0.1.1
@@ -10481,6 +10501,7 @@ packages:
     resolution: {integrity: sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==}
     dependencies:
       has: 1.0.3
+    dev: true
 
   /is-core-module@2.13.0:
     resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==}
@@ -12548,7 +12569,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       hosted-git-info: 4.1.0
-      is-core-module: 2.12.1
+      is-core-module: 2.13.1
       semver: 7.5.4
       validate-npm-package-license: 3.0.4
 
@@ -12880,7 +12901,7 @@ packages:
       bl: 4.1.0
       chalk: 4.1.2
       cli-cursor: 3.1.0
-      cli-spinners: 2.9.0
+      cli-spinners: 2.9.2
       is-interactive: 1.0.0
       is-unicode-supported: 0.1.0
       log-symbols: 4.1.0
@@ -12894,7 +12915,7 @@ packages:
     dependencies:
       chalk: 5.3.0
       cli-cursor: 4.0.0
-      cli-spinners: 2.9.0
+      cli-spinners: 2.9.2
       is-interactive: 2.0.0
       is-unicode-supported: 1.3.0
       log-symbols: 5.1.0
@@ -12909,7 +12930,7 @@ packages:
     dependencies:
       chalk: 5.3.0
       cli-cursor: 4.0.0
-      cli-spinners: 2.9.0
+      cli-spinners: 2.9.2
       is-interactive: 2.0.0
       is-unicode-supported: 1.3.0
       log-symbols: 5.1.0
@@ -12918,8 +12939,8 @@ packages:
       strip-ansi: 7.1.0
     dev: false
 
-  /ora@8.0.0:
-    resolution: {integrity: sha512-RUI+M9AFI9f0h+iPBxBIok+tWHSQYiMpp+NCdEOPFWrSGxl+IIJ4iCiXetSEoiP0AnNv1EcER6l/7t4mfkZjew==}
+  /ora@8.0.1:
+    resolution: {integrity: sha512-ANIvzobt1rls2BDny5fWZ3ZVKyD6nscLvfFRpQgfWsythlcsVUC9kL0zq6j2Z5z9wwp1kd7wpsD/T9qNPVLCaQ==}
     engines: {node: '>=18'}
     dependencies:
       chalk: 5.3.0
@@ -12928,7 +12949,7 @@ packages:
       is-interactive: 2.0.0
       is-unicode-supported: 2.0.0
       log-symbols: 6.0.0
-      stdin-discarder: 0.2.0
+      stdin-discarder: 0.2.1
       string-width: 7.0.0
       strip-ansi: 7.1.0
     dev: true
@@ -14207,6 +14228,7 @@ packages:
       is-core-module: 2.12.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
+    dev: true
 
   /resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
@@ -14392,8 +14414,8 @@ packages:
   /safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  /sass-loader@13.3.2(sass@1.69.5):
-    resolution: {integrity: sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==}
+  /sass-loader@13.3.3(sass@1.69.5):
+    resolution: {integrity: sha512-mt5YN2F1MOZr3d/wBRcZxeFgwgkH44wVc2zohO2YF6JiOMkiXe4BYRZpSu2sO1g71mo/j16txzUhsKZlqjVGzA==}
     engines: {node: '>= 14.15.0'}
     peerDependencies:
       fibers: '>= 3.1.0'
@@ -14629,20 +14651,20 @@ packages:
   /shell-quote@1.8.1:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
 
-  /shikiji-core@0.9.11:
-    resolution: {integrity: sha512-KbZdB+0oyoyNiQT0ueXCigp/0ilu1sMvb2aD3gDIDkaQwfayet0f1/9kkh0Wvtk42KMASDR36qA8ctnTQvpocA==}
+  /shikiji-core@0.9.12:
+    resolution: {integrity: sha512-AYsAtsbZuq0FPT3mdskNMa+yxD5VwXrFC2sH7R2ELmncVGNYvSzR6Zlfq8iEzINq7/kKL5prtt81UFzFWTTbxQ==}
     dev: false
 
-  /shikiji-transformers@0.9.11:
-    resolution: {integrity: sha512-ndEyaMIlILU/skg1zDXiHvTBNsBdTkNxLwSJ/fQEDyGiVn1KceRHaxxCFlslK7zBjCup1M0jWhgxWLij8+o+Lg==}
+  /shikiji-transformers@0.9.12:
+    resolution: {integrity: sha512-ge+47j4MLTbKAnTnhTTolD9DKGW2Fhp80MV7Tb2E+p4HsJixu4slq2SDV/eFR34iH/egtyi/cjGMD8vJbNLBUA==}
     dependencies:
-      shikiji: 0.9.11
+      shikiji: 0.9.12
     dev: false
 
-  /shikiji@0.9.11:
-    resolution: {integrity: sha512-3lZxXOPdhUr42fDTWmWiSrWTbbrRR3YY70F24G+hwh3VmN33ocKdH8RpytyhBhYvSRpiPhHDwGl2C5ozlO6Xow==}
+  /shikiji@0.9.12:
+    resolution: {integrity: sha512-jYbulSGcPKYKu2uFZOSg4lgrF7s9s8/ITFzRvczE6633wypMjnnTcRnG/mCFe6v1Dbov7bRCMsXVINBUD2FV9w==}
     dependencies:
-      shikiji-core: 0.9.11
+      shikiji-core: 0.9.12
     dev: false
 
   /shimmer@1.2.1:
@@ -14659,10 +14681,6 @@ packages:
   /signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
-  /signal-exit@4.0.1:
-    resolution: {integrity: sha512-uUWsN4aOxJAS8KOuf3QMyFtgm1pkb6I+KRZbRF/ghdf5T7sM+B1lLLzPDxswUjkmHyxQAVzEgG35E3NzDM9GVw==}
-    engines: {node: '>=14'}
-
   /signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -15032,8 +15050,8 @@ packages:
       bl: 5.1.0
     dev: false
 
-  /stdin-discarder@0.2.0:
-    resolution: {integrity: sha512-ZWOBlQfhYyLvTDu8BneHv0UZA2FhNEIyiwrzMjWahPNzdCeLsfN0ScqTZoAXFeUEmx/X/sHd7SW3x7WBV+f51A==}
+  /stdin-discarder@0.2.1:
+    resolution: {integrity: sha512-wRXvkxiYhOAduH+LFL/Qpim5zIWKYH1yEGvU0W8PgmabrZZ29iC1LKS8i443SYct12oZmQH7nyEonKiV8RTIsg==}
     engines: {node: '>=18'}
     dev: true
 
@@ -16257,12 +16275,12 @@ packages:
     engines: {node: '>= 0.8'}
     dev: false
 
-  /vite-plugin-windicss@1.9.2(vite@5.0.10):
-    resolution: {integrity: sha512-QRWOFgdsbj00DNHm8vM51gbSQeuyXC73uGtp//cMHMeMstFD83fbX7x6MmpjC04dijWMxyAuD90sUD0Q/pjnnQ==}
+  /vite-plugin-windicss@1.9.3(vite@5.0.10):
+    resolution: {integrity: sha512-PqNiIsrEftCrgn0xIpj8ZMSdpz8NZn+OJ3gKXnOF+hFzbHFrKGJA49ViOUKCHDOquxoGBZMmTjepWr8GrftKcQ==}
     peerDependencies:
       vite: ^2.0.1 || ^3.0.0 || ^4.0.0 || ^5.0.0
     dependencies:
-      '@windicss/plugin-utils': 1.9.2
+      '@windicss/plugin-utils': 1.9.3
       debug: 4.3.4(supports-color@9.2.2)
       kolorist: 1.8.0
       vite: 5.0.10(@types/node@20.9.1)(sass@1.69.5)
diff --git a/theme/src/client/components/Blog.vue b/theme/src/client/components/Blog.vue
index 7432ed94..455b19ae 100644
--- a/theme/src/client/components/Blog.vue
+++ b/theme/src/client/components/Blog.vue
@@ -3,6 +3,7 @@ import { usePageData } from '@vuepress/client'
 import type { PlumeThemePageData } from '../../shared/index.js'
 import Archives from './Archives.vue'
 import BlogAside from './BlogAside.vue'
+import BlogExtract from './BlogExtract.vue'
 import PostList from './PostList.vue'
 import Tags from './Tags.vue'
 
@@ -15,6 +16,7 @@ const page = usePageData<PlumeThemePageData>()
     <Tags v-if="page.type === 'blog-tags'" />
     <Archives v-if="page.type === 'blog-archives'" />
     <BlogAside />
+    <BlogExtract />
   </div>
 </template>
 
diff --git a/theme/src/client/components/BlogExtract.vue b/theme/src/client/components/BlogExtract.vue
new file mode 100644
index 00000000..ec352316
--- /dev/null
+++ b/theme/src/client/components/BlogExtract.vue
@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useBlogExtract, useThemeLocaleData } from '../composables/index.js'
+import AutoLink from './AutoLink.vue'
+import IconArchive from './icons/IconArchive.vue'
+import IconBlogExt from './icons/IconBlogExt.vue'
+import IconTag from './icons/IconTag.vue'
+
+
+const theme = useThemeLocaleData()
+const route = useRoute()
+
+const avatar = computed(() => theme.value.avatar)
+const { hasBlogExtract, tags, archives } = useBlogExtract()
+const open = ref(false)
+
+watch(() => route.path, () => {
+  open.value = false
+})
+
+const showBlogExtract = computed(() => {
+  return avatar.value || hasBlogExtract.value
+})
+</script>
+<template>
+  <div v-if="showBlogExtract" class="blog-extract" @click="open = !open">
+    <IconBlogExt class="icon" />
+  </div>
+  <div v-if="showBlogExtract" class="blog-modal" :class="{ open }" @click.self="open = false">
+    <div class="blog-modal-container">
+      <div v-if="avatar" class="avatar-profile">
+        <p v-if="avatar.url" class="avatar">
+          <img :src="avatar.url" :alt="avatar.name" />
+        </p>
+        <div>
+          <h3>{{ avatar.name }}</h3>
+          <p class="desc">{{ avatar.description }}</p>
+        </div>
+      </div>
+      <div v-if="hasBlogExtract" class="blog-nav">
+        <AutoLink class="nav-link" :href="tags.link">
+          <IconTag class="icon" />
+          <span>{{ tags.text }}</span>
+        </AutoLink>
+        <AutoLink class="nav-link" :href="archives.link">
+          <IconArchive class="icon" />
+          <span>{{ archives.text }}</span>
+        </AutoLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.blog-extract {
+  display: block;
+  position: fixed;
+  right: 0;
+  bottom: 30%;
+  padding: 4px 10px;
+  border-top-left-radius: 99px;
+  border-bottom-left-radius: 99px;
+  border: solid 1px var(--vp-c-divider);
+  border-right: none;
+  box-shadow: var(--vp-shadow-2);
+  z-index: calc(var(--vp-z-index-nav) - 1);
+  background-color: var(--vp-c-bg);
+}
+
+.blog-extract .icon {
+  font-size: 16px;
+  color: var(--vp-c-text-2);
+}
+
+@media (min-width: 768px) {
+  .blog-extract {
+    display: none;
+  }
+}
+
+.blog-modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--vp-z-index-sidebar);
+  width: 100%;
+  opacity: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  transform: translateY(100%);
+  transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.blog-modal.open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+  transition: opacity 0.25s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.blog-modal-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  padding: 24px;
+  background-color: var(--vp-c-bg);
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+}
+
+.avatar-profile {
+  display: flex;
+  align-items: center;
+}
+
+.avatar-profile .avatar {
+  width: 64px;
+  margin-right: 16px;
+}
+
+.avatar-profile h3 {
+  font-weight: 600;
+}
+
+.avatar-profile .desc {
+  font-size: 14px;
+}
+
+.blog-nav {
+  padding: 10px 0 0;
+  margin: 24px 0 0;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-top: solid 1px var(--vp-c-divider);
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  padding: 3px;
+  color: var(--vp-c-brand-1);
+  font-weight: 600;
+  border-radius: 8px;
+  transition: all var(--t-color);
+}
+
+.nav-link .icon {
+  margin-right: 4px;
+  width: 1em;
+  height: 1em;
+}
+</style>
diff --git a/theme/src/client/components/Page.vue b/theme/src/client/components/Page.vue
index e057046a..9246b8c3 100644
--- a/theme/src/client/components/Page.vue
+++ b/theme/src/client/components/Page.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { usePageData } from '@vuepress/client'
+import { computed } from 'vue'
 import type { PlumeThemePageData } from '../../shared/index.js'
 import { useDarkMode, useSidebar } from '../composables/index.js'
 import PageAside from './PageAside.vue'
@@ -9,6 +10,9 @@ import PageMeta from './PageMeta.vue'
 const { hasSidebar, hasAside } = useSidebar()
 const isDark = useDarkMode()
 const page = usePageData<PlumeThemePageData>()
+const hasComments = computed(() => {
+  return page.value.frontmatter.comments !== false
+})
 </script>
 <template>
   <div
@@ -34,7 +38,7 @@ const page = usePageData<PlumeThemePageData>()
             <PageMeta />
             <Content class="plume-content" />
             <PageFooter />
-            <PageComment :darkmode="isDark" />
+            <PageComment v-if="hasComments" :darkmode="isDark" />
           </main>
         </div>
       </div>
@@ -52,9 +56,9 @@ const page = usePageData<PlumeThemePageData>()
   width: 100%;
 }
 
-.plume-page.is-blog {
+/* .plume-page.is-blog {
   padding-top: calc(var(--vp-nav-height) + 32px);
-}
+} */
 
 @media (min-width: 768px) {
   .plume-page {
diff --git a/theme/src/client/components/PostList.vue b/theme/src/client/components/PostList.vue
index 509d424d..8cf78293 100644
--- a/theme/src/client/components/PostList.vue
+++ b/theme/src/client/components/PostList.vue
@@ -17,11 +17,11 @@ const {
   <div class="post-list">
     <PostItem v-for="post in postList" :key="post.path" :post="post" />
     <div v-if="isPaginationEnabled" class="pagination">
-      <button type="button" class="btn prev" :disabled="isFirstPage" @click="changePage(-1)">
+      <button type="button" class="btn prev" :disabled="isFirstPage" @click="() => changePage(-1)">
         {{ pagination?.prevPageText || 'Prev' }}
       </button>
       <span class="page-info">{{ page }} / {{ totalPage }}</span>
-      <button type="button" class="btn next" :disabled="isLastPage" @click="changePage(1)">
+      <button type="button" class="btn next" :disabled="isLastPage" @click="() => changePage(1)">
         {{ pagination?.nextPageText || 'Next' }}
       </button>
     </div>
diff --git a/theme/src/client/components/Sidebar.vue b/theme/src/client/components/Sidebar.vue
index 7d0acad5..ca6f6396 100644
--- a/theme/src/client/components/Sidebar.vue
+++ b/theme/src/client/components/Sidebar.vue
@@ -16,7 +16,7 @@ const navEl = ref<HTMLElement | null>(null)
 const isLocked = useScrollLock(inBrowser ? document.body : null)
 
 watch(
-  [props, navEl],
+  [() => props.open, navEl],
   () => {
     if (props.open) {
       isLocked.value = true
diff --git a/theme/src/client/components/icons/IconBlogExt.vue b/theme/src/client/components/icons/IconBlogExt.vue
new file mode 100644
index 00000000..f1ef3b94
--- /dev/null
+++ b/theme/src/client/components/icons/IconBlogExt.vue
@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M22 3H5a2 2 0 0 0-2 2v4h2V5h17v14H5v-4H3v4a2 2 0 0 0 2 2h17a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2M7 15v-2H0v-2h7V9l4 3zm13-2h-7v-2h7zm0-4h-7V7h7zm-3 8h-4v-2h4z"/></svg>
+</template>
diff --git a/theme/src/client/composables/blog.ts b/theme/src/client/composables/blog.ts
index a2221f3b..5a53e272 100644
--- a/theme/src/client/composables/blog.ts
+++ b/theme/src/client/composables/blog.ts
@@ -56,7 +56,7 @@ export const usePostListControl = () => {
 
   const changePage = (offset: number) => {
     page.value += offset
-    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
+    window.scrollTo({ top: 0, left: 0, behavior: 'instant' })
   }
 
   return {
diff --git a/theme/src/client/styles/content.scss b/theme/src/client/styles/content.scss
index f0a33a07..03f6fd73 100644
--- a/theme/src/client/styles/content.scss
+++ b/theme/src/client/styles/content.scss
@@ -120,11 +120,13 @@
   text-underline-offset: 2px;
   transition:
     color 0.25s,
-    opacity 0.25s;
+    opacity 0.25s,
+    text-underline-offset 0.25s;
 }
 
 .plume-content a:hover {
   color: var(--vp-c-brand-2);
+  text-underline-offset: 4px;
 }
 
 .plume-content strong {
diff --git a/theme/src/shared/frontmatter.ts b/theme/src/shared/frontmatter.ts
index 193ba0c4..877c1800 100644
--- a/theme/src/shared/frontmatter.ts
+++ b/theme/src/shared/frontmatter.ts
@@ -19,6 +19,7 @@ export interface PlumeThemeHeroAction {
 }
 
 export interface PlumeThemePageFrontmatter {
+  comments?: boolean
   editLink?: boolean
   editLinkPattern?: string
   lastUpdated?: boolean
@@ -33,7 +34,6 @@ export interface PlumeThemePostFrontmatter extends PlumeThemePageFrontmatter {
   tags?: string[]
   sticky?: boolean | number
   article?: boolean
-  banner?: string
 }
 
 export interface PlumeThemeNoteFrontmatter extends PlumeThemePageFrontmatter {
diff --git a/theme/templates/build.html b/theme/templates/build.html
index c738dea0..c000f8cc 100644
--- a/theme/templates/build.html
+++ b/theme/templates/build.html
@@ -15,10 +15,11 @@
     </script>
     <!--vuepress-ssr-head-->
     <!--vuepress-ssr-styles-->
-    <!--vuepress-ssr-resources-->
+    <!--vuepress-ssr-preload-->
+    <!--vuepress-ssr-prefetch-->
   </head>
   <body>
-    <div id="app"><!--vuepress-ssr-app--></div>
+    <div id="app"><!--vuepress-ssr-content--></div>
     <!--vuepress-ssr-scripts-->
   </body>
 </html>