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

Author: jd-solanki

Diff for: 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 for: 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 for: 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">