diff --git a/plugins/plugin-notes-data/src/node/plugin.ts b/plugins/plugin-notes-data/src/node/plugin.ts
index 4180071b..62b1f47f 100644
--- a/plugins/plugin-notes-data/src/node/plugin.ts
+++ b/plugins/plugin-notes-data/src/node/plugin.ts
@@ -2,6 +2,7 @@ import type { Plugin } from 'vuepress/core'
 import { getDirname, path } from 'vuepress/utils'
 import type { NotesDataOptions } from '../shared/index.js'
 import { prepareNotesData, watchNotesData } from './prepareNotesData.js'
+import { wait } from './utils.js'
 
 export function notesDataPlugin(options: NotesDataOptions | NotesDataOptions[]): Plugin {
   return {
@@ -12,7 +13,10 @@ export function notesDataPlugin(options: NotesDataOptions | NotesDataOptions[]):
       '../client/clientConfig.js',
     ),
 
-    onPrepared: app => prepareNotesData(app, options),
+    onPrepared: async (app) => {
+      await wait(50)
+      await prepareNotesData(app, options)
+    },
     onWatched: (app, watchers) => watchNotesData(app, watchers, options),
   }
 }
diff --git a/plugins/plugin-notes-data/src/node/utils.ts b/plugins/plugin-notes-data/src/node/utils.ts
index 5b2d0317..edabc86d 100644
--- a/plugins/plugin-notes-data/src/node/utils.ts
+++ b/plugins/plugin-notes-data/src/node/utils.ts
@@ -9,3 +9,7 @@ export function ensureArray<T>(thing: T | T[] | null | undefined): T[] {
 export function normalizePath(str: string) {
   return str.replace(/\\+/g, '/')
 }
+
+export function wait(time: number) {
+  return new Promise(resolve => setTimeout(resolve, time))
+}
diff --git a/theme/src/client/components/Blog/Archives.vue b/theme/src/client/components/Blog/Archives.vue
index 7f193283..23270dfc 100644
--- a/theme/src/client/components/Blog/Archives.vue
+++ b/theme/src/client/components/Blog/Archives.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useArchives, useBlogExtract } from '../../composables/index.js'
+import { useArchives, useBlogExtract } from '../../composables/blog.js'
 import ShortPostList from './ShortPostList.vue'
 
 const { archives: archivesLink } = useBlogExtract()
diff --git a/theme/src/client/components/Blog/Blog.vue b/theme/src/client/components/Blog/Blog.vue
index 9a6797ca..b94c7783 100644
--- a/theme/src/client/components/Blog/Blog.vue
+++ b/theme/src/client/components/Blog/Blog.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import { usePageData } from 'vuepress/client'
 import { computed } from 'vue'
-import type { PlumeThemePageData } from '../../../shared/index.js'
-import { useThemeLocaleData } from '../../composables/index.js'
+import { useData } from '../../composables/data.js'
 import TransitionFadeSlideY from '../TransitionFadeSlideY.vue'
 import PostList from './PostList.vue'
 import Archives from './Archives.vue'
@@ -11,8 +9,7 @@ import BlogExtract from './BlogExtract.vue'
 import Tags from './Tags.vue'
 import BlogNav from './BlogNav.vue'
 
