diff --git a/packages/vuepress-theme-reco/src/client/clientSetup.ts b/packages/vuepress-theme-reco/src/client/clientSetup.ts
index 4d00d413..d3ad85a8 100644
--- a/packages/vuepress-theme-reco/src/client/clientSetup.ts
+++ b/packages/vuepress-theme-reco/src/client/clientSetup.ts
@@ -1,13 +1,15 @@
 import { computed, provide } from 'vue'
-import { usePageFrontmatter, useRoute, usePageData } from 'vuepress/client'
-import { useExtendPageData } from '@vuepress-reco/vuepress-plugin-page/lib/client/composable/index.js'
+import { useRoute } from 'vuepress/client'
 import {
-  resolveSeriesItems,
-  seriesItemsSymbol,
-  headersToCatalog,
+  usePageData,
   catalogSymbol,
+  headersToCatalog,
+  seriesItemsSymbol,
+  resolveSeriesItems,
   useThemeLocaleData,
-} from './composables/index.js'
+  usePageFrontmatter,
+} from '@composables/index.js'
+import { useExtendPageData } from '@vuepress-reco/vuepress-plugin-page/lib/client/composable/index.js'
 
 import type { RecoThemeNormalPageFrontmatter } from '../types'
 
@@ -15,10 +17,12 @@ export function applyClientSetup() {
   // we need to access series items in multiple components
   // so we make it global computed
   const themeLocal = useThemeLocaleData()
-  const frontmatter = usePageFrontmatter<RecoThemeNormalPageFrontmatter>()
-  const route =  useRoute()
+  const frontmatter = usePageFrontmatter()
+  const route = useRoute()
   const { series } = useExtendPageData()
-  const seriesItems = computed(() => resolveSeriesItems(frontmatter.value, themeLocal.value, route, series))
+  const seriesItems = computed(() =>
+    resolveSeriesItems(frontmatter.value, themeLocal.value, route, series)
+  )
   provide(seriesItemsSymbol, seriesItems)
 
   const page = usePageData()
diff --git a/packages/vuepress-theme-reco/src/client/components/Common/hook.ts b/packages/vuepress-theme-reco/src/client/components/Common/hook.ts
index 88093029..8900686c 100644
--- a/packages/vuepress-theme-reco/src/client/components/Common/hook.ts
+++ b/packages/vuepress-theme-reco/src/client/components/Common/hook.ts
@@ -1,7 +1,7 @@
 import { useRouter, useRoute } from 'vue-router'
 import { watch, ref, onMounted, onUnmounted, toRefs } from 'vue'
+import { useScrollDirection, useThemeLocaleData } from '@composables/index.js'
 import { useInitCopyBtn } from '@vuepress-reco/vuepress-plugin-code-copy/lib/client/composables/initCopyBtn.js'
-import { useScrollDirection, useThemeLocaleData } from '../../composables/index.js'
 
 export function useSeries(toggleSeries, toggleMobileMenus) {
   // close series after navigation
diff --git a/packages/vuepress-theme-reco/src/client/components/Common/index.vue b/packages/vuepress-theme-reco/src/client/components/Common/index.vue
index 7326656a..e5af7631 100644
--- a/packages/vuepress-theme-reco/src/client/components/Common/index.vue
+++ b/packages/vuepress-theme-reco/src/client/components/Common/index.vue
@@ -31,7 +31,6 @@
 
 <script lang="ts" setup>
 import { onMounted, computed } from 'vue'
-import { usePageFrontmatter } from 'vuepress/client'
 
 import { useSeriesItems } from '../../composables/index.js'
 import Navbar from '../Navbar.vue'
@@ -42,10 +41,10 @@ import Password from '../Password/index.vue'
 import NavbarDropdownNemu from '../NavbarDropdownNemu.vue'
 
 import { useSeries, usePassword, useInitCodeCopy } from './hook.js'
-import { useSeriesData, useMobileMenus } from '../../composables/index.js'
+import { useSeriesData, useMobileMenus, usePageFrontmatter } from '@composables/index.js'
 import { RecoThemeNormalPageFrontmatter } from '../../../types'
 
-const frontmatter = usePageFrontmatter<RecoThemeNormalPageFrontmatter>()
+const frontmatter = usePageFrontmatter()
 
 const {
   isOpenSeries,
diff --git a/packages/vuepress-theme-reco/src/client/components/FriendshipLink.vue b/packages/vuepress-theme-reco/src/client/components/FriendshipLink.vue
index 5b47d562..290204fa 100644
--- a/packages/vuepress-theme-reco/src/client/components/FriendshipLink.vue
+++ b/packages/vuepress-theme-reco/src/client/components/FriendshipLink.vue
@@ -16,7 +16,7 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
+import { useThemeLocaleData } from '@composables/index.js'
 import { MagicCard } from './global/index.js';
 
 const themeLocal = useThemeLocaleData()
diff --git a/packages/vuepress-theme-reco/src/client/components/Home/Banner.vue b/packages/vuepress-theme-reco/src/client/components/Home/Banner.vue
index 7cebfd6c..7c683931 100644
--- a/packages/vuepress-theme-reco/src/client/components/Home/Banner.vue
+++ b/packages/vuepress-theme-reco/src/client/components/Home/Banner.vue
@@ -16,21 +16,11 @@
 </template>
 
 <script setup lang="ts">
+import { RecoThemeHomePageFrontmatter } from "../../../types";
 import { computed } from "vue";
 import { usePageFrontmatter, withBase } from 'vuepress/client'
 
-const frontmatter = usePageFrontmatter<{
-  banner: {
-    tagline?: string
-    heroText?: string
-    buttons?: Array<Record<string, any>>
-    socialLinks?: Array<Record<string, any>>
-    heroImage?: string
-    heroImageStyle?: Record<string, string>
-    bgImage?: string
-    bgImageStyle?: Record<string, string>
-  }
-}>()
+const frontmatter = usePageFrontmatter<RecoThemeHomePageFrontmatter>()
 
 const heroImage = computed(() => {
   return frontmatter.value?.banner?.heroImage
diff --git a/packages/vuepress-theme-reco/src/client/components/Home/BannerBrand.vue b/packages/vuepress-theme-reco/src/client/components/Home/BannerBrand.vue
index e7073948..bcdcd99b 100644
--- a/packages/vuepress-theme-reco/src/client/components/Home/BannerBrand.vue
+++ b/packages/vuepress-theme-reco/src/client/components/Home/BannerBrand.vue
@@ -35,19 +35,10 @@
 import { computed } from "vue";
 import { usePageFrontmatter, withBase } from 'vuepress/client'
 import Link from '../Link.vue'
-import { createOneColor } from '../../utils/index.js'
+import { createOneColor } from '@utils/index.js'
+import { RecoThemeHomePageFrontmatter } from "../../../types";
 
-const frontmatter = usePageFrontmatter<{
-  bannerBrand: {
-    heroImage?: string
-    buttons?: Array<Record<string, any>>
-    socialLinks?: Array<Record<string, any>>
-    heroImageStyle?: Record<string, any>
-    bgImage?: string
-    bgImageStyle?: Record<string, any>
-    [key: string]: any
-  }
-}>()
+const frontmatter = usePageFrontmatter<RecoThemeHomePageFrontmatter>()
 
 const heroImage = computed(() => {
   return frontmatter.value?.bannerBrand?.heroImage
diff --git a/packages/vuepress-theme-reco/src/client/components/Home/Footer.vue b/packages/vuepress-theme-reco/src/client/components/Home/Footer.vue
index e49ab71a..f4a28531 100644
--- a/packages/vuepress-theme-reco/src/client/components/Home/Footer.vue
+++ b/packages/vuepress-theme-reco/src/client/components/Home/Footer.vue
@@ -47,10 +47,10 @@
 
 <script setup>
 import { defineComponent, computed } from 'vue'
-import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
-import { usePageFrontmatter, useRouteLocale } from 'vuepress/client'
-import { useComment } from '@vuepress-reco/vuepress-plugin-comments/lib/client/composables'
+import { useRouteLocale } from 'vuepress/client'
 import packageInfo from 'vuepress-theme-reco/package.json'
+import { useThemeLocaleData, usePageFrontmatter } from '@composables/index.js'
+import { useComment } from '@vuepress-reco/vuepress-plugin-comments/lib/client/composables'
 
 const routeLocale = useRouteLocale()
 const themeLocal = useThemeLocaleData()
diff --git a/packages/vuepress-theme-reco/src/client/components/Home/index.vue b/packages/vuepress-theme-reco/src/client/components/Home/index.vue
index 346ad725..f3626c33 100644
--- a/packages/vuepress-theme-reco/src/client/components/Home/index.vue
+++ b/packages/vuepress-theme-reco/src/client/components/Home/index.vue
@@ -17,6 +17,7 @@ import MdContent from './MdContent.vue'
 import Comment from './Comment.vue'
 import Footer from './Footer.vue'
 import Features from './Features.vue'
+import { RecoThemeHomePageFrontmatter } from '../../../types'
 
 export default defineComponent({
   name: 'HomeWrapper',
@@ -36,8 +37,5 @@ export default defineComponent({
 <script setup lang="ts">
 import { usePageFrontmatter } from 'vuepress/client'
 
-const frontmatter = usePageFrontmatter<{
-  modules?: [string],
-  [key: string]: unknown
-}>()
+const frontmatter = usePageFrontmatter<RecoThemeHomePageFrontmatter>()
 </script>
diff --git a/packages/vuepress-theme-reco/src/client/components/Link.vue b/packages/vuepress-theme-reco/src/client/components/Link.vue
index b15c9fe3..2cbb5f31 100644
--- a/packages/vuepress-theme-reco/src/client/components/Link.vue
+++ b/packages/vuepress-theme-reco/src/client/components/Link.vue
@@ -31,13 +31,15 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, toRefs } from 'vue'
-import type { PropType } from 'vue'
 import { useRoute } from 'vue-router'
-import { useSiteLocaleData, useRouteLocale } from 'vuepress/client'
+import { computed, defineComponent, toRefs } from 'vue'
 import { isLinkHttp, isLinkWithProtocol } from 'vuepress/shared'
+import { useSiteLocaleData, useRouteLocale } from 'vuepress/client'
+
+import { useThemeLocaleData } from '@composables/index.js'
+
+import type { PropType } from 'vue'
 import type { NavLink } from '../../types'
-import { useThemeLocaleData } from '../composables/index.js'
 
 export default defineComponent({
   name: 'Link',
diff --git a/packages/vuepress-theme-reco/src/client/components/Navbar.vue b/packages/vuepress-theme-reco/src/client/components/Navbar.vue
index b7f5713a..b05bf287 100644
--- a/packages/vuepress-theme-reco/src/client/components/Navbar.vue
+++ b/packages/vuepress-theme-reco/src/client/components/Navbar.vue
@@ -18,14 +18,15 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent, computed, ref, onMounted } from 'vue'
-import { useRouteLocale, useSiteLocaleData, withBase } from 'vuepress/client'
-import ToggleDarkModeButton from './ToggleDarkModeButton.vue'
-import NavbarLinks from './NavbarLinks.vue'
-import { useThemeLocaleData, useSeriesItems } from '../composables/index.js'
+import { computed, ref, onMounted } from 'vue'
+import { useRouteLocale, useSiteLocaleData } from 'vuepress/client'
+
 import Xicons from './global/Xicons.vue'
 import SiteBrand from './SiteBrand.vue'
 import { throttle } from '../utils/index.js'
+import NavbarLinks from './NavbarLinks.vue'
+import ToggleDarkModeButton from './ToggleDarkModeButton.vue'
+import { useThemeLocaleData, useSeriesItems } from '@composables/index.js'
 
 const seriesItems = useSeriesItems()
 const siteLocale = useSiteLocaleData()
diff --git a/packages/vuepress-theme-reco/src/client/components/NavbarLinks.vue b/packages/vuepress-theme-reco/src/client/components/NavbarLinks.vue
index 7166d5af..674ca280 100644
--- a/packages/vuepress-theme-reco/src/client/components/NavbarLinks.vue
+++ b/packages/vuepress-theme-reco/src/client/components/NavbarLinks.vue
@@ -1,31 +1,39 @@
 <template>
   <nav v-if="navbarLinks.length" class="navbar-links">
-    <div v-for="item in navbarLinks" :key="item.link" class="navbar-links__item">
+    <div v-for="(item, index) in navbarLinks" :key="index" class="navbar-links__item">
       <template v-if="item.children">
-        <DropdownLink :item="item" />
+        <DropdownLink :item="item as NavGroup<ResolvedNavbarItem>" />
       </template>
 
       <template v-else>
-        <Link :item="item" />
+        <Link :item="item as NavLink" />
       </template>
     </div>
   </nav>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
-import type { ComputedRef } from 'vue'
 import { useRouter } from 'vue-router'
-import { useRouteLocale, useSiteLocaleData } from 'vuepress/client'
 import { isString } from 'vuepress/shared'
-import type { NavbarItem, NavbarGroup, ResolvedNavbarItem } from '../../types'
-import { getNavLink } from '../composables/index.js'
-import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
-import { useExtendPageData } from '@vuepress-reco/vuepress-plugin-page/lib/client/composable/index.js'
+import { computed, defineComponent } from 'vue'
 import { convertToPinyin } from '@vuepress-reco/shared'
-import { resolveRepoType } from '../utils/index.js'
-import DropdownLink from './DropdownLink.vue'
+import { useRouteLocale, useSiteLocaleData } from 'vuepress/client'
+import { getNavLink, useThemeLocaleData } from '@composables/index.js'
+import { useExtendPageData } from '@vuepress-reco/vuepress-plugin-page/lib/client/composable/index.js'
+
 import Link from './Link.vue'
+import DropdownLink from './DropdownLink.vue'
+import { resolveRepoType } from '../utils/index.js'
+
+import type { ComputedRef } from 'vue'
+import type {
+  NavLink,
+  NavGroup,
+  NavbarItem,
+  NavbarGroup,
+  ResolvedNavbarItem,
+  AutoAddCategoryToNavbarOptions,
+} from '../../types'
 
 /**
  * Get navbar config of select language dropdown
@@ -157,7 +165,7 @@ const useNavbarConfig = (): ComputedRef<ResolvedNavbarItem[]> => {
   const parseCategories = computed(() => {
     return [
       {
-        text: themeLocal.value.autoAddCategoryToNavbar?.categoryText || 'Categories',
+        text: (themeLocal.value.autoAddCategoryToNavbar as AutoAddCategoryToNavbarOptions)?.categoryText || 'Categories',
         children: Object.values(categorySummary?.categories?.items || {}).map((c) => ({
           // @ts-ignore
           text: c.label,
@@ -166,7 +174,7 @@ const useNavbarConfig = (): ComputedRef<ResolvedNavbarItem[]> => {
         }))
       },
       {
-        text: themeLocal.value.autoAddCategoryToNavbar?.tagText || 'Tags',
+        text: (themeLocal.value.autoAddCategoryToNavbar as AutoAddCategoryToNavbarOptions)?.tagText || 'Tags',
         children: Object.values(categorySummary?.tags?.items || {}).map(t => ({
           // @ts-ignore
           text: t.label,
@@ -182,7 +190,7 @@ const useNavbarConfig = (): ComputedRef<ResolvedNavbarItem[]> => {
 
     if (themeLocal.value.autoAddCategoryToNavbar) {
       navItems.splice(
-        themeLocal.value.autoAddCategoryToNavbar?.location || 0,
+        (themeLocal.value.autoAddCategoryToNavbar as AutoAddCategoryToNavbarOptions)?.location || 0,
         0,
         ...parseCategories.value
       )
@@ -205,7 +213,7 @@ export default defineComponent({
     const navbarSelectLanguage = useNavbarSelectLanguage()
     const navbarRepo = useNavbarRepo()
 
-    const navbarLinks = computed(() => [
+    const navbarLinks: ComputedRef<Array<ResolvedNavbarItem>> = computed(() => [
       ...navbarConfig.value,
       ...navbarSelectLanguage.value,
       ...navbarRepo.value,
diff --git a/packages/vuepress-theme-reco/src/client/components/Page/hook.ts b/packages/vuepress-theme-reco/src/client/components/Page/hook.ts
index 7d9d2e5e..646173f8 100644
--- a/packages/vuepress-theme-reco/src/client/components/Page/hook.ts
+++ b/packages/vuepress-theme-reco/src/client/components/Page/hook.ts
@@ -1,6 +1,6 @@
 import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
-import { usePageFrontmatter } from 'vuepress/client'
+import { usePageFrontmatter } from '@composables/index.js'
 
 let PAGE_PASSWORD_PASS = 'PAGE_PASSWORD_PASS'
 export function usePassword() {
diff --git a/packages/vuepress-theme-reco/src/client/components/PageMeta.vue b/packages/vuepress-theme-reco/src/client/components/PageMeta.vue
index 6f759080..857c6e5a 100644
--- a/packages/vuepress-theme-reco/src/client/components/PageMeta.vue
+++ b/packages/vuepress-theme-reco/src/client/components/PageMeta.vue
@@ -1,50 +1,38 @@
 <template>
   <footer class="page-meta">
     <div v-if="editNavLink" class="meta-item edit-link">
-      <Xicons
-        class="meta-item-label"
-        :icon="editNavLink.icon"
-        :text="editNavLink.text"
-        :link="editNavLink.link"
-        target="_blank"
-        icon-size="20"
-        text-size="14"
-      />
+      <Xicons class="meta-item-label" :icon="editNavLink.icon" :text="editNavLink.text" :link="editNavLink.link"
+        target="_blank" icon-size="20" text-size="14" />
     </div>
 
     <div v-if="lastUpdated" class="meta-item last-updated">
-      <Xicons
-        class="meta-item-label"
-        icon="Calendar"
-        :text="`${themeLocal.lastUpdatedText || 'Last Updated'} ${lastUpdated}`"
-        icon-size="20"
-        text-size="14"
-      />
+      <Xicons class="meta-item-label" icon="Calendar"
+        :text="`${themeLocal.lastUpdatedText || 'Last Updated'} ${lastUpdated}`" icon-size="20" text-size="14" />
     </div>
   </footer>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
-import type { ComputedRef } from 'vue'
 import {
   usePageData,
-  usePageFrontmatter,
   useSiteLocaleData,
 } from 'vuepress/client'
+import { useThemeLocaleData, usePageFrontmatter } from '@composables/index.js'
+
+import Link from './Link.vue'
+import { resolveEditLink } from '@utils/index.js'
+
+import type { ComputedRef } from 'vue'
 import type {
   RecoThemePageData,
-  RecoThemeNormalPageFrontmatter,
   NavLink as NavLinkType,
 } from '../../types'
-import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
-import { resolveEditLink } from '../utils/index.js'
-import Link from './Link.vue'
 
 const useEditNavLink = (): ComputedRef<null | NavLinkType> => {
   const themeLocal = useThemeLocaleData()
   const page = usePageData<RecoThemePageData>()
-  const frontmatter = usePageFrontmatter<RecoThemeNormalPageFrontmatter>()
+  const frontmatter = usePageFrontmatter()
 
   return computed(() => {
     const showEditLink =
@@ -87,7 +75,7 @@ const useLastUpdated = (): ComputedRef<null | string> => {
   const siteLocale = useSiteLocaleData()
   const themeLocal = useThemeLocaleData()
   const page = usePageData<RecoThemePageData>()
-  const frontmatter = usePageFrontmatter<RecoThemeNormalPageFrontmatter>()
+  const frontmatter = usePageFrontmatter()
 
   return computed(() => {
     const showLastUpdated =
diff --git a/packages/vuepress-theme-reco/src/client/components/PageNav.vue b/packages/vuepress-theme-reco/src/client/components/PageNav.vue
index 0d30aed7..44599da2 100644
--- a/packages/vuepress-theme-reco/src/client/components/PageNav.vue
+++ b/packages/vuepress-theme-reco/src/client/components/PageNav.vue
@@ -17,14 +17,13 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { usePageFrontmatter } from 'vuepress/client'
 import { isPlainObject, isString } from 'vuepress/shared'
 import type {
   RecoThemeNormalPageFrontmatter,
   NavLink as NavLinkType,
   ResolvedSeriesItem,
 } from '../../types'
-import { getNavLink, useSeriesItems } from '../composables/index.js'
+import { getNavLink, useSeriesItems, usePageFrontmatter } from '@composables/index.js'
 import Link from './Link.vue'
 
 /**
@@ -88,7 +87,7 @@ export default defineComponent({
   components: { Link },
 
   setup() {
-    const frontmatter = usePageFrontmatter<RecoThemeNormalPageFrontmatter>()
+    const frontmatter = usePageFrontmatter()
     const seriesItems = useSeriesItems()
     const route = useRoute()
     const router = useRouter()
diff --git a/packages/vuepress-theme-reco/src/client/components/PagePassword/hook.ts b/packages/vuepress-theme-reco/src/client/components/PagePassword/hook.ts
index d341b95a..355408fb 100644
--- a/packages/vuepress-theme-reco/src/client/components/PagePassword/hook.ts
+++ b/packages/vuepress-theme-reco/src/client/components/PagePassword/hook.ts
@@ -1,6 +1,6 @@
 import { ref, watch, computed } from 'vue'
 import { md5 } from '@vuepress-reco/shared'
-import { usePageFrontmatter } from 'vuepress/client'
+import { usePageFrontmatter } from '@composables/index.js'
 
 export function usePageInfo() {
   const frontmatter = usePageFrontmatter()
diff --git a/packages/vuepress-theme-reco/src/client/components/Password/hook.ts b/packages/vuepress-theme-reco/src/client/components/Password/hook.ts
index 84387c42..d75be531 100644
--- a/packages/vuepress-theme-reco/src/client/components/Password/hook.ts
+++ b/packages/vuepress-theme-reco/src/client/components/Password/hook.ts
@@ -1,7 +1,7 @@
 import { ref, watch, computed } from 'vue'
 import { md5 } from '@vuepress-reco/shared'
 import { useSiteLocaleData } from 'vuepress/client'
-import { useThemeLocaleData } from '../../composables/index.js'
+import { useThemeLocaleData } from '@composables/index.js'
 
 export function useSiteInfo() {
   const siteLocale = useSiteLocaleData()
diff --git a/packages/vuepress-theme-reco/src/client/components/PersonalInfo.vue b/packages/vuepress-theme-reco/src/client/components/PersonalInfo.vue
index 42ed9384..96a82788 100644
--- a/packages/vuepress-theme-reco/src/client/components/PersonalInfo.vue
+++ b/packages/vuepress-theme-reco/src/client/components/PersonalInfo.vue
@@ -3,7 +3,7 @@
   <img
     class="personal-img"
     v-if="themeLocal.authorAvatar"
-    :src="$withBase(themeLocal.authorAvatar)"
+    :src="withBase(themeLocal.authorAvatar)"
     alt="author-avatar"
   >
   <p
@@ -27,23 +27,19 @@
 </div>
 </template>
 
-<script>
-import { defineComponent, computed } from 'vue'
-import { createOneColor } from '../utils/index.js'
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { createOneColor } from '@utils/index.js'
 import { withBase, usePageFrontmatter } from 'vuepress/client'
-import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
+import { useThemeLocaleData } from '@composables/index.js'
 
-export default defineComponent({
-  setup (props, ctx) {
-    const themeLocal = useThemeLocaleData()
-    const frontmatter = usePageFrontmatter()
+import type { RecoThemeHomePageFrontmatter } from '../../types'
 
-    const socialLinks = computed(() => (frontmatter.value?.blog?.socialLinks || []).map(item => {
-      if (!item.color) item.color = createOneColor()
-      return item
-    }))
+const themeLocal = useThemeLocaleData()
 
-    return { themeLocal, socialLinks }
-  }
-})
+const frontmatter = usePageFrontmatter<RecoThemeHomePageFrontmatter>()
+const socialLinks = computed(() => (frontmatter.value?.blog?.socialLinks || []).map(item => {
+  if (!item.color) item.color = createOneColor()
+  return item
+}))
 </script>
diff --git a/packages/vuepress-theme-reco/src/client/components/Series.vue b/packages/vuepress-theme-reco/src/client/components/Series.vue
index 502ca6a1..53836308 100644
--- a/packages/vuepress-theme-reco/src/client/components/Series.vue
+++ b/packages/vuepress-theme-reco/src/client/components/Series.vue
@@ -1,16 +1,24 @@
 <template>
   <aside class="series-container">
     <SiteBrand />
-    <SeriesItem v-for="item in sortedSeries" :item="item" :key="item.link || item.text" />
+    <SeriesItem
+      v-for="item in sortedSeries"
+      :item="item"
+      :key="item.link || item.text"
+    />
   </aside>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { useThemeLocaleData } from '@vuepress/plugin-theme-data/client'
-import { useSeriesItems, useSortSeries } from '../composables/index.js'
-import { SeriesItem } from './SeriesItem.js'
+import { computed } from 'vue'
+
+import {
+  useSeriesItems,
+  useSortSeries,
+  useThemeLocaleData,
+} from '@composables/index.js'
 import SiteBrand from './SiteBrand.vue'
+import { SeriesItem } from './SeriesItem.js'
 
 const themeLocal = useThemeLocaleData()
 const { sortSeries } = useSortSeries()
diff --git a/packages/vuepress-theme-reco/src/client/composables/index.ts b/packages/vuepress-theme-reco/src/client/composables/index.ts
index 3695cd05..84773ce3 100644
--- a/packages/vuepress-theme-reco/src/client/composables/index.ts
+++ b/packages/vuepress-theme-reco/src/client/composables/index.ts
@@ -1,13 +1,14 @@
+export * from './useMobile.js'
+export * from './getNavLink.js'
 export * from './useInstance.js'
+export * from './usePageData.js'
 export * from './useMagicCard.js'
-export * from './useMobile.js'
+export * from './useThemeData.js'
+export * from './useSeriesData.js'
+export * from './useSortSeries.js'
 export * from './useMobileMenus.js'
-export * from './getNavLink.js'
 export * from './usePageCatalog.js'
-export * from './useResolveRouteWithRedirect.js'
-export * from './useScrollDirection.js'
-export * from './useScrollPromise.js'
-export * from './useSeriesData.js'
 export * from './useSeriesItems.js'
-export * from './useSortSeries.js'
-export * from './useThemeData.js'
+export * from './useScrollPromise.js'
+export * from './useScrollDirection.js'
+export * from './useResolveRouteWithRedirect.js'
diff --git a/packages/vuepress-theme-reco/src/client/composables/usePageData.ts b/packages/vuepress-theme-reco/src/client/composables/usePageData.ts
new file mode 100644
index 00000000..8d718e20
--- /dev/null
+++ b/packages/vuepress-theme-reco/src/client/composables/usePageData.ts
@@ -0,0 +1,13 @@
+import {
+  usePageData as _usePageData,
+  usePageFrontmatter as _usePageFrontmatter,
+} from 'vuepress/client'
+
+import type {
+  RecoThemePageData,
+  RecoThemeNormalPageFrontmatter,
+} from '../../types'
+import { Ref } from 'vue'
+
+export const usePageData = (): Ref<RecoThemePageData> => _usePageData<RecoThemePageData>()
+export const usePageFrontmatter = (): Ref<RecoThemeNormalPageFrontmatter> => _usePageFrontmatter<RecoThemeNormalPageFrontmatter>()
diff --git a/packages/vuepress-theme-reco/src/client/composables/useSeriesData.ts b/packages/vuepress-theme-reco/src/client/composables/useSeriesData.ts
index 760fde3d..7278a975 100644
--- a/packages/vuepress-theme-reco/src/client/composables/useSeriesData.ts
+++ b/packages/vuepress-theme-reco/src/client/composables/useSeriesData.ts
@@ -1,6 +1,6 @@
 import { ref, computed, watch } from 'vue'
 import { usePageFrontmatter } from 'vuepress/client'
-import { useSeriesItems, usePageCatalog } from './index.js'
+import { useSeriesItems, usePageCatalog,  } from './index.js'
 
 export const useSeriesData: () => any = () => {
   const isOpenSeries = ref(false)
diff --git a/packages/vuepress-theme-reco/src/client/layouts/Layout.vue b/packages/vuepress-theme-reco/src/client/layouts/Layout.vue
index fe4b54f9..7fdeeedc 100644
--- a/packages/vuepress-theme-reco/src/client/layouts/Layout.vue
+++ b/packages/vuepress-theme-reco/src/client/layouts/Layout.vue
@@ -10,9 +10,7 @@
         @before-enter="onBeforeEnter"
         @before-leave="onBeforeLeave"
       >
-        <Page
-          :key="page.path"
-        />
+        <Page />
       </Transition>
     </Common>
   </div>
@@ -21,15 +19,20 @@
 <script lang="ts" setup>
 import { onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import { usePageFrontmatter, usePageData } from 'vuepress/client'
 
 import Home from '../components/Home/index.vue'
 import Page from '../components/Page/index.vue'
 import Common from '../components/Common/index.vue'
-import { useScrollPromise, useMagicCard } from '../composables/index.js'
+import {
+  usePageData,
+  useMagicCard,
+  useScrollPromise,
+} from '@composables/index.js'
+import { usePageFrontmatter } from 'vuepress/client'
+import { RecoThemeHomePageFrontmatter } from '../../types'
 
 const page = usePageData()
-const frontmatter = usePageFrontmatter()
+const frontmatter = usePageFrontmatter<RecoThemeHomePageFrontmatter>()
 
 // handle scrollBehavior with transition
 const scrollPromise = useScrollPromise()
diff --git a/packages/vuepress-theme-reco/src/client/layouts/NotFound.vue b/packages/vuepress-theme-reco/src/client/layouts/NotFound.vue
index 0ce39015..7fe79ab7 100644
--- a/packages/vuepress-theme-reco/src/client/layouts/NotFound.vue
+++ b/packages/vuepress-theme-reco/src/client/layouts/NotFound.vue
@@ -14,8 +14,8 @@
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
 import { useRouteLocale } from 'vuepress/client';
-import Common from '../components/Common/index.vue'
-import { useThemeLocaleData } from '../composables/index.js';
+import Common from '@components/Common/index.vue'
+import { useThemeLocaleData } from '@composables/index.js';
 
 const router = useRouter()
 const routeLocale = useRouteLocale()
diff --git a/packages/vuepress-theme-reco/src/node/recoTheme.ts b/packages/vuepress-theme-reco/src/node/recoTheme.ts
index adc42f4e..c658d7fd 100644
--- a/packages/vuepress-theme-reco/src/node/recoTheme.ts
+++ b/packages/vuepress-theme-reco/src/node/recoTheme.ts
@@ -1,6 +1,6 @@
 import { path, fs, getDirname } from 'vuepress/utils'
 
-import { getPlugins } from './resolvePlugins.js'
+import { resolveBuildInPlugins } from './resolvePlugins.js'
 import { injectiBuilderOptionsOfRecoTheme } from './resolveBundlerConfig.js'
 
 import type { Theme, Page } from 'vuepress/core'
@@ -9,7 +9,7 @@ import type { RecoThemePageData } from '../types/page'
 const __dirname = getDirname(import.meta.url)
 
 export const recoTheme = (themeConfig: Record<string, unknown>): Theme => {
-  const plugins = getPlugins(themeConfig)
+  const plugins = resolveBuildInPlugins(themeConfig)
 
   return {
     name: 'vuepress-theme-reco',
@@ -27,15 +27,13 @@ export const recoTheme = (themeConfig: Record<string, unknown>): Theme => {
 
     clientConfigFile: path.resolve(__dirname, '../client/config.js'),
 
-    alias: Object.fromEntries(
-      fs
-        .readdirSync(path.resolve(__dirname, '../client/components'))
-        .filter((file) => file.endsWith('.vue'))
-        .map((file) => [
-          `@theme/${file}`,
-          path.resolve(__dirname, '../client/components', file),
-        ])
-    ),
+    alias: {
+      '@types': path.resolve(__dirname, '../types'),
+      '@client': path.resolve(__dirname, '../client'),
+      '@utils': path.resolve(__dirname, '../client/utils'),
+      '@components': path.resolve(__dirname, '../client/components'),
+      '@composables': path.resolve(__dirname, '../client/composables'),
+    },
 
     extendsPage: (page: Page<Partial<RecoThemePageData>>) => {
       // save relative file path into page data to generate edit link
diff --git a/packages/vuepress-theme-reco/src/node/resolvePlugins.ts b/packages/vuepress-theme-reco/src/node/resolvePlugins.ts
index a47b567d..2b748b38 100644
--- a/packages/vuepress-theme-reco/src/node/resolvePlugins.ts
+++ b/packages/vuepress-theme-reco/src/node/resolvePlugins.ts
@@ -29,7 +29,9 @@ import { bulletinPopoverPlugin } from '@vuepress-reco/vuepress-plugin-bulletin-p
 import { pages } from './pages.js'
 import { resolveContainerOptions } from './resolveContainer.js'
 
-export const getPlugins = (themeConfig) => {
+import type { Plugin } from 'vuepress/core'
+
+export const resolveBuildInPlugins = (themeConfig): Array<Plugin> => {
   const plugins = [
     gitPlugin(),
     palettePlugin(),
diff --git a/packages/vuepress-theme-reco/src/types/models.d.ts b/packages/vuepress-theme-reco/src/types/models.d.ts
index 90616c1a..f56b6231 100644
--- a/packages/vuepress-theme-reco/src/types/models.d.ts
+++ b/packages/vuepress-theme-reco/src/types/models.d.ts
@@ -1,2 +1,2 @@
-declare module '@vuepress/plugin-theme-data/client'
+// declare module '@vuepress/plugin-theme-data/client'
 declare module '@vuepress-reco/vuepress-plugin-code-copy/lib/client/composables/initCopyBtn'
diff --git a/packages/vuepress-theme-reco/src/types/options.ts b/packages/vuepress-theme-reco/src/types/options.ts
index cfb320fd..81f35454 100644
--- a/packages/vuepress-theme-reco/src/types/options.ts
+++ b/packages/vuepress-theme-reco/src/types/options.ts
@@ -12,7 +12,12 @@ export interface RecoThemeLocaleData extends LocaleData {
    */
   home?: string
 
-  colorMode?: 'light' | 'dark'
+  /**
+   * Default color mode
+   *
+   * @default 'auto'
+   */
+  colorMode?: 'light' | 'dark' | 'auto'
 
   password?: string | Array<string>
 
@@ -126,4 +131,46 @@ export interface RecoThemeLocaleData extends LocaleData {
    * The text to replace the default "Last Updated"
    */
   lastUpdatedText?: string
+
+
+  /**
+   * The Name of author
+   */
+  author?: string
+
+
+  /**
+   * The avatar of author
+   */
+  authorAvatar?: string
+
+  /**
+   * Friendship links
+   */
+  friendshipLinks?: Array<{
+    logo: string
+    link: string
+    title: string
+  }>
+
+  autoSetSeries: boolean
+
+  /**
+   * Auto set categories
+   *
+   * @default false
+   */
+  autoSetBlogCategories?: boolean
+
+  /**
+   * Automatically add categories and tags to the header navigation bar
+   * when autoAddCategoryToNavbar is true, all defaults are taken.
+   */
+  autoAddCategoryToNavbar?: boolean | AutoAddCategoryToNavbarOptions
+}
+
+export type AutoAddCategoryToNavbarOptions = {
+  location: number // default 0
+  categoryText: string // default categories
+  tagText: string // default tags
 }
diff --git a/packages/vuepress-theme-reco/src/types/page.ts b/packages/vuepress-theme-reco/src/types/page.ts
index 7f3601bd..998bd497 100644
--- a/packages/vuepress-theme-reco/src/types/page.ts
+++ b/packages/vuepress-theme-reco/src/types/page.ts
@@ -1,8 +1,24 @@
 import type { GitPluginPageData } from '@vuepress/plugin-git'
-import type { NavLink, SeriesConfig } from './nav.js'
+import type { NavLink } from './nav.js'
+
+export interface HeaderItem {
+  slug: string
+  link: string
+  level: number
+  title: string
+  children: Array<HeaderItem>
+}
 
 export interface RecoThemePageData extends GitPluginPageData {
   filePathRelative: string | null
+  headers: Array<HeaderItem>
+  // path?: string
+}
+
+export interface SocialLink {
+  icon: string
+  link?: string
+  color?: string
 }
 
 export interface RecoThemePageFrontmatter {
@@ -35,22 +51,23 @@ interface Banner {
 }
 
 interface Button {
+  icon?: string
   text?: string
   link?: string
   type?: 'plain' | 'link'
 }
 
-interface SocialLink {
-  icon?: string
-  link?: string
-}
-
 interface BannerBrand {
   title?: string
   description?: string
   tagline?: string
   buttons?: Button[]
   socialLinks?: SocialLink[]
+  heroImage?: string
+  heroImageStyle?: Record<string, any>
+  bgImage?: string
+  bgImageStyle?: Record<string, any>
+  [key: string]: any
 }
 
 interface Blog {
diff --git a/packages/vuepress-theme-reco/tsconfig.build.json b/packages/vuepress-theme-reco/tsconfig.build.json
index 888582f4..fa6ca89f 100644
--- a/packages/vuepress-theme-reco/tsconfig.build.json
+++ b/packages/vuepress-theme-reco/tsconfig.build.json
@@ -5,7 +5,12 @@
     "rootDir": "./src",
     "outDir": "./lib",
     "paths": {
-      "@theme/*": ["./src/client/components/*"]
+      "@types/*": ["./src/types/*"],
+      "@client/*": ["./src/client/*"],
+      "@utils/*": ["./src/client/utils/*"],
+      "@theme/*": ["./src/client/components/*"],
+      "@components/*": ["./src/client/components/*"],
+      "@composables/*": ["./src/client/composables/*"],
     },
   },
   "include": ["./src"]