diff --git a/docs/.vuepress/client.ts b/docs/.vuepress/client.ts
index a3f515cf..b71c3f8d 100644
--- a/docs/.vuepress/client.ts
+++ b/docs/.vuepress/client.ts
@@ -1,10 +1,12 @@
 import { type ClientConfig, defineClientConfig } from 'vuepress/client'
 import HeroTintPlateConfig from './themes/components/HeroTintPlateConfig.vue'
 import CanIUseConfig from './themes/components/CanIUseConfig.vue'
+import Demos from './themes/components/Demos.vue'
 
 export default defineClientConfig({
   enhance({ app }) {
     app.component('HeroTintPlateConfig', HeroTintPlateConfig)
     app.component('CanIUseConfig', CanIUseConfig)
+    app.component('Demos', Demos)
   },
 }) as ClientConfig
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index 20dc76ef..14751530 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -16,6 +16,7 @@ export default defineUserConfig({
   head: [
     ['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/favicon-32x32.png' }],
     ['link', { rel: 'icon', type: 'image/png', sizes: '16x16', href: '/favicon-16x16.png' }],
+    ['meta', { name: 'google-site-verification', content: 'X5YSaTDn-pKqQBUKD_05_dQcxVItzEq7Rlbg2ZEU7AM' }],
   ],
 
   pagePatterns: ['**/*.md', '!**/*.snippet.md', '!.vuepress', '!node_modules'],
diff --git a/docs/.vuepress/navbar.ts b/docs/.vuepress/navbar.ts
index e13c3537..e71e78db 100644
--- a/docs/.vuepress/navbar.ts
+++ b/docs/.vuepress/navbar.ts
@@ -29,17 +29,24 @@ export const zhNavbar = [
     icon: 'material-symbols:article-outline',
     activeMatch: '^/(blog|article)/',
   },
+  {
+    text: '案例',
+    link: '/demos/',
+    icon: 'map:wind-surfing',
+  },
   {
     text: '更多',
     icon: 'icon-park-outline:more-three',
     items: [
-      { text: '主题工具', link: '/tools/' },
-      { text: '友情链接', link: '/friends/' },
+      { text: '喝杯奶茶', link: '/sponsor/', icon: 'line-md:coffee-loop' },
+      { text: '主题工具', link: '/tools/', icon: 'jam:tools' },
+      { text: '友情链接', link: '/friends/', icon: 'carbon:friendship' },
       {
         text: 'Vuepress',
+        icon: 'logos:vue',
         items: [
-          { text: '官方文档', link: 'https://v2.vuepress.vuejs.org' },
-          { text: '生态系统', link: 'https://ecosystem.vuejs.press/' },
+          { text: '官方文档', link: 'https://v2.vuepress.vuejs.org', icon: 'logos:vue' },
+          { text: '生态系统', link: 'https://ecosystem.vuejs.press/', icon: 'logos:vue' },
         ],
       },
     ],
diff --git a/docs/.vuepress/themes/components/Demos.vue b/docs/.vuepress/themes/components/Demos.vue
new file mode 100644
index 00000000..6a33ff8a
--- /dev/null
+++ b/docs/.vuepress/themes/components/Demos.vue
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+interface Demo {
+  name: string
+  desc: string
+  logo: string
+  repo: string
+  url: string
+  preview: string
+}
+
+defineProps<{
+  list: Demo[]
+}>()
+</script>
+
+<template>
+  <div class="demos">
+    <div v-for="demo in list" :key="demo.url" class="demo-item">
+      <div class="demo-img">
+        <a :href="demo.url" target="_blank" rel="noopener noreferrer">
+          <img :src="demo.preview" :alt="demo.name" loading="lazy">
+        </a>
+      </div>
+      <div class="demo-content">
+        <h3 class="demo-title">
+          <span v-if="demo.logo" class="logo" :style="`background-image: url(${demo.logo})`" />
+          <span class="title">
+            <a :href="demo.url" target="_blank" rel="noopener noreferrer" :aria-label="demo.name" :title="demo.name">{{ demo.name }}</a>
+          </span>
+          <a v-if="demo.repo" :href="demo.repo" class="github" target="_blank" rel="noopener noreferrer"><span
+            class="vpi-social-github"
+          /></a>
+        </h3>
+        <p :title="demo.desc">
+          {{ demo.desc }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.demos {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 20px 16px;
+  width: 100%;
+}
+
+@media (min-width: 768px) {
+  .demos {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.demo-item {
+  overflow: hidden;
+  border: solid 1px var(--vp-c-divider);
+  border-radius: 8px;
+  box-shadow: var(--vp-shadow-1);
+  transition: var(--t-color);
+  transition-property: border background box-shadow;
+}
+
+.demo-item:hover {
+  box-shadow: var(--vp-shadow-3);
+}
+
+.demo-img {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%;
+  overflow: hidden;
+}
+
+.demo-img img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
+  transform: scale(1);
+}
+
+.demo-item:hover .demo-img img {
+  transform: scale(1.05);
+}
+
+.demo-content {
+  padding: 0 16px 12px;
+}
+
+.demo-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px auto 6px;
+  font-size: 16px;
+}
+
+.demo-title .logo {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  margin-right: 5px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+}
+
+.demo-title .title {
+  flex: 1;
+  width: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.demo-title .title a {
+  color: var(--vp-c-text-1);
+  text-decoration: none;
+}
+
+.demo-title .github {
+  display: flex;
+  margin-left: 10px;
+  color: var(--vp-c-text-1);
+}
+
+.demo-title .vpi-social-github {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+
+.demo-content p {
+  display: -webkit-box;
+  margin: 6px auto 0;
+  overflow: hidden;
+  font-size: 14px;
+
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+</style>
diff --git a/docs/demos.md b/docs/demos.md
new file mode 100644
index 00000000..26c5e4d8
--- /dev/null
+++ b/docs/demos.md
@@ -0,0 +1,40 @@
+---
+title: 案例
+author: pengzhanbo
+createTime: 2024/04/18 19:22:07
+permalink: /demos/
+readingTime: false
+prev: false
+next: false
+article: false
+docs:
+  -
+    name: VuePress Plume
+    desc: 一个简约的，功能丰富的 vuepress 文档&博客 主题。
+    logo: /plume.png
+    url: https://plume.pengzhanbo.cn
+    repo: https://github.com/pengzhanbo/vuepress-theme-plume
+    preview: /images/demos/plume.png
+blog:
+  -
+    name: 鹏展博
+    desc: 即使慢，驰而不息，纵会落后，纵会失败，但必须能够到达他所向的目标。
+    logo: https://pengzhanbo.cn/images/blogger-fav.png
+    url: https://pengzhanbo.cn/
+    repo: https://github.com/pengzhanbo/pengzhanbo.cn
+    preview: /images/demos/pengzhanbo.png
+---
+
+:::important
+你可以随时通过 [PR](https://github.com/pengzhanbo/vuepress-theme-plume/edit/main/docs/demos.md) 添加你的 文档 或 博客 到这个页面。
+
+站点预览图片请放到 `docs/.vuepress/public/images/demos` 目录下。推荐使用远程链接，以便可以随时更新它。
+:::
+
+## 文档
+
+<Demos :list="$frontmatter.docs" />
+
+## 博客
+
+<Demos :list="$frontmatter.blog" />