From 8ecaaf1c450bda38e3044e3853b873f184ba5842 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sat, 15 Jun 2024 14:43:07 +0800
Subject: [PATCH] chore: tweak

---
 .../themes/components/HeroTintPlateConfig.vue |  4 +--
 .../src/client/components/Blog/VPPostList.vue |  2 +-
 .../components/Home/{Home.vue => VPHome.vue}  | 36 +++++++++----------
 .../Home/{HomeBanner.vue => VPHomeBanner.vue} | 26 +++++++-------
 .../Home/{HomeBox.vue => VPHomeBox.vue}       | 13 ++++---
 .../Home/{HomeCustom.vue => VPHomeCustom.vue} |  8 ++---
 .../{HomeFeature.vue => VPHomeFeature.vue}    |  6 ++--
 .../{HomeFeatures.vue => VPHomeFeatures.vue}  | 12 +++----
 .../Home/{HomeHero.vue => VPHomeHero.vue}     | 24 ++++++-------
 .../{HomeProfile.vue => VPHomeProfile.vue}    | 20 +++++------
 ...{HomeTextImage.vue => VPHomeTextImage.vue} | 16 ++++-----
 theme/src/client/components/VPContent.vue     |  4 +--
 theme/src/client/config.ts                    |  6 ++--
 theme/src/client/index.ts                     | 25 ++++++++-----
 14 files changed, 105 insertions(+), 97 deletions(-)
 rename theme/src/client/components/Home/{Home.vue => VPHome.vue} (77%)
 rename theme/src/client/components/Home/{HomeBanner.vue => VPHomeBanner.vue} (88%)
 rename theme/src/client/components/Home/{HomeBox.vue => VPHomeBox.vue} (89%)
 rename theme/src/client/components/Home/{HomeCustom.vue => VPHomeCustom.vue} (59%)
 rename theme/src/client/components/Home/{HomeFeature.vue => VPHomeFeature.vue} (96%)
 rename theme/src/client/components/Home/{HomeFeatures.vue => VPHomeFeatures.vue} (92%)
 rename theme/src/client/components/Home/{HomeHero.vue => VPHomeHero.vue} (88%)
 rename theme/src/client/components/Home/{HomeProfile.vue => VPHomeProfile.vue} (82%)
 rename theme/src/client/components/Home/{HomeTextImage.vue => VPHomeTextImage.vue} (90%)

diff --git a/docs/.vuepress/themes/components/HeroTintPlateConfig.vue b/docs/.vuepress/themes/components/HeroTintPlateConfig.vue
index 8f941a9a..d147644c 100644
--- a/docs/.vuepress/themes/components/HeroTintPlateConfig.vue
+++ b/docs/.vuepress/themes/components/HeroTintPlateConfig.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import HomeHero from 'vuepress-theme-plume/components/Home/HomeHero.vue'
+import VPHomeHero from 'vuepress-theme-plume/components/Home/VPHomeHero.vue'
 import { useDarkMode } from 'vuepress-theme-plume/composables'
 import type { PlumeThemeHomeHeroTintPlate } from 'vuepress-theme-plume/client'
 import { computed, ref, watch } from 'vue'
