diff --git a/docs/.vitepress/components/Link.vue b/docs/.vitepress/components/Link.vue
new file mode 100644
index 00000000..5a465182
--- /dev/null
+++ b/docs/.vitepress/components/Link.vue
@@ -0,0 +1,37 @@
+<template>
+  <a class="link" href="javascript:;" @click="handleClick"> {{ c }}</a>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vitepress'
+
+const router = useRouter()
+const props = defineProps({
+  c: {
+    type: String,
+    required: true
+  },
+  t: {
+    type: String,
+    required: true
+  }
+})
+const handleClick = () => {
+  // if link is external, open in new tab
+  if (props.t.startsWith('http')) {
+    window.open(props.t, '_blank')
+  } else if (props.t.endsWith('/')) {
+    // add link to path
+    // @ts-ignore
+    window && window.location && (window.location = props.t)
+  } else {
+    router.go(props.t)
+  }
+}
+</script>
+
+<style scoped>
+.link {
+  margin: 0px 5px;
+}
+</style>
diff --git a/docs/.vitepress/components/Title.vue b/docs/.vitepress/components/Title.vue
new file mode 100644
index 00000000..ae4045b9
--- /dev/null
+++ b/docs/.vitepress/components/Title.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="title">
+    <img :src="logo" alt="logo" style="margin: 0 auto" />
+    <p style="text-align: center">{{ subTitle }}</p>
+    <template v-for="item of linkList" :key="item.content">
+      <Link :c="item.content" :t="item.target" />
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import Link from './Link.vue'
+
+const props = defineProps({
+  subTitle: {
+    type: String,
+    required: true
+  },
+  logo: {
+    type: String,
+    required: true
+  },
+  linkList: {
+    type: Array as PropType<LinkList>,
+    required: true
+  }
+})
+</script>
+
+<style scoped></style>
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
new file mode 100644
index 00000000..08147407
--- /dev/null
+++ b/docs/.vitepress/theme/index.ts
@@ -0,0 +1,11 @@
+import DefaultTheme from 'vitepress/theme'
+import Title from '../components/Title.vue'
+
+export default {
+  ...DefaultTheme,
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx)
+    const { app } = ctx
+    app.component('Title', Title)
+  }
+}
diff --git a/docs/.vitepress/type.d.ts b/docs/.vitepress/type.d.ts
new file mode 100644
index 00000000..00129f77
--- /dev/null
+++ b/docs/.vitepress/type.d.ts
@@ -0,0 +1,12 @@
+declare module '*.vue' {
+  import { ComponentOptions } from 'vue'
+  const componentOptions: ComponentOptions
+  export default componentOptions
+}
+
+interface LinkItem {
+  content: string
+  target: string
+}
+
+type LinkList = LinkItem[]
diff --git a/docs/project/ClipboardManager/index.md b/docs/project/ClipboardManager/index.md
index 51869db5..03410bcc 100644
--- a/docs/project/ClipboardManager/index.md
+++ b/docs/project/ClipboardManager/index.md
@@ -3,11 +3,21 @@ title: 超级剪贴板
 navbar: false
 ---
 
-<img src="./assets/logo.png" alt="logo" style="margin: 0 auto" />
+<script setup>
+  const titleInfo = {
+    subTitle: '✨ 强大的剪贴板管理工具。',
+    logo: './assets/logo.png',
+    linkList: [
+      { content: '⭐ 开源代码', target: 'https://github.com/ZiuChen/ClipboardManager' },
+      { content: '🌎 疑难解答', target: './statement/' },
+      { content: '🚀 进阶功能', target: './guide/' },
+      { content: '🚚 更新日志', target: './log/' },
+      { content: '🎈 插件发布页', target: 'https://yuanliao.info/d/5722/29' },
+    ]
+  }
+</script>
 
-<p style="text-align: center">✨ 强大的剪贴板管理工具。</p>
-
-[⭐ 开源代码](https://github.com/ZiuChen/ClipboardManager)  [🌎 疑难解答](./statement/)  [🚀 进阶功能](./guide/)  [🚚 更新日志](./log/)  [🎈 插件发布页](https://yuanliao.info/d/5722/29)
+<Title v-bind="titleInfo" />
 
 ## 🔰 开始使用
 
diff --git a/docs/project/SmartWordBreak/index.md b/docs/project/SmartWordBreak/index.md
index e48bc52d..58ffdf41 100644
--- a/docs/project/SmartWordBreak/index.md
+++ b/docs/project/SmartWordBreak/index.md
@@ -3,11 +3,19 @@ title: 超级分词
 navbar: false
 ---
 
-<img src="./assets/logo.png" alt="logo" style="margin: 0 auto" />
+<script setup>
+  const titleInfo = {
+    subTitle: '✨ 智慧分词，快速提取文本关键词。',
+    logo: './assets/logo.png',
+    linkList: [
+      { content: '⭐ 插件发布页', target: 'https://yuanliao.info/d/5722/29' },
+      { content: '🌎 Q&A', target: './statement/' },
+      { content: '🚚 更新日志', target: './log/' },
+    ]
+  }
+</script>
 
-<p style="text-align: center">✨ 智慧分词，快速提取文本关键词。</p>
-
-[⭐ 插件发布页](https://yuanliao.info/d/5722/29)  [🌎 Q&A](./statement/)  [🚚 更新日志](./log/)
+<Title v-bind="titleInfo" />
 
 ## 🔰 开始使用