feat: add doc before and after slot (#762) (#786)

close #762 Co-authored-by: Kia Ishii <kia.king.08@gmail.com>
vuejs · Jun 14, 2022 · 9c2a36f · 9c2a36f
1 parent 753f35b
commit 9c2a36f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git a/docs/guide/theme-introduction.md b/docs/guide/theme-introduction.md
@@ -177,7 +177,7 @@ export default {
   ...DefaultTheme,
   Layout() {
     return h(DefaultTheme.Layout, null, {
-      'sidebar-top': () => h(MyComponent)
+      'aside-outline-before': () => h(MyComponent)
     })
   }
 }
@@ -186,6 +186,8 @@ export default {
 Full list of slots available in the default theme layout:
 
 - When `layout: 'doc'` (default) is enabled via frontmatter:
+  - `doc-before`
+  - `doc-after`
   - `aside-top`
   - `aside-bottom`
   - `aside-outline-before`

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
@@ -34,6 +34,9 @@ provide('close-sidebar', closeSidebar)
       <template #home-features-before><slot name="home-features-before" /></template>
       <template #home-features-after><slot name="home-features-after" /></template>
 
+      <template #doc-before><slot name="doc-before" /></template>
+      <template #doc-after><slot name="doc-after" /></template>
+
       <template #aside-top><slot name="aside-top" /></template>
       <template #aside-bottom><slot name="aside-bottom" /></template>
       <template #aside-outline-before><slot name="aside-outline-before" /></template>

diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
@@ -35,6 +35,9 @@ useCopyCode()
     </VPHome>
 
     <VPDoc v-else>
+      <template #doc-before><slot name="doc-before" /></template>
+      <template #doc-after><slot name="doc-after" /></template>
+
       <template #aside-top><slot name="aside-top" /></template>
       <template #aside-outline-before><slot name="aside-outline-before" /></template>
       <template #aside-outline-after><slot name="aside-outline-after" /></template>

diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
@@ -31,11 +31,15 @@ const pageName = path.replace(/[./]+/g, '_').replace(/_html$/, '')
 
       <div class="content">
         <div class="content-container">
+          <slot name="doc-before" />
+
           <main class="main">
             <Content class="vp-doc" :class="pageName" />
           </main>
 
           <VPDocFooter />
+
+          <slot name="doc-after" />
         </div>
       </div>
     </div>