@@ -74,7 +74,7 @@ const output = computed(() => {
     <h4>效果预览：</h4>
     <div :class="{ dark: isDark }">
       <DemoWrapper>
-        <HomeHero type="hero" background="tint-plate" :tint-plate="tintPlate" :hero="hero" />
+        <VPHomeHero type="hero" background="tint-plate" :tint-plate="tintPlate" :hero="hero" />
       </DemoWrapper>
     </div>
     <p>
diff --git a/theme/src/client/components/Blog/VPPostList.vue b/theme/src/client/components/Blog/VPPostList.vue
index d20c5f14..29e8dbf7 100644
--- a/theme/src/client/components/Blog/VPPostList.vue
+++ b/theme/src/client/components/Blog/VPPostList.vue
@@ -42,7 +42,7 @@ const {
 .vp-blog-post-list {
   flex: 1;
   padding-top: 32px;
-  padding-bottom: 64px;
+  padding-bottom: 36px;
   margin: 0 auto;
 }
 </style>
diff --git a/theme/src/client/components/Home/Home.vue b/theme/src/client/components/Home/VPHome.vue
similarity index 77%
rename from theme/src/client/components/Home/Home.vue
rename to theme/src/client/components/Home/VPHome.vue
index 52822733..1a32a263 100644
--- a/theme/src/client/components/Home/Home.vue
+++ b/theme/src/client/components/Home/VPHome.vue
@@ -1,21 +1,21 @@
 <script lang="ts" setup>
 import { type Component, computed, nextTick, onUnmounted, resolveComponent, watch } from 'vue'
 import { useData } from '../../composables/data.js'
-import HomeBanner from './HomeBanner.vue'
-import HomeHero from './HomeHero.vue'
-import HomeFeatures from './HomeFeatures.vue'
-import HomeTextImage from './HomeTextImage.vue'
-import HomeProfile from './HomeProfile.vue'
-import HomeCustom from './HomeCustom.vue'
+import VPHomeBanner from './VPHomeBanner.vue'
+import VPHomeHero from './VPHomeHero.vue'
+import VPHomeFeatures from './VPHomeFeatures.vue'
+import VPHomeTextImage from './VPHomeTextImage.vue'
+import VPHomeProfile from './VPHomeProfile.vue'
+import VPHomeCustom from './VPHomeCustom.vue'
 
 const components: Record<string, Component<any, any, any>> = {
-  'banner': HomeBanner,
-  'hero': HomeHero,
-  'features': HomeFeatures,
-  'text-image': HomeTextImage,
-  'image-text': HomeTextImage,
-  'profile': HomeProfile,
-  'custom': HomeCustom,
+  'banner': VPHomeBanner,
+  'hero': VPHomeHero,
+  'features': VPHomeFeatures,
+  'text-image': VPHomeTextImage,
+  'image-text': VPHomeTextImage,
+  'profile': VPHomeProfile,
+  'custom': VPHomeCustom,
 }
 
 const DEFAULT_HERO = {
@@ -71,7 +71,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="plume-home">
+  <div class="vp-home">
     <template
       v-for="(item, index) in config"
       :key="item.type + index"
@@ -88,19 +88,19 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.plume-home {
+.vp-home {
   min-height: calc(100vh - var(--vp-nav-height) - var(--vp-footer-height, 0px));
 }
 
-.plume-home .layout {
+.vp-home .layout {
   transition: background-color var(--t-color);
 }
 
-.plume-home .layout:nth-child(odd) {
+.vp-home .layout:nth-child(odd) {
   background-color: var(--vp-c-bg-alt);
 }
 
-.plume-home .layout:nth-child(even) {
+.vp-home .layout:nth-child(even) {
   background-color: var(--vp-c-bg);
 }
 </style>
diff --git a/theme/src/client/components/Home/HomeBanner.vue b/theme/src/client/components/Home/VPHomeBanner.vue
similarity index 88%
rename from theme/src/client/components/Home/HomeBanner.vue
rename to theme/src/client/components/Home/VPHomeBanner.vue
index dff76673..23de6077 100644
--- a/theme/src/client/components/Home/HomeBanner.vue
+++ b/theme/src/client/components/Home/VPHomeBanner.vue
@@ -35,7 +35,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
 </script>
 
 <template>
-  <div class="home-banner" :style="bannerStyle">
+  <div class="vp-home-banner" :style="bannerStyle">
     <div class="banner-mask" :style="{ opacity: mask }" />
     <div class="container">
       <div class="content">
@@ -66,7 +66,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
 </template>
 
 <style scoped>
-.home-banner {
+.vp-home-banner {
   position: relative;
   width: 100%;
   min-height: calc(100vh - var(--vp-nav-height));
@@ -76,7 +76,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
   transition: all var(--t-color);
 }
 
-.home-banner .banner-mask {
+.vp-home-banner .banner-mask {
   position: absolute;
   top: 0;
   left: 0;
@@ -86,7 +86,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
   transition: opacity var(--t-color);
 }
 
-.home-banner .container {
+.vp-home-banner .container {
   position: relative;
   z-index: 1;
   display: flex;
@@ -97,19 +97,19 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
   margin: 0 auto;
 }
 
-.home-banner .content {
+.vp-home-banner .content {
   width: 100%;
   padding: 0 2rem;
 }
 
-.home-banner .content .hero-name {
+.vp-home-banner .content .hero-name {
   font-size: 72px;
   font-weight: 600;
   line-height: 1;
   color: var(--vp-c-text-hero-name);
 }
 
-.home-banner .content .hero-tagline {
+.vp-home-banner .content .hero-tagline {
   display: flex;
   align-items: center;
   margin-top: 1rem;
@@ -119,7 +119,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
   color: var(--vp-c-text-hero-tagline);
 }
 
-.home-banner .content .hero-tagline .line {
+.vp-home-banner .content .hero-tagline .line {
   display: inline-block;
   width: 80px;
   height: 0;
@@ -127,7 +127,7 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
   border-top: solid 1px var(--vp-c-text-hero-tagline);
 }
 
-.home-banner .content .hero-text {
+.vp-home-banner .content .hero-text {
   width: 100%;
   max-width: 700px;
   margin-top: 1.5rem;
@@ -138,23 +138,23 @@ const actions = computed(() => props.hero?.actions ?? matter.value.hero?.actions
 }
 
 @media (min-width: 960px) {
-  .home-banner .container {
+  .vp-home-banner .container {
     max-width: 768px;
     padding-top: 8rem;
   }
 
-  .home-banner .content .hero-name {
+  .vp-home-banner .content .hero-name {
     font-size: 100px;
   }
 }
 
 @media (min-width: 1440px) {
-  .home-banner .container {
+  .vp-home-banner .container {
     max-width: 1104px;
     padding-top: 8rem;
   }
 
-  .home-banner .content .hero-tagline {
+  .vp-home-banner .content .hero-tagline {
     font-size: 32px;
   }
 }
diff --git a/theme/src/client/components/Home/HomeBox.vue b/theme/src/client/components/Home/VPHomeBox.vue
similarity index 89%
rename from theme/src/client/components/Home/HomeBox.vue
rename to theme/src/client/components/Home/VPHomeBox.vue
index da34a045..508b2126 100644
--- a/theme/src/client/components/Home/HomeBox.vue
+++ b/theme/src/client/components/Home/VPHomeBox.vue
@@ -31,7 +31,7 @@ const containerClass = computed(() => normalizeClass(props.containerClass || '')
 </script>
 
 <template>
-  <div class="home-box" :class="{ full: props.full }" :style="styles">
+  <div class="vp-home-box" :class="{ full: props.full }" :style="styles">
     <slot name="before" />
     <div class="container" :class="containerClass">
       <slot />
@@ -41,34 +41,33 @@ const containerClass = computed(() => normalizeClass(props.containerClass || '')
 </template>
 
 <style>
-.home-box {
+.vp-home-box {
   position: relative;
   padding: 24px;
 }
 
 @media (min-width: 640px) {
-  .home-box {
+  .vp-home-box {
     padding: 32px 48px;
   }
 }
 
 @media (min-width: 960px) {
-  .home-box {
+  .vp-home-box {
     padding: 48px;
   }
 }
 
-.home-box .container {
+.vp-home-box .container {
   width: 100%;
   max-width: 1152px;
   margin: 0 auto;
 }
 
-.home-box.full {
+.vp-home-box.full {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: calc(100vh - var(--vp-nav-height));
 }
 </style>
-../../composables/dark-mode.js
diff --git a/theme/src/client/components/Home/HomeCustom.vue b/theme/src/client/components/Home/VPHomeCustom.vue
similarity index 59%
rename from theme/src/client/components/Home/HomeCustom.vue
rename to theme/src/client/components/Home/VPHomeCustom.vue
index a5858748..549a5e57 100644
--- a/theme/src/client/components/Home/HomeCustom.vue
+++ b/theme/src/client/components/Home/VPHomeCustom.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { Content } from 'vuepress/client'
 import type { PlumeThemeHomeCustom } from '../../../shared/index.js'
-import HomeBox from './HomeBox.vue'
+import VPHomeBox from './VPHomeBox.vue'
 
 const props = defineProps<PlumeThemeHomeCustom>()
 </script>
 
 <template>
-  <HomeBox class="home-custom" v-bind="props">
-    <Content class="plume-content" />
-  </HomeBox>
+  <VPHomeBox class="vp-home-custom" v-bind="props">
+    <Content class="vp-doc plume-content" />
+  </VPHomeBox>
 </template>
diff --git a/theme/src/client/components/Home/HomeFeature.vue b/theme/src/client/components/Home/VPHomeFeature.vue
similarity index 96%
rename from theme/src/client/components/Home/HomeFeature.vue
rename to theme/src/client/components/Home/VPHomeFeature.vue
index a809c267..06789405 100644
--- a/theme/src/client/components/Home/HomeFeature.vue
+++ b/theme/src/client/components/Home/VPHomeFeature.vue
@@ -8,7 +8,7 @@ defineProps<PlumeThemeHomeFeature>()
 
 <template>
   <VPLink
-    class="home-feature"
+    class="vp-home-feature"
     :href="link"
     :rel="rel"
     :target="target"
@@ -45,7 +45,7 @@ defineProps<PlumeThemeHomeFeature>()
 </template>
 
 <style scoped>
-.home-feature {
+.vp-home-feature {
   display: block;
   height: 100%;
   background-color: var(--vp-c-bg-soft);
@@ -54,7 +54,7 @@ defineProps<PlumeThemeHomeFeature>()
   transition: border-color var(--t-color), background-color var(--t-color);
 }
 
-.home-feature.link:hover {
+.vp-home-feature.link:hover {
   border-color: var(--vp-c-brand-1);
 }
 
diff --git a/theme/src/client/components/Home/HomeFeatures.vue b/theme/src/client/components/Home/VPHomeFeatures.vue
similarity index 92%
rename from theme/src/client/components/Home/HomeFeatures.vue
rename to theme/src/client/components/Home/VPHomeFeatures.vue
index 4e61f139..d9b645b6 100644
--- a/theme/src/client/components/Home/HomeFeatures.vue
+++ b/theme/src/client/components/Home/VPHomeFeatures.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { PlumeThemeHomeFeatures } from '../../../shared/index.js'
-import HomeFeature from './HomeFeature.vue'
-import HomeBox from './HomeBox.vue'
+import VPHomeFeature from './VPHomeFeature.vue'
+import VPHomeBox from './VPHomeBox.vue'
 
 const props = defineProps<PlumeThemeHomeFeatures>()
 
@@ -29,9 +29,9 @@ const grid = computed(() => {
 </script>
 
 <template>
-  <HomeBox
+  <VPHomeBox
     v-if="features"
-    class="home-features"
+    class="vp-home-features"
     :type="type"
     :background-image="backgroundImage"
     :background-attachment="backgroundAttachment"
@@ -47,7 +47,7 @@ const grid = computed(() => {
         class="item"
         :class="[grid]"
       >
-        <HomeFeature
+        <VPHomeFeature
           :icon="feature.icon"
           :title="feature.title"
           :details="feature.details"
@@ -58,7 +58,7 @@ const grid = computed(() => {
         />
       </div>
     </div>
-  </HomeBox>
+  </VPHomeBox>
 </template>
 
 <style scoped>
diff --git a/theme/src/client/components/Home/HomeHero.vue b/theme/src/client/components/Home/VPHomeHero.vue
similarity index 88%
rename from theme/src/client/components/Home/HomeHero.vue
rename to theme/src/client/components/Home/VPHomeHero.vue
index f98b5c65..a4e3f1cf 100644
--- a/theme/src/client/components/Home/HomeHero.vue
+++ b/theme/src/client/components/Home/VPHomeHero.vue
@@ -44,7 +44,7 @@ useHomeHeroTintPlate(
 </script>
 
 <template>
-  <div class="home-hero" :class="{ full: props.full, once: props.onlyOnce }">
+  <div class="vp-home-hero" :class="{ full: props.full, once: props.onlyOnce }">
     <div v-if="heroBackground" class="home-hero-bg" :style="heroBackground" />
 
     <div v-if="background === 'tint-plate'" class="bg-filter">
@@ -76,20 +76,20 @@ useHomeHeroTintPlate(
 </template>
 
 <style scoped>
-.home-hero {
+.vp-home-hero {
   position: relative;
   width: 100%;
 }
 
-.home-hero.full {
+.vp-home-hero.full {
   height: calc(100vh - var(--vp-nav-height));
 }
 
-.home-hero.full.once {
+.vp-home-hero.full.once {
   height: calc(100vh - var(--vp-nav-height) - var(--vp-footer-height, 0px));
 }
 
-.home-hero-bg {
+.vp-home-hero-bg {
   position: absolute;
   z-index: 0;
   width: 100%;
@@ -109,12 +109,12 @@ useHomeHeroTintPlate(
   height: 100%;
 }
 
-.home-hero.full .container {
+.vp-home-hero.full .container {
   align-items: center;
   justify-content: center;
 }
 
-.home-hero:not(.full) .container {
+.vp-home-hero:not(.full) .container {
   padding-top: 80px;
   padding-bottom: 80px;
 }
@@ -126,7 +126,7 @@ useHomeHeroTintPlate(
   text-align: center;
 }
 
-.home-hero.full .container .content {
+.vp-home-hero.full .container .content {
   margin-top: -40px;
 }
 
@@ -139,7 +139,7 @@ useHomeHeroTintPlate(
 }
 
 .hero-name {
-  background: linear-gradient(315deg, var(--vp-c-purple-1) 15%, var(--vp-c-brand-2) 65%, var(--vp-c-brand-2) 100%);
+  background: var(--vp-bg-home-hero-name, linear-gradient(315deg, var(--vp-c-purple-1) 15%, var(--vp-c-brand-2) 65%, var(--vp-c-brand-2) 100%));
   -webkit-background-clip: text;
   background-clip: text;
 
@@ -147,7 +147,7 @@ useHomeHeroTintPlate(
 }
 
 .hero-tagline {
-  color: var(--vp-c-text-2);
+  color: var(--vp-c-home-hero-tagline, var(--vp-c-text-2));
   transition: color var(--t-color);
 }
 
@@ -155,7 +155,7 @@ useHomeHeroTintPlate(
   margin: 18px 0 30px;
   font-size: 18px;
   font-weight: 500;
-  color: var(--vp-c-text-3);
+  color: var(--vp-c-home-hero-text, var(--vp-c-text-3));
   white-space: pre-wrap;
   transition: color var(--t-color);
 }
@@ -187,7 +187,7 @@ useHomeHeroTintPlate(
   transform: translate3d(0, 0, 0);
 }
 
-.home-hero.full.once .bg-filter {
+.vp-home-hero.full.once .bg-filter {
   height: calc(100% + var(--vp-footer-height, 0px));
 }
 
diff --git a/theme/src/client/components/Home/HomeProfile.vue b/theme/src/client/components/Home/VPHomeProfile.vue
similarity index 82%
rename from theme/src/client/components/Home/HomeProfile.vue
rename to theme/src/client/components/Home/VPHomeProfile.vue
index c4299dcb..1844b26f 100644
--- a/theme/src/client/components/Home/HomeProfile.vue
+++ b/theme/src/client/components/Home/VPHomeProfile.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue'
 import type { PlumeThemeHomeProfile } from '../../../shared/index.js'
 import VPImage from '../VPImage.vue'
 import { useData } from '../../composables/data.js'
-import HomeBox from './HomeBox.vue'
+import VPHomeBox from './VPHomeBox.vue'
 
 const props = defineProps<PlumeThemeHomeProfile>()
 
@@ -22,8 +22,8 @@ const profile = computed(() => {
 </script>
 
 <template>
-  <HomeBox
-    class="home-profile"
+  <VPHomeBox
+    class="vp-home-profile"
     :type="type"
     :background-image="backgroundImage"
     :background-attachment="backgroundAttachment"
@@ -34,37 +34,37 @@ const profile = computed(() => {
     <h3 v-if="profile.name" v-html="profile.name" />
 
     <p v-if="profile.description" v-html="profile.description" />
-  </HomeBox>
+  </VPHomeBox>
 </template>
 
 <style scoped>
-.home-profile :deep(.container) {
+.vp-home-profile :deep(.container) {
   overflow: hidden;
 }
 
-.home-profile :deep(img) {
+.vp-home-profile :deep(img) {
   float: left;
   width: 64px;
   margin-right: 24px;
 }
 
-.home-profile :deep(img.circle) {
+.vp-home-profile :deep(img.circle) {
   border-radius: 50%;
 }
 
 @media (min-width: 960px) {
-  .home-profile :deep(img) {
+  .vp-home-profile :deep(img) {
     width: 96px;
   }
 }
 
-.home-profile :deep(h3) {
+.vp-home-profile :deep(h3) {
   margin-bottom: 12px;
   font-size: 20px;
   font-weight: 500;
 }
 
-.home-profile :deep(p) {
+.vp-home-profile :deep(p) {
   font-size: 16px;
   font-weight: 400;
   line-height: 1.5;
diff --git a/theme/src/client/components/Home/HomeTextImage.vue b/theme/src/client/components/Home/VPHomeTextImage.vue
similarity index 90%
rename from theme/src/client/components/Home/HomeTextImage.vue
rename to theme/src/client/components/Home/VPHomeTextImage.vue
index 74aef099..50490b8c 100644
--- a/theme/src/client/components/Home/HomeTextImage.vue
+++ b/theme/src/client/components/Home/VPHomeTextImage.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import type { PlumeThemeHomeTextImage } from '../../../shared/index.js'
 import VPImage from '../VPImage.vue'
-import HomeBox from './HomeBox.vue'
+import VPHomeBox from './VPHomeBox.vue'
 
 const props = defineProps<PlumeThemeHomeTextImage>()
 
@@ -17,8 +17,8 @@ const maxWidth = computed(() => {
 </script>
 
 <template>
-  <HomeBox
-    class="home-text-image"
+  <VPHomeBox
+    class="vp-home-text-image"
     :type="type"
     :background-image="backgroundImage"
     :background-attachment="backgroundAttachment"
@@ -48,11 +48,11 @@ const maxWidth = computed(() => {
         </ul>
       </section>
     </div>
-  </HomeBox>
+  </VPHomeBox>
 </template>
 
 <style scoped>
-.home-text-image :deep(.container) {
+.vp-home-text-image :deep(.container) {
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -63,11 +63,11 @@ const maxWidth = computed(() => {
 }
 
 @media (min-width: 960px) {
-  .home-text-image :deep(.container) {
+  .vp-home-text-image :deep(.container) {
     flex-direction: row;
   }
 
-  .home-text-image :deep(.container.reverse) {
+  .vp-home-text-image :deep(.container.reverse) {
     flex-direction: row-reverse;
   }
 }
@@ -125,7 +125,7 @@ const maxWidth = computed(() => {
 }
 
 @media (min-width: 960px) {
-  .home-text-image :deep(.container) {
+  .vp-home-text-image :deep(.container) {
     gap: 48px;
   }
 
diff --git a/theme/src/client/components/VPContent.vue b/theme/src/client/components/VPContent.vue
index 1a5a8c16..0dd0cadd 100644
--- a/theme/src/client/components/VPContent.vue
+++ b/theme/src/client/components/VPContent.vue
@@ -4,7 +4,7 @@ import { useData, useSidebar } from '../composables/index.js'
 import VPBlog from './Blog/VPBlog.vue'
 import VPDoc from './VPDoc.vue'
 import VPPage from './VPPage.vue'
-import Home from './Home/Home.vue'
+import VPHome from './Home/VPHome.vue'
 import Friends from './Friends.vue'
 
 const props = defineProps<{
@@ -42,7 +42,7 @@ const isBlogLayout = computed(() => {
 
     <Friends v-else-if="frontmatter.pageLayout === 'friends'" />
 
-    <Home v-else-if="frontmatter.pageLayout === 'home'" />
+    <VPHome v-else-if="frontmatter.pageLayout === 'home'" />
 
     <component
       :is="frontmatter.pageLayout"
diff --git a/theme/src/client/config.ts b/theme/src/client/config.ts
index a4f36383..cf1c4efb 100644
--- a/theme/src/client/config.ts
+++ b/theme/src/client/config.ts
@@ -7,7 +7,7 @@ import VPBadge from './components/global/VPBadge.vue'
 import { setupDarkMode, setupWatermark, useScrollPromise } from './composables/index.js'
 import Layout from './layouts/Layout.vue'
 import NotFound from './layouts/NotFound.vue'
-import HomeBox from './components/Home/HomeBox.vue'
+import VPHomeBox from './components/Home/VPHomeBox.vue'
 
 export default defineClientConfig({
   enhance({ app, router }) {
@@ -41,7 +41,9 @@ export default defineClientConfig({
       return null
     })
 
-    app.component('HomeBox', HomeBox)
+    /** @deprecated */
+    app.component('HomeBox', VPHomeBox)
+    app.component('VPHomeBox', VPHomeBox)
 
     // handle scrollBehavior with transition
     const scrollBehavior = router.options.scrollBehavior!
diff --git a/theme/src/client/index.ts b/theme/src/client/index.ts
index ded6f5e0..f4051017 100644
--- a/theme/src/client/index.ts
+++ b/theme/src/client/index.ts
@@ -1,17 +1,24 @@
+export * from 'vuepress-plugin-md-enhance/client'
+export * from '@vuepress/plugin-comment/client'
+
 export * from '../shared/index.js'
+export * from './composables/index.js'
+export * from './utils/index.js'
 
 export { default as plumeClientConfig } from './config.js'
 
 export { default as Layout } from './layouts/Layout.vue'
 export { default as NotFound } from './layouts/NotFound.vue'
 
-export { default as HomeBox } from './components/Home/HomeBox.vue'
+export { default as VPBadge } from './components/global/VPBadge.vue'
+export { default as VPImage } from './components/VPImage.vue'
+export { default as VPButton } from './components/VPButton.vue'
+export { default as VPLink } from './components/VPLink.vue'
 
-export {
-  useDarkMode,
-  useThemeData,
-  useThemeLocaleData,
-} from './composables/index.js'
-
-export * from 'vuepress-plugin-md-enhance/client'
-export * from '@vuepress/plugin-comment/client'
+export { default as VPHomeBox } from './components/Home/VPHomeBox.vue'
+export { default as VPHomeBanner } from './components/Home/VPHomeBanner.vue'
+export { default as VPHomeFeatures } from './components/Home/VPHomeFeatures.vue'
+export { default as VPHomeHero } from './components/Home/VPHomeHero.vue'
+export { default as VPHomeProfile } from './components/Home/VPHomeProfile.vue'
+export { default as VPHomeTextImage } from './components/Home/VPHomeTextImage.vue'
+export { default as VPHomeCustom } from './components/Home/VPHomeCustom.vue'