Split slots between layout types and improved names

docs/guide/extending-default-theme.md

@@ -160,8 +160,8 @@ export default {
 Full list of slots available in the default theme layout:
 
 - When `layout: 'doc'` (default) is enabled via frontmatter:
-  - `content-before`
-  - `content-after`
+  - `doc-top`
+  - `doc-bottom`
   - `doc-footer-before`
   - `doc-before`
   - `doc-after`
@@ -181,8 +181,8 @@ Full list of slots available in the default theme layout:
   - `home-features-before`
   - `home-features-after`
 - When `layout: 'page'` is enabled via frontmatter:
-  - `content-before`
-  - `content-after`
+  - `page-top`
+  - `page-bottom`
 - On not found (404) page:
   - `not-found`
 - Always:

src/client/theme-default/Layout.vue

@@ -54,8 +54,8 @@ provide('hero-image-slot-exists', heroImageSlotExists)
     </VPSidebar>
 
     <VPContent>
-      <template #content-before><slot name="content-before" /></template>
-      <template #content-after><slot name="content-after" /></template>
+      <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>
@@ -68,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>

src/client/theme-default/components/VPContent.vue

@@ -22,8 +22,8 @@ const { hasSidebar } = useSidebar()
     <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
 
     <VPPage v-else-if="frontmatter.layout === 'page'">
-      <template #content-before><slot name="content-before" /></template>
-      <template #content-after><slot name="content-after" /></template>
+      <template #page-top><slot name="page-top" /></template>
+      <template #page-bottom><slot name="page-bottom" /></template>
     </VPPage>
 
     <VPHome v-else-if="frontmatter.layout === 'home'">
@@ -36,8 +36,8 @@ const { hasSidebar } = useSidebar()
     </VPHome>
 
     <VPDoc v-else>
-      <template #content-before><slot name="content-before" /></template>
-      <template #content-after><slot name="content-after" /></template>
+      <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>

src/client/theme-default/components/VPDoc.vue

@@ -19,7 +19,7 @@ const pageName = computed(() =>
     class="VPDoc"
     :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }"
   >
-    <slot name="content-before" />
+    <slot name="doc-top" />
     <div class="container">
       <div v-if="hasAside" class="aside">
         <div class="aside-curtain" />
@@ -51,7 +51,7 @@ const pageName = computed(() =>
         </div>
       </div>
     </div>
-    <slot name="content-after" />
+    <slot name="doc-bottom" />
   </div>
 </template>
 
@@ -132,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) + var(--vp-content-before-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;

src/client/theme-default/components/VPPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="VPPage">
-    <slot name="content-before" />
+    <slot name="page-top" />
     <Content />
-    <slot name="content-after" />
+    <slot name="page-bottom" />
   </div>
 </template>