feat(theme): add page-top/bottom and doc-top/bottom slots (#2139)

vuejs · Mar 27, 2023 · 53d0099 · 53d0099
1 parent f4355c7
commit 53d0099
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 2 deletions.
diff --git a/docs/guide/extending-default-theme.md b/docs/guide/extending-default-theme.md
@@ -160,6 +160,8 @@ export default {
 Full list of slots available in the default theme layout:
 
 - When `layout: 'doc'` (default) is enabled via frontmatter:
+  - `doc-top`
+  - `doc-bottom`
   - `doc-footer-before`
   - `doc-before`
   - `doc-after`
@@ -178,6 +180,9 @@ Full list of slots available in the default theme layout:
   - `home-hero-after`
   - `home-features-before`
   - `home-features-after`
+- When `layout: 'page'` is enabled via frontmatter:
+  - `page-top`
+  - `page-bottom`
 - On not found (404) page:
   - `not-found`
 - Always:

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
@@ -54,6 +54,9 @@ provide('hero-image-slot-exists', heroImageSlotExists)
     </VPSidebar>
 
     <VPContent>
+      <template #page-top><slot name="page-top" /></template>
+      <template #page-bottom><slot name="page-bottom" /></template>
+
       <template #not-found><slot name="not-found" /></template>
       <template #home-hero-before><slot name="home-hero-before" /></template>
       <template #home-hero-info><slot name="home-hero-info" /></template>
@@ -65,6 +68,9 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <template #doc-footer-before><slot name="doc-footer-before" /></template>
       <template #doc-before><slot name="doc-before" /></template>
       <template #doc-after><slot name="doc-after" /></template>
+      <template #doc-top><slot name="doc-top" /></template>
+      <template #doc-bottom><slot name="doc-bottom" /></template>
+
 
       <template #aside-top><slot name="aside-top" /></template>
       <template #aside-bottom><slot name="aside-bottom" /></template>

diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
@@ -21,7 +21,10 @@ const { hasSidebar } = useSidebar()
   >
     <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
 
-    <VPPage v-else-if="frontmatter.layout === 'page'" />
+    <VPPage v-else-if="frontmatter.layout === 'page'">
+      <template #page-top><slot name="page-top" /></template>
+      <template #page-bottom><slot name="page-bottom" /></template>
+    </VPPage>
 
     <VPHome v-else-if="frontmatter.layout === 'home'">
       <template #home-hero-before><slot name="home-hero-before" /></template>
@@ -33,6 +36,9 @@ const { hasSidebar } = useSidebar()
     </VPHome>
 
     <VPDoc v-else>
+      <template #doc-top><slot name="doc-top" /></template>
+      <template #doc-bottom><slot name="doc-bottom" /></template>
+
       <template #doc-footer-before><slot name="doc-footer-before" /></template>
       <template #doc-before><slot name="doc-before" /></template>
       <template #doc-after><slot name="doc-after" /></template>

diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
@@ -19,6 +19,7 @@ const pageName = computed(() =>
     class="VPDoc"
     :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }"
   >
+    <slot name="doc-top" />
     <div class="container">
       <div v-if="hasAside" class="aside">
         <div class="aside-curtain" />
@@ -50,6 +51,7 @@ const pageName = computed(() =>
         </div>
       </div>
     </div>
+    <slot name="doc-bottom" />
   </div>
 </template>
 
@@ -130,7 +132,7 @@ const pageName = computed(() =>
 .aside-container {
   position: fixed;
   top: 0;
-  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px);
+  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 32px);
   width: 224px;
   height: 100vh;
   overflow-x: hidden;

diff --git a/src/client/theme-default/components/VPPage.vue b/src/client/theme-default/components/VPPage.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="VPPage">
+    <slot name="page-top" />
     <Content />
+    <slot name="page-bottom" />
   </div>
 </template>