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

close #762 

Co-authored-by: Kia Ishii <kia.king.08@gmail.com>

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`

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>

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>

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>