-const theme = useThemeLocaleData()
-const page = usePageData<PlumeThemePageData>()
+const { theme, page } = useData()
 
 const com = {
   PostList,
diff --git a/theme/src/client/components/Blog/BlogAside.vue b/theme/src/client/components/Blog/BlogAside.vue
index d5c3fbf4..6fd4c795 100644
--- a/theme/src/client/components/Blog/BlogAside.vue
+++ b/theme/src/client/components/Blog/BlogAside.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { useThemeLocaleData } from '../../composables/index.js'
+import { useData } from '../../composables/data.js'
 import BlogNav from './BlogNav.vue'
 import BlogProfile from './BlogProfile.vue'
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 </script>
 
 <template>
diff --git a/theme/src/client/components/Blog/BlogExtract.vue b/theme/src/client/components/Blog/BlogExtract.vue
index b26141ff..20786080 100644
--- a/theme/src/client/components/Blog/BlogExtract.vue
+++ b/theme/src/client/components/Blog/BlogExtract.vue
@@ -3,11 +3,12 @@ import { useScrollLock } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { useRoute, withBase } from 'vuepress/client'
 import { isLinkHttp } from 'vuepress/shared'
-import { useBlogExtract, useThemeLocaleData } from '../../composables/index.js'
+import { useBlogExtract } from '../../composables/blog.js'
+import { useData } from '../../composables/data.js'
 import { inBrowser } from '../../utils/index.js'
 import AutoLink from '../AutoLink.vue'
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 const route = useRoute()
 
 const avatar = computed(() => theme.value.avatar)
diff --git a/theme/src/client/components/Blog/BlogNav.vue b/theme/src/client/components/Blog/BlogNav.vue
index 05b37bd6..41b98716 100644
--- a/theme/src/client/components/Blog/BlogNav.vue
+++ b/theme/src/client/components/Blog/BlogNav.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useRoute } from 'vuepress/client'
-import { useBlogExtract } from '../../composables/index.js'
+import { useBlogExtract } from '../../composables/blog.js'
 import AutoLink from '../AutoLink.vue'
 
 const props = defineProps<{
diff --git a/theme/src/client/components/Blog/BlogProfile.vue b/theme/src/client/components/Blog/BlogProfile.vue
index 43f7e3ec..4cbba1cb 100644
--- a/theme/src/client/components/Blog/BlogProfile.vue
+++ b/theme/src/client/components/Blog/BlogProfile.vue
@@ -2,10 +2,10 @@
 import { computed } from 'vue'
 import { withBase } from 'vuepress/client'
 import { isLinkHttp } from 'vuepress/shared'
-import { useThemeLocaleData } from '../../composables/index.js'
+import { useData } from '../../composables/data.js'
 import SocialLinks from '../SocialLinks.vue'
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 const avatar = computed(() => theme.value.avatar)
 const imageUrl = computed(() => {
   const url = avatar.value?.url
diff --git a/theme/src/client/components/Blog/Pagination.vue b/theme/src/client/components/Blog/Pagination.vue
index 44fc94f9..eec2e0b5 100644
--- a/theme/src/client/components/Blog/Pagination.vue
+++ b/theme/src/client/components/Blog/Pagination.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useData } from '../../composables/index.js'
+import { useData } from '../../composables/data.js'
 
 defineProps<{
   page: number
diff --git a/theme/src/client/components/Blog/PostItem.vue b/theme/src/client/components/Blog/PostItem.vue
index b48b7656..3987eb70 100644
--- a/theme/src/client/components/Blog/PostItem.vue
+++ b/theme/src/client/components/Blog/PostItem.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import type { PlumeThemeBlogPostItem } from '../../../shared/index.js'
-import { useTagColors } from '../../composables/index.js'
+import { useTagColors } from '../../composables/tag-colors.js'
 import AutoLink from '../AutoLink.vue'
 
 const props = defineProps<{
diff --git a/theme/src/client/components/Blog/PostList.vue b/theme/src/client/components/Blog/PostList.vue
index 3d961c36..e81c5ea8 100644
--- a/theme/src/client/components/Blog/PostList.vue
+++ b/theme/src/client/components/Blog/PostList.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { usePostListControl } from '../../composables/index.js'
+import { usePostListControl } from '../../composables/blog.js'
 import TransitionDrop from '../TransitionDrop.vue'
 import PostItem from './PostItem.vue'
 import Pagination from './Pagination.vue'
diff --git a/theme/src/client/components/Blog/Tags.vue b/theme/src/client/components/Blog/Tags.vue
index 77adb2d2..d0082939 100644
--- a/theme/src/client/components/Blog/Tags.vue
+++ b/theme/src/client/components/Blog/Tags.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useBlogExtract, useTags } from '../../composables/index.js'
+import { useBlogExtract, useTags } from '../../composables/blog.js'
 import ShortPostList from './ShortPostList.vue'
 
 const { tags, currentTag, postList, handleTagClick } = useTags()
diff --git a/theme/src/client/components/Flyout/MenuLink.vue b/theme/src/client/components/Flyout/MenuLink.vue
index 2b5a93a7..b0ccf9ab 100644
--- a/theme/src/client/components/Flyout/MenuLink.vue
+++ b/theme/src/client/components/Flyout/MenuLink.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { usePageData } from 'vuepress/client'
+import { useData } from '../../composables/data.js'
 import { isActive } from '../../utils/index.js'
 import AutoLink from '../AutoLink.vue'
 import VIcon from '../VIcon.vue'
@@ -8,7 +8,7 @@ defineProps<{
   item: any
 }>()
 
-const page = usePageData()
+const { page } = useData()
 </script>
 
 <template>
diff --git a/theme/src/client/components/Friends.vue b/theme/src/client/components/Friends.vue
index e088e648..bd818728 100644
--- a/theme/src/client/components/Friends.vue
+++ b/theme/src/client/components/Friends.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useData, useEditNavLink } from '../composables/index.js'
+import { useData } from '../composables/data.js'
+import { useEditNavLink } from '../composables/page.js'
 import AutoLink from './AutoLink.vue'
 import FriendsItem from './FriendsItem.vue'
 import FriendsGroup from './FriendsGroup.vue'
diff --git a/theme/src/client/components/FriendsItem.vue b/theme/src/client/components/FriendsItem.vue
index daade80a..62274576 100644
--- a/theme/src/client/components/FriendsItem.vue
+++ b/theme/src/client/components/FriendsItem.vue
@@ -2,7 +2,7 @@
 import { isPlainObject } from '@vuepress/helper/client'
 import { computed } from 'vue'
 import type { FriendsItem } from '../../shared/index'
-import { useDarkMode } from '../composables/index.js'
+import { useDarkMode } from '../composables/dark-mode.js'
 import AutoLink from './AutoLink.vue'
 
 const props = defineProps<{
@@ -117,3 +117,4 @@ const friendStyle = computed(() => {
   line-clamp: 3;
 }
 </style>
+../composables/dark-mode.js
diff --git a/theme/src/client/components/Home/Home.vue b/theme/src/client/components/Home/Home.vue
index c14f31dc..3e0d2a12 100644
--- a/theme/src/client/components/Home/Home.vue
+++ b/theme/src/client/components/Home/Home.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { usePageFrontmatter } from 'vuepress/client'
 import { type Component, computed, nextTick, onUnmounted, resolveComponent, watch } from 'vue'
-import type { PlumeThemeHomeFrontmatter } from '../../../shared/index.js'
+import { useData } from '../../composables/data.js'
 import HomeBanner from './HomeBanner.vue'
 import HomeHero from './HomeHero.vue'
 import HomeFeatures from './HomeFeatures.vue'
@@ -25,7 +24,7 @@ const DEFAULT_HERO = {
   text: '一个简约的，功能丰富的 vuepress 文档&博客 主题',
 }
 
-const matter = usePageFrontmatter<PlumeThemeHomeFrontmatter>()
+const { frontmatter: matter } = useData<'home'>()
 
 const config = computed(() => {
   const config = matter.value.config
diff --git a/theme/src/client/components/Home/HomeBanner.vue b/theme/src/client/components/Home/HomeBanner.vue
index 2dc26d21..ff2787f4 100644
--- a/theme/src/client/components/Home/HomeBanner.vue
+++ b/theme/src/client/components/Home/HomeBanner.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { usePageFrontmatter, withBase } from 'vuepress/client'
+import { withBase } from 'vuepress/client'
 import { isLinkHttp } from 'vuepress/shared'
 import { computed } from 'vue'
-import type { PlumeThemeHomeBanner, PlumeThemeHomeFrontmatter } from '../../../shared/index.js'
-import { useDarkMode } from '../../composables/darkMode.js'
+import type { PlumeThemeHomeBanner } from '../../../shared/index.js'
+import { useData } from '../../composables/data.js'
 import VButton from '../VButton.vue'
 
 const props = defineProps<PlumeThemeHomeBanner>()
 
 const DEFAULT_BANNER = 'https://api.pengzhanbo.cn/wallpaper/bing'
 
-const matter = usePageFrontmatter<PlumeThemeHomeFrontmatter>()
-const isDark = useDarkMode()
+const { isDark, frontmatter: matter } = useData<'home'>()
 
 const mask = computed(() => {
   const mask = props.bannerMask ?? matter.value.bannerMask
diff --git a/theme/src/client/components/Home/HomeBox.vue b/theme/src/client/components/Home/HomeBox.vue
index 93ce24a6..da34a045 100644
--- a/theme/src/client/components/Home/HomeBox.vue
+++ b/theme/src/client/components/Home/HomeBox.vue
@@ -3,7 +3,7 @@ import { withBase } from 'vuepress/client'
 import { computed, normalizeClass } from 'vue'
 import { isLinkHttp } from 'vuepress/shared'
 import type { PlumeHomeConfigBase } from '../../../shared/index.js'
-import { useDarkMode } from '../../composables/index.js'
+import { useDarkMode } from '../../composables/dark-mode.js'
 
 const props = defineProps<PlumeHomeConfigBase & {
   containerClass?: any
@@ -71,3 +71,4 @@ const containerClass = computed(() => normalizeClass(props.containerClass || '')
   min-height: calc(100vh - var(--vp-nav-height));
 }
 </style>
+../../composables/dark-mode.js
diff --git a/theme/src/client/components/Home/HomeHero.vue b/theme/src/client/components/Home/HomeHero.vue
index 387dbb7c..18b4c6ae 100644
--- a/theme/src/client/components/Home/HomeHero.vue
+++ b/theme/src/client/components/Home/HomeHero.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { usePageFrontmatter, withBase } from 'vuepress/client'
+import { withBase } from 'vuepress/client'
 import { isLinkHttp } from 'vuepress/shared'
 import { computed, ref } from 'vue'
 import VButton from '../VButton.vue'
-import { useDarkMode } from '../../composables/index.js'
+import { useData } from '../../composables/data.js'
 import { useHomeHeroTintPlate } from '../../composables/home.js'
-import type { PlumeThemeHomeFrontmatter, PlumeThemeHomeHero } from '../../../shared/index.js'
+import type { PlumeThemeHomeHero } from '../../../shared/index.js'
 
 const props = defineProps<PlumeThemeHomeHero>()
 
-const matter = usePageFrontmatter<PlumeThemeHomeFrontmatter>()
-const isDark = useDarkMode()
+const { isDark, frontmatter: matter } = useData<'home'>()
 
 const heroBackground = computed(() => {
   if (props.background === 'tint-plate')
diff --git a/theme/src/client/components/Home/HomeProfile.vue b/theme/src/client/components/Home/HomeProfile.vue
index 919d2c36..9204b0b8 100644
--- a/theme/src/client/components/Home/HomeProfile.vue
+++ b/theme/src/client/components/Home/HomeProfile.vue
@@ -2,12 +2,12 @@
 import { computed } from 'vue'
 import type { PlumeThemeHomeProfile } from '../../../shared/index.js'
 import VImage from '../VImage.vue'
-import { useThemeLocaleData } from '../../composables/index.js'
+import { useData } from '../../composables/data.js'
 import HomeBox from './HomeBox.vue'
 
 const props = defineProps<PlumeThemeHomeProfile>()
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 
 const avatar = computed(() => theme.value.avatar)
 
diff --git a/theme/src/client/components/Nav/DocOutlineItem.vue b/theme/src/client/components/Nav/DocOutlineItem.vue
index 65b675fe..90d1e54f 100644
--- a/theme/src/client/components/Nav/DocOutlineItem.vue
+++ b/theme/src/client/components/Nav/DocOutlineItem.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { PageHeader } from 'vuepress/client'
+import type { MenuItem } from '../../composables/outline.js'
 
 defineProps<{
-  headers: PageHeader[]
+  headers: MenuItem[]
   root?: boolean
 }>()
 
diff --git a/theme/src/client/components/Nav/LocalNav.vue b/theme/src/client/components/Nav/LocalNav.vue
index 1400ec01..39cf32ae 100644
--- a/theme/src/client/components/Nav/LocalNav.vue
+++ b/theme/src/client/components/Nav/LocalNav.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import { usePageData } from 'vuepress/client'
 import { useWindowScroll } from '@vueuse/core'
 import { computed, onMounted, ref } from 'vue'
-import type {
-  PlumeThemePageData,
-} from '../../../shared/index.js'
-import { useSidebar, useThemeLocaleData } from '../../composables/index.js'
+import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
+import { useSidebar } from '../../composables/sidebar.js'
+import { type MenuItem, getHeaders } from '../../composables/outline.js'
+import { useData } from '../../composables/data.js'
 import LocalNavOutlineDropdown from './LocalNavOutlineDropdown.vue'
 
 const props = defineProps<{
@@ -15,19 +14,23 @@ const props = defineProps<{
 
 defineEmits<(e: 'openMenu') => void>()
 
-const page = usePageData<PlumeThemePageData>()
-const themeData = useThemeLocaleData()
+const { page, theme, frontmatter } = useData()
 
 const { hasSidebar } = useSidebar()
 const { y } = useWindowScroll()
 
 const navHeight = ref(0)
 
-const headers = computed(() => page.value.headers)
+const headers = ref<MenuItem[]>([])
+
 const empty = computed(() => {
   return headers.value.length === 0 && !hasSidebar.value
 })
 
+onContentUpdated(() => {
+  headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
+})
+
 onMounted(() => {
   navHeight.value = Number.parseInt(
     getComputedStyle(document.documentElement).getPropertyValue(
@@ -54,15 +57,14 @@ const showLocalNav = computed(() => {
 <template>
   <div v-if="showLocalNav" :class="classes">
     <button
-      class="menu"
-      :class="{ hidden: page.isBlogPost }"
+      class="menu" :class="{ hidden: page.isBlogPost }"
       :disabled="page.isBlogPost"
       :aria-expanded="open"
       aria-controls="SidebarNav"
       @click="$emit('openMenu')"
     >
       <span class="vpi-align-left menu-icon" />
-      <span class="menu-text"> {{ themeData.sidebarMenuLabel || 'Menu' }} </span>
+      <span class="menu-text"> {{ theme.sidebarMenuLabel || 'Menu' }} </span>
     </button>
 
     <LocalNavOutlineDropdown v-if="showOutline" :headers="headers" :nav-height="navHeight" />
diff --git a/theme/src/client/components/Nav/LocalNavOutlineDropdown.vue b/theme/src/client/components/Nav/LocalNavOutlineDropdown.vue
index 49dfa4a2..7d748b9c 100644
--- a/theme/src/client/components/Nav/LocalNavOutlineDropdown.vue
+++ b/theme/src/client/components/Nav/LocalNavOutlineDropdown.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import type { PageHeader } from 'vuepress/client'
 import { onClickOutside } from '@vueuse/core'
 import { nextTick, ref, watch } from 'vue'
-import { useThemeLocaleData } from '../../composables/index.js'
+import type { MenuItem } from '../../composables/outline.js'
+import { useData } from '../../composables/data.js'
 import DocOutlineItem from './DocOutlineItem.vue'
 
 const props = defineProps<{
-  headers: PageHeader[]
+  headers: MenuItem[]
   navHeight: number
 }>()
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 const open = ref(false)
 const vh = ref(0)
 const items = ref<HTMLDivElement>()
diff --git a/theme/src/client/components/Nav/NavBar.vue b/theme/src/client/components/Nav/NavBar.vue
index b5c44f68..dd81251b 100644
--- a/theme/src/client/components/Nav/NavBar.vue
+++ b/theme/src/client/components/Nav/NavBar.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { usePageFrontmatter } from 'vuepress/client'
 import { useWindowScroll } from '@vueuse/core'
 import { ref, watchPostEffect } from 'vue'
 import { useSidebar } from '../../composables/sidebar.js'
+import { useData } from '../../composables/data.js'
 import NavBarAppearance from './NavBarAppearance.vue'
 import NavBarExtra from './NavBarExtra.vue'
 import NavBarHamburger from './NavBarHamburger.vue'
@@ -17,7 +17,7 @@ defineProps<{
 }>()
 defineEmits<(e: 'toggleScreen') => void>()
 
-const matter = usePageFrontmatter()
+const { frontmatter } = useData()
 
 const { y } = useWindowScroll()
 const { hasSidebar } = useSidebar()
@@ -26,7 +26,7 @@ const classes = ref<Record<string, boolean>>({})
 watchPostEffect(() => {
   classes.value = {
     'has-sidebar': hasSidebar.value,
-    'top': !!matter.value.home && y.value === 0,
+    'top': !!frontmatter.value.home && y.value === 0,
   }
 })
 </script>
diff --git a/theme/src/client/components/Nav/NavBarAppearance.vue b/theme/src/client/components/Nav/NavBarAppearance.vue
index 3c830cca..21fa4033 100644
--- a/theme/src/client/components/Nav/NavBarAppearance.vue
+++ b/theme/src/client/components/Nav/NavBarAppearance.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useThemeLocaleData } from '../../composables/index.js'
+import { useData } from '../../composables/data.js'
 import SwitchAppearance from '../SwitchAppearance.vue'
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 </script>
 
 <template>
diff --git a/theme/src/client/components/Nav/NavBarExtra.vue b/theme/src/client/components/Nav/NavBarExtra.vue
index 2fee7cd3..ca52201a 100644
--- a/theme/src/client/components/Nav/NavBarExtra.vue
+++ b/theme/src/client/components/Nav/NavBarExtra.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useThemeLocaleData } from '../../composables/index.js'
+import { useData } from '../../composables/data.js'
 import { useLangs } from '../../composables/langs.js'
 import Flyout from '../Flyout/index.vue'
 import MenuLink from '../Flyout/MenuLink.vue'
 import SocialLinks from '../SocialLinks.vue'
 import SwitchAppearance from '../SwitchAppearance.vue'
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 const { localeLinks, currentLang } = useLangs()
 
 const hasExtraContent = computed(
diff --git a/theme/src/client/components/Nav/NavBarMenu.vue b/theme/src/client/components/Nav/NavBarMenu.vue
index 49dc1317..1069f751 100644
--- a/theme/src/client/components/Nav/NavBarMenu.vue
+++ b/theme/src/client/components/Nav/NavBarMenu.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { useThemeLocaleData } from '../../composables/themeData.js'
+import { useData } from '../../composables/data.js'
 import NavBarMenuGroup from './NavBarMenuGroup.vue'
 import NavBarMenuLink from './NavBarMenuLink.vue'
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 </script>
 
 <template>
diff --git a/theme/src/client/components/Nav/NavBarMenuGroup.vue b/theme/src/client/components/Nav/NavBarMenuGroup.vue
index ff21c31b..fe7dfec9 100644
--- a/theme/src/client/components/Nav/NavBarMenuGroup.vue
+++ b/theme/src/client/components/Nav/NavBarMenuGroup.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import { usePageData } from 'vuepress/client'
 import { computed } from 'vue'
 import type { NavItem, NavItemWithChildren } from '../../../shared/index.js'
 import { isActive } from '../../utils/index.js'
 import Flyout from '../Flyout/index.vue'
+import { useData } from '../../composables/data.js'
 
 const props = defineProps<{
   item: NavItemWithChildren
 }>()
 
-const page = usePageData()
+const { page } = useData()
 
 function isChildActive(navItem: NavItem) {
   if ('link' in navItem) {
diff --git a/theme/src/client/components/Nav/NavBarMenuLink.vue b/theme/src/client/components/Nav/NavBarMenuLink.vue
index 57c4134e..127b5257 100644
--- a/theme/src/client/components/Nav/NavBarMenuLink.vue
+++ b/theme/src/client/components/Nav/NavBarMenuLink.vue
@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import { usePageData } from 'vuepress/client'
 import type { NavItemWithLink } from '../../../shared/index.js'
 import { isActive } from '../../utils/index.js'
 import AutoLink from '../AutoLink.vue'
 import VIcon from '../VIcon.vue'
+import { useData } from '../../composables/data.js'
 
 defineProps<{
   item: NavItemWithLink
 }>()
 
-const page = usePageData()
+const { page } = useData()
 </script>
 
 <template>
diff --git a/theme/src/client/components/Nav/NavBarSocialLinks.vue b/theme/src/client/components/Nav/NavBarSocialLinks.vue
index ec972236..e2b5e224 100644
--- a/theme/src/client/components/Nav/NavBarSocialLinks.vue
+++ b/theme/src/client/components/Nav/NavBarSocialLinks.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useThemeLocaleData } from '../../composables/index.js'
+import { useData } from '../../composables/data.js'
 import SocialLinks from '../SocialLinks.vue'
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 
 const social = computed(() => {
   const includes = theme.value.navbarSocialInclude ?? []
diff --git a/theme/src/client/components/Nav/NavBarTitle.vue b/theme/src/client/components/Nav/NavBarTitle.vue
index f96b8084..1e459a7d 100644
--- a/theme/src/client/components/Nav/NavBarTitle.vue
+++ b/theme/src/client/components/Nav/NavBarTitle.vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import { useRouteLocale, useSiteLocaleData } from 'vuepress/client'
-import { useSidebar } from '../../composables/index.js'
-import { useThemeLocaleData } from '../../composables/themeData.js'
+import { useRouteLocale } from 'vuepress/client'
+import { useSidebar } from '../../composables/sidebar.js'
+import { useData } from '../../composables/data.js'
 import AutoLink from '../AutoLink.vue'
 import VImage from '../VImage.vue'
 
-const theme = useThemeLocaleData()
-const site = useSiteLocaleData()
+const { theme, site } = useData()
 const { hasSidebar } = useSidebar()
 const routeLocale = useRouteLocale()
 </script>
diff --git a/theme/src/client/components/Nav/NavBarTranslations.vue b/theme/src/client/components/Nav/NavBarTranslations.vue
index 12dbb305..7d62ba5b 100644
--- a/theme/src/client/components/Nav/NavBarTranslations.vue
+++ b/theme/src/client/components/Nav/NavBarTranslations.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { useLangs } from '../../composables/langs.js'
-import { useThemeLocaleData } from '../../composables/themeData.js'
+import { useData } from '../../composables/data.js'
 import Flyout from '../Flyout/index.vue'
 import MenuLink from '../Flyout/MenuLink.vue'
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 const { currentLang, localeLinks } = useLangs()
 </script>
 
diff --git a/theme/src/client/components/Nav/NavScreenAppearance.vue b/theme/src/client/components/Nav/NavScreenAppearance.vue
index cc4acced..657e4e14 100644
--- a/theme/src/client/components/Nav/NavScreenAppearance.vue
+++ b/theme/src/client/components/Nav/NavScreenAppearance.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useThemeLocaleData } from '../../composables/index.js'
+import { useData } from '../../composables/data.js'
 import SwitchAppearance from '../SwitchAppearance.vue'
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 </script>
 
 <template>
diff --git a/theme/src/client/components/Nav/NavScreenMenu.vue b/theme/src/client/components/Nav/NavScreenMenu.vue
index 6103a7cc..3309f436 100644
--- a/theme/src/client/components/Nav/NavScreenMenu.vue
+++ b/theme/src/client/components/Nav/NavScreenMenu.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { useThemeLocaleData } from '../../composables/index.js'
+import { useData } from '../../composables/data.js'
 import NavScreenMenuGroup from './NavScreenMenuGroup.vue'
 import NavScreenMenuLink from './NavScreenMenuLink.vue'
 
-const theme = useThemeLocaleData()
+const { theme } = useData()
 </script>
 
 <template>
diff --git a/theme/src/client/components/Nav/NavScreenSocialLinks.vue b/theme/src/client/components/Nav/NavScreenSocialLinks.vue
index 10584b92..d5fb5088 100644
--- a/theme/src/client/components/Nav/NavScreenSocialLinks.vue
+++ b/theme/src/client/components/Nav/NavScreenSocialLinks.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useThemeData } from '../../composables/index.js'
+import { useData } from '../../composables/data.js'
 import SocialLinks from '../SocialLinks.vue'
 
-const theme = useThemeData()
+const { theme } = useData()
 </script>
 
 <template>
diff --git a/theme/src/client/components/Nav/index.vue b/theme/src/client/components/Nav/index.vue
index bc66d819..ad17c742 100644
--- a/theme/src/client/components/Nav/index.vue
+++ b/theme/src/client/components/Nav/index.vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import { usePageData } from 'vuepress/client'
 import { computed, provide } from 'vue'
-import type { PlumeThemePageData } from '../../../shared/index.js'
 import { useNav } from '../../composables/nav.js'
+import { useData } from '../../composables/data.js'
 import Navbar from './NavBar.vue'
 import NavScreen from './NavScreen.vue'
 
-const page = usePageData<PlumeThemePageData>()
+const { page } = useData()
 
 const { isScreenOpen, closeScreen, toggleScreen } = useNav()
 
diff --git a/theme/src/client/components/Page.vue b/theme/src/client/components/Page.vue
index fc2ecaf3..273123fd 100644
--- a/theme/src/client/components/Page.vue
+++ b/theme/src/client/components/Page.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute } from 'vuepress/client'
-import { useData, useSidebar } from '../composables/index.js'
+import { useData } from '../composables/data.js'
+import { useSidebar } from '../composables/sidebar.js'
 import { usePageEncrypt } from '../composables/encrypt.js'
 import PageAside from './PageAside.vue'
 import PageFooter from './PageFooter.vue'
diff --git a/theme/src/client/components/PageAside.vue b/theme/src/client/components/PageAside.vue
index 25e16901..2e4e8f18 100644
--- a/theme/src/client/components/PageAside.vue
+++ b/theme/src/client/components/PageAside.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
 import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
-import { type MenuItem, getHeaders, useActiveAnchor, useData } from '../composables/index.js'
+import { type MenuItem, getHeaders, useActiveAnchor } from '../composables/outline.js'
+import { useData } from '../composables/data.js'
 import PageAsideItem from './PageAsideItem.vue'
 
 const { theme, frontmatter } = useData()
diff --git a/theme/src/client/components/PageAsideItem.vue b/theme/src/client/components/PageAsideItem.vue
index 03bde8ef..ac5c476f 100644
--- a/theme/src/client/components/PageAsideItem.vue
+++ b/theme/src/client/components/PageAsideItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { MenuItem } from '../composables/index.js'
+import type { MenuItem } from '../composables/outline.js'
 
 defineProps<{
   headers: MenuItem[]
diff --git a/theme/src/client/components/PageFooter.vue b/theme/src/client/components/PageFooter.vue
index b176a62a..060e8fe6 100644
--- a/theme/src/client/components/PageFooter.vue
+++ b/theme/src/client/components/PageFooter.vue
@@ -2,11 +2,11 @@
 import { computed } from 'vue'
 import {
   useContributors,
-  useData,
   useEditNavLink,
   useLastUpdated,
   usePageNav,
-} from '../composables/index.js'
+} from '../composables/page.js'
+import { useData } from '../composables/data.js'
 import AutoLink from './AutoLink.vue'
 
 const { theme } = useData()
diff --git a/theme/src/client/components/PageMeta.vue b/theme/src/client/components/PageMeta.vue
index 4d92ba75..69bef29e 100644
--- a/theme/src/client/components/PageMeta.vue
+++ b/theme/src/client/components/PageMeta.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useReadingTimeLocale } from '@vuepress/plugin-reading-time/client'
-import { useData, useTagColors } from '../composables/index.js'
+import { useData } from '../composables/data.js'
+import { useTagColors } from '../composables/tag-colors.js'
 
 const { page, frontmatter: matter } = useData<'post'>()
 
diff --git a/theme/src/client/components/SwitchAppearance.vue b/theme/src/client/components/SwitchAppearance.vue
index 246f81f8..5061799a 100644
--- a/theme/src/client/components/SwitchAppearance.vue
+++ b/theme/src/client/components/SwitchAppearance.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject, ref } from 'vue'
-import { useData } from '../composables/index.js'
+import { useData } from '../composables/data.js'
 import Switch from './Switch.vue'
 
 const checked = ref(false)
diff --git a/theme/src/client/components/TransitionFadeSlideY.vue b/theme/src/client/components/TransitionFadeSlideY.vue
index fd69b4d0..80d942c3 100644
--- a/theme/src/client/components/TransitionFadeSlideY.vue
+++ b/theme/src/client/components/TransitionFadeSlideY.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useScrollPromise } from '../composables/index.js'
+import { useScrollPromise } from '../composables/scroll-promise.js'
 
 const { resolve: onBeforeEnter, pending: onBeforeLeave } = useScrollPromise()
 </script>
@@ -14,3 +14,4 @@ const { resolve: onBeforeEnter, pending: onBeforeLeave } = useScrollPromise()
     <slot />
   </Transition>
 </template>
+../composables/scroll-promise.js
diff --git a/theme/src/client/components/VFooter.vue b/theme/src/client/components/VFooter.vue
index c6327d67..60a62099 100644
--- a/theme/src/client/components/VFooter.vue
+++ b/theme/src/client/components/VFooter.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useCssVar } from '@vueuse/core'
 import { onMounted, ref } from 'vue'
-import { useData, useSidebar } from '../composables/index.js'
+import { useData } from '../composables/data.js'
+import { useSidebar } from '../composables/sidebar.js'
 import { inBrowser } from '../utils/index.js'
 
 const { theme } = useData()
diff --git a/theme/src/client/components/global/ExternalLinkIcon.vue b/theme/src/client/components/global/ExternalLinkIcon.vue
deleted file mode 100644
index 8d87a051..00000000
--- a/theme/src/client/components/global/ExternalLinkIcon.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts" setup>
-import { usePageFrontmatter } from 'vuepress/client'
-import { computed } from 'vue'
-import type { PlumeThemePageFrontmatter } from '../../../shared/index.js'
-
-const matter = usePageFrontmatter<PlumeThemePageFrontmatter>()
-const show = computed(() => matter.value.externalLink !== false)
-</script>
-
-<template>
-  <span v-if="show" class="vpi-external-link external-icon" />
-</template>
-
-<style scoped>
-.external-icon {
-  position: relative;
-  top: 1px;
-  display: inline-block;
-  width: 0.8em;
-  height: 0.8em;
-  color: var(--vp-c-text-3);
-  vertical-align: middle;
-  transition: color var(--t-color);
-}
-
-@media print {
-  .external-icon {
-    display: none;
-  }
-}
-</style>
diff --git a/theme/src/client/composables/darkMode.ts b/theme/src/client/composables/dark-mode.ts
similarity index 96%
rename from theme/src/client/composables/darkMode.ts
rename to theme/src/client/composables/dark-mode.ts
index a6fcda8c..d5664dc7 100644
--- a/theme/src/client/composables/darkMode.ts
+++ b/theme/src/client/composables/dark-mode.ts
@@ -1,7 +1,7 @@
 import { useDark } from '@vueuse/core'
 import { inject, ref } from 'vue'
 import type { App, InjectionKey, Ref } from 'vue'
-import { useThemeData } from './themeData.js'
+import { useThemeData } from './theme-data.js'
 
 type DarkModeRef = Ref<boolean>
 
diff --git a/theme/src/client/composables/data.ts b/theme/src/client/composables/data.ts
index 61b025e7..faa7583a 100644
--- a/theme/src/client/composables/data.ts
+++ b/theme/src/client/composables/data.ts
@@ -13,22 +13,24 @@ import type {
 } from 'vuepress/client'
 import type {
   PlumeThemeFriendsFrontmatter,
+  PlumeThemeHomeFrontmatter,
   PlumeThemeLocaleData,
   PlumeThemePageData,
   PlumeThemePageFrontmatter,
   PlumeThemePostFrontmatter,
 } from '../../shared/index.js'
-import { useThemeLocaleData } from './themeData.js'
+import { useThemeLocaleData } from './theme-data.js'
 import { hashRef } from './hash.js'
-import { useDarkMode } from './darkMode.js'
+import { useDarkMode } from './dark-mode.js'
 
-type FrontmatterType = 'post' | 'friends' | 'page'
+type FrontmatterType = 'home' | 'post' | 'friends' | 'page'
 
-type Frontmatter<T extends FrontmatterType = 'page'> = T extends 'post'
-  ? PlumeThemePostFrontmatter
-  : T extends 'friends'
-    ? PlumeThemeFriendsFrontmatter
-    : PlumeThemePageFrontmatter
+type Frontmatter<T extends FrontmatterType = 'page'> = T extends 'home'
+  ? PlumeThemeHomeFrontmatter : T extends 'post'
+    ? PlumeThemePostFrontmatter
+    : T extends 'friends'
+      ? PlumeThemeFriendsFrontmatter
+      : PlumeThemePageFrontmatter
 
 export interface Data<T extends FrontmatterType = 'page'> {
   theme: ThemeLocaleDataRef<PlumeThemeLocaleData>
diff --git a/theme/src/client/composables/home.ts b/theme/src/client/composables/home.ts
index 93537c77..33a052c5 100644
--- a/theme/src/client/composables/home.ts
+++ b/theme/src/client/composables/home.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import { computed, onMounted, onUnmounted } from 'vue'
 import type { PlumeThemeHomeHero } from '../../shared/index.js'
-import { useDarkMode } from './darkMode.js'
+import { useDarkMode } from './dark-mode.js'
 
 export interface TintPlate {
   r: { value: number, offset: number }
diff --git a/theme/src/client/composables/index.ts b/theme/src/client/composables/index.ts
index e2dbec99..f52d62f4 100644
--- a/theme/src/client/composables/index.ts
+++ b/theme/src/client/composables/index.ts
@@ -1,14 +1,13 @@
-export * from './darkMode.js'
-export * from './useScrollPromise.js'
-export * from './themeData.js'
-export * from './useNavLink.js'
+export * from './dark-mode.js'
+export * from './scroll-promise.js'
+export * from './theme-data.js'
 export * from './sidebar.js'
 export * from './aside.js'
 export * from './page.js'
 export * from './blog.js'
 export * from './tag-colors.js'
 export * from './locale.js'
-export * from './useRouteQuery.js'
+export * from './route-query.js'
 export * from './watermark.js'
 export * from './data.js'
 export * from './outline.js'
diff --git a/theme/src/client/composables/langs.ts b/theme/src/client/composables/langs.ts
index 8d44c874..d131773a 100644
--- a/theme/src/client/composables/langs.ts
+++ b/theme/src/client/composables/langs.ts
@@ -1,6 +1,6 @@
 import { resolveRoute, useRouteLocale, withBase } from 'vuepress/client'
 import { computed } from 'vue'
-import { useThemeData } from './themeData.js'
+import { useThemeData } from './theme-data.js'
 import { useData } from './data.js'
 import { getSidebarFirstLink, getSidebarList, normalizePath, useNotesData } from './sidebar.js'
 
diff --git a/theme/src/client/composables/page.ts b/theme/src/client/composables/page.ts
index 6117fa72..6e15a48d 100644
--- a/theme/src/client/composables/page.ts
+++ b/theme/src/client/composables/page.ts
@@ -10,8 +10,8 @@ import type {
   PlumeThemePageData,
   PlumeThemePageFrontmatter,
 } from '../../shared/index.js'
-import { useNavLink, useSidebar, useThemeLocaleData } from '../composables/index.js'
-import { resolveEditLink } from '../utils/index.js'
+import { useSidebar, useThemeLocaleData } from '../composables/index.js'
+import { resolveEditLink, resolveNavLink } from '../utils/index.js'
 
 export function useEditNavLink(): ComputedRef<null | NavItemWithLink> {
   const themeLocale = useThemeLocaleData()
@@ -120,7 +120,7 @@ function resolveFromFrontmatterConfig(conf: unknown): null | false | NavItemWith
     return null
 
   if (isString(conf))
-    return useNavLink(conf)
+    return resolveNavLink(conf)
 
   if (isPlainObject<NavItemWithLink>(conf))
     return conf
diff --git a/theme/src/client/composables/useRouteQuery.ts b/theme/src/client/composables/route-query.ts
similarity index 100%
rename from theme/src/client/composables/useRouteQuery.ts
rename to theme/src/client/composables/route-query.ts
diff --git a/theme/src/client/composables/useScrollPromise.ts b/theme/src/client/composables/scroll-promise.ts
similarity index 100%
rename from theme/src/client/composables/useScrollPromise.ts
rename to theme/src/client/composables/scroll-promise.ts
diff --git a/theme/src/client/composables/themeData.ts b/theme/src/client/composables/theme-data.ts
similarity index 100%
rename from theme/src/client/composables/themeData.ts
rename to theme/src/client/composables/theme-data.ts
diff --git a/theme/src/client/utils/index.ts b/theme/src/client/utils/index.ts
index e7b6ed17..5ac61a66 100644
--- a/theme/src/client/utils/index.ts
+++ b/theme/src/client/utils/index.ts
@@ -1,6 +1,6 @@
 export * from './shared.js'
-export * from './normalizeLink.js'
 export * from './dom.js'
 export * from './resolveEditLink.js'
 export * from './resolveRepoType.js'
+export * from './resolveNavLink.js'
 export * from './base.js'
diff --git a/theme/src/client/utils/normalizeLink.ts b/theme/src/client/utils/normalizeLink.ts
deleted file mode 100644
index 44b8c016..00000000
--- a/theme/src/client/utils/normalizeLink.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { PATHNAME_PROTOCOL_RE, isExternal } from './shared.js'
-
-export function normalizeLink(url: string): string {
-  if (isExternal(url))
-    return url.replace(PATHNAME_PROTOCOL_RE, '')
-
-  const { pathname, search, hash } = new URL(url, 'http://example.com')
-
-  const normalizedPath
-    = pathname.endsWith('/') || pathname.endsWith('.html')
-      ? url
-      : url.replace(
-        /(?:(^\.+)\/)?.*$/,
-          `$1${pathname.replace(/(\.md)?$/, '.html')}${search}${hash}`,
-      )
-
-  return normalizedPath
-}
diff --git a/theme/src/client/composables/useNavLink.ts b/theme/src/client/utils/resolveNavLink.ts
similarity index 85%
rename from theme/src/client/composables/useNavLink.ts
rename to theme/src/client/utils/resolveNavLink.ts
index b61844f7..fc8ae3ec 100644
--- a/theme/src/client/composables/useNavLink.ts
+++ b/theme/src/client/utils/resolveNavLink.ts
@@ -8,10 +8,10 @@ import type { NavItemWithLink } from '../../shared/index.js'
  * - Input: '/README.md'
  * - Output: { text: 'Home', link: '/' }
  */
-export function useNavLink(config: string): NavItemWithLink {
+export function resolveNavLink(link: string): NavItemWithLink {
   const { notFound, meta, path } = resolveRoute<{
     title?: string
-  }>(config)
+  }>(link)
 
   return notFound
     ? { text: path, link: path }
diff --git a/theme/src/client/utils/shared.ts b/theme/src/client/utils/shared.ts
index 060c9832..ad0aa4a8 100644
--- a/theme/src/client/utils/shared.ts
+++ b/theme/src/client/utils/shared.ts
@@ -33,10 +33,6 @@ export function normalize(path: string): string {
   return decodeURI(path).replace(HASH_RE, '').replace(EXT_RE, '')
 }
 
-export function isExternal(path: string): boolean {
-  return EXTERNAL_URL_RE.test(path)
-}
-
 export function throttleAndDebounce(fn: () => void, delay: number): () => void {
   let timeoutId: NodeJS.Timeout
   let called = false
@@ -57,7 +53,3 @@ export function throttleAndDebounce(fn: () => void, delay: number): () => void {
     }
   }
 }
-
-export function ensureStartingSlash(path: string): string {
-  return /^\//.test(path) ? path : `/${path}`
-}