✨ feat: add hero slots that are inside container (#3524)

vuejs · Jan 31, 2024 · 28870e6 · 28870e6
1 parent 6b1f951
commit 28870e6
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/docs/guide/extending-default-theme.md b/docs/guide/extending-default-theme.md
@@ -195,7 +195,9 @@ Full list of slots available in the default theme layout:
   - `aside-ads-after`
 - When `layout: 'home'` is enabled via frontmatter:
   - `home-hero-before`
+  - `home-hero-info-before`
   - `home-hero-info`
+  - `home-hero-actions-after`
   - `home-hero-image`
   - `home-hero-after`
   - `home-features-before`

diff --git a/docs/zh/guide/extending-default-theme.md b/docs/zh/guide/extending-default-theme.md
@@ -194,7 +194,9 @@ export default {
   - `aside-ads-after`
 - 当 `layout: 'home'` 在 frontmatter 中被启用时:
   - `home-hero-before`
+  - `home-hero-info-before`
   - `home-hero-info`
+  - `home-hero-actions-after`
   - `home-hero-image`
   - `home-hero-after`
   - `home-features-before`

diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
@@ -25,13 +25,15 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   <div class="VPHero" :class="{ 'has-image': image || heroImageSlotExists }">
     <div class="container">
       <div class="main">
+        <slot name="home-hero-info-before" />
         <slot name="home-hero-info">
           <h1 v-if="name" class="name">
             <span v-html="name" class="clip"></span>
           </h1>
           <p v-if="text" v-html="text" class="text"></p>
           <p v-if="tagline" v-html="tagline" class="tagline"></p>
         </slot>
+        <slot name="home-hero-info-after" />
 
         <div v-if="actions" class="actions">
           <div v-for="action in actions" :key="action.link" class="action">
@@ -44,6 +46,7 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
             />
           </div>
         </div>
+        <slot name="home-hero-actions-after" />
       </div>
 
       <div v-if="image || heroImageSlotExists" class="image">