From 0bceda590c78cd0727d63298eb77f936f4c3fe15 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sat, 19 Apr 2025 11:39:57 +0800
Subject: [PATCH] feat(theme): add layout slots (#558)

---
 docs/notes/theme/guide/custom/slots.md        |  7 +++++++
 theme/src/client/components/Nav/VPNav.vue     | 12 +++++++++++
 theme/src/client/components/Nav/VPNavBar.vue  |  2 ++
 .../src/client/components/Nav/VPNavScreen.vue |  2 ++
 theme/src/client/components/VPContent.vue     | 10 ++++++++-
 theme/src/client/components/VPDoc.vue         |  6 +++++-
 .../components/global/VPCardMasonry.vue       |  6 ++++++
 theme/src/client/layouts/Layout.vue           | 21 +++++++++++++++++++
 theme/src/client/layouts/NotFound.vue         | 12 +++++++++++
 9 files changed, 76 insertions(+), 2 deletions(-)

diff --git a/docs/notes/theme/guide/custom/slots.md b/docs/notes/theme/guide/custom/slots.md
index 4e844f14..0ea30d98 100644
--- a/docs/notes/theme/guide/custom/slots.md
+++ b/docs/notes/theme/guide/custom/slots.md
@@ -96,9 +96,12 @@ export default defineClientConfig({
 
   - `doc-top`
   - `doc-bottom`
+  - `doc-content-before`
   - `doc-footer-before`
   - `doc-before`
   - `doc-after`
+  - `doc-meta-top`
+  - `doc-meta-bottom`
   - `doc-meta-before`
   - `doc-meta-after`
   - `sidebar-nav-before`
@@ -160,7 +163,11 @@ export default defineClientConfig({
 - `nav-bar-title-after`
 - `nav-bar-content-before`
 - `nav-bar-content-after`
+- `nav-bar-menu-before`
+- `nav-bar-menu-after`
 - `nav-screen-content-before`
 - `nav-screen-content-after`
+- `nav-screen-menu-before`
+- `nav-screen-menu-after`
 - `footer-content`
 - `bulletin-content`
diff --git a/theme/src/client/components/Nav/VPNav.vue b/theme/src/client/components/Nav/VPNav.vue
index 2fe3a00d..e1c1d7c0 100644
--- a/theme/src/client/components/Nav/VPNav.vue
+++ b/theme/src/client/components/Nav/VPNav.vue
@@ -43,6 +43,12 @@ watchEffect(() => {
       <template #nav-bar-content-after>
         <slot name="nav-bar-content-after" />
       </template>
+      <template #nav-bar-menu-before>
+        <slot name="nav-bar-menu-before" />
+      </template>
+      <template #nav-bar-menu-after>
+        <slot name="nav-bar-menu-after" />
+      </template>
     </VPNavbar>
 
     <VPNavScreen :open="isScreenOpen">
@@ -52,6 +58,12 @@ watchEffect(() => {
       <template #nav-screen-content-after>
         <slot name="nav-screen-content-after" />
       </template>
+      <template #nav-screen-menu-before>
+        <slot name="nav-screen-menu-before" />
+      </template>
+      <template #nav-screen-menu-after>
+        <slot name="nav-screen-menu-after" />
+      </template>
     </VPNavScreen>
   </header>
 </template>
diff --git a/theme/src/client/components/Nav/VPNavBar.vue b/theme/src/client/components/Nav/VPNavBar.vue
index 362221b6..910b26a3 100644
--- a/theme/src/client/components/Nav/VPNavBar.vue
+++ b/theme/src/client/components/Nav/VPNavBar.vue
@@ -51,7 +51,9 @@ watchPostEffect(() => {
           <div class="content-body">
             <slot name="nav-bar-content-before" />
             <VPNavBarSearch class="search" />
+            <slot name="nav-bar-menu-before" />
             <VPNavBarMenu class="menu" />
+            <slot name="nav-bar-menu-after" />
             <VPNavBarTranslations class="translations" />
             <VPNavBarAppearance class="appearance" />
             <VPNavBarSocialLinks class="social-links" />
diff --git a/theme/src/client/components/Nav/VPNavScreen.vue b/theme/src/client/components/Nav/VPNavScreen.vue
index b969b85c..5da03aa2 100644
--- a/theme/src/client/components/Nav/VPNavScreen.vue
+++ b/theme/src/client/components/Nav/VPNavScreen.vue
@@ -24,7 +24,9 @@ const isLocked = useScrollLock(inBrowser ? document.body : null)
     <div v-if="open" id="navScreen" class="vp-nav-screen">
       <div class="container">
         <slot name="nav-screen-content-before" />
+        <slot name="nav-screen-menu-before" />
         <VPNavScreenMenu class="menu" />
+        <slot name="nav-screen-menu-after" />
         <VPNavScreenTranslates class="translations" />
         <VPNavScreenAppearance class="appearance" />
         <VPNavScreenSocialLinks class="social-links" />
diff --git a/theme/src/client/components/VPContent.vue b/theme/src/client/components/VPContent.vue
index 6aa488e7..f33f09f8 100644
--- a/theme/src/client/components/VPContent.vue
+++ b/theme/src/client/components/VPContent.vue
@@ -142,7 +142,15 @@ watch(
       <template #doc-meta-after>
         <slot name="doc-meta-after" />
       </template>
-
+      <template #doc-meta-top>
+        <slot name="doc-meta-top" />
+      </template>
+      <template #doc-meta-bottom>
+        <slot name="doc-meta-bottom" />
+      </template>
+      <template #doc-content-before>
+        <slot name="doc-content-before" />
+      </template>
       <template #doc-footer-before>
         <slot name="doc-footer-before" />
       </template>
diff --git a/theme/src/client/components/VPDoc.vue b/theme/src/client/components/VPDoc.vue
index 454ba67f..3ac558fc 100644
--- a/theme/src/client/components/VPDoc.vue
+++ b/theme/src/client/components/VPDoc.vue
@@ -122,6 +122,8 @@ watch(
             <slot name="doc-before" />
             <main class="main">
               <VPDocBreadcrumbs />
+
+              <slot name="doc-meta-top" />
               <VPDocMeta>
                 <template #doc-meta-before>
                   <slot name="doc-meta-before" />
@@ -130,17 +132,19 @@ watch(
                   <slot name="doc-meta-after" />
                 </template>
               </VPDocMeta>
+              <slot name="doc-meta-bottom" />
 
               <VPEncryptPage v-if="!isPageDecrypted" />
               <div
                 v-else class="vp-doc plume-content"
                 :class="[pageName, enabledExternalLinkIcon && 'external-link-icon-enabled']" vp-content
               >
+                <slot name="doc-content-before" />
+
                 <Content />
 
                 <DocGitContributors v-if="contributorsMode === 'block'" />
                 <DocGitChangelog />
-
                 <VPDocCopyright />
               </div>
             </main>
diff --git a/theme/src/client/components/global/VPCardMasonry.vue b/theme/src/client/components/global/VPCardMasonry.vue
index e7cf95cd..ddfc9032 100644
--- a/theme/src/client/components/global/VPCardMasonry.vue
+++ b/theme/src/client/components/global/VPCardMasonry.vue
@@ -27,6 +27,9 @@ const rawList = computed(() => {
 })
 
 const columnsLength = computed<number>(() => {
+  if (__VUEPRESS_SSR__)
+    return 3
+
   let length = 1
   if (typeof props.cols === 'number') {
     length = props.cols
@@ -67,6 +70,9 @@ async function drawColumns() {
 }
 
 onMounted(() => {
+  if (__VUEPRESS_SSR__)
+    return
+
   drawColumns()
   const debounceDraw = useDebounceFn(drawColumns)
   watch([rawList, columnsLength], debounceDraw, { flush: 'post' })
diff --git a/theme/src/client/layouts/Layout.vue b/theme/src/client/layouts/Layout.vue
index 36d6a968..dfd8ce1a 100644
--- a/theme/src/client/layouts/Layout.vue
+++ b/theme/src/client/layouts/Layout.vue
@@ -56,12 +56,24 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
         <template #nav-bar-content-after>
           <slot name="nav-bar-content-after" />
         </template>
+        <template #nav-bar-menu-before>
+          <slot name="nav-bar-menu-before" />
+        </template>
+        <template #nav-bar-menu-after>
+          <slot name="nav-bar-menu-after" />
+        </template>
         <template #nav-screen-content-before>
           <slot name="nav-screen-content-before" />
         </template>
         <template #nav-screen-content-after>
           <slot name="nav-screen-content-after" />
         </template>
+        <template #nav-screen-menu-before>
+          <slot name="nav-screen-menu-before" />
+        </template>
+        <template #nav-screen-menu-after>
+          <slot name="nav-screen-menu-after" />
+        </template>
       </VPNav>
 
       <VPLocalNav
@@ -93,6 +105,15 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
           <template #doc-meta-after>
             <slot name="doc-meta-after" />
           </template>
+          <template #doc-meta-top>
+            <slot name="doc-meta-top" />
+          </template>
+          <template #doc-meta-bottom>
+            <slot name="doc-meta-bottom" />
+          </template>
+          <template #doc-content-before>
+            <slot name="doc-content-before" />
+          </template>
           <template #doc-footer-before>
             <slot name="doc-footer-before" />
           </template>
diff --git a/theme/src/client/layouts/NotFound.vue b/theme/src/client/layouts/NotFound.vue
index 87dd36fd..700d9ba6 100644
--- a/theme/src/client/layouts/NotFound.vue
+++ b/theme/src/client/layouts/NotFound.vue
@@ -28,12 +28,24 @@ const { theme } = useData()
       <template #nav-bar-content-after>
         <slot name="nav-bar-content-after" />
       </template>
+      <template #nav-bar-menu-before>
+        <slot name="nav-bar-menu-before" />
+      </template>
+      <template #nav-bar-menu-after>
+        <slot name="nav-bar-menu-after" />
+      </template>
       <template #nav-screen-content-before>
         <slot name="nav-screen-content-before" />
       </template>
       <template #nav-screen-content-after>
         <slot name="nav-screen-content-after" />
       </template>
+      <template #nav-screen-menu-before>
+        <slot name="nav-screen-menu-before" />
+      </template>
+      <template #nav-screen-menu-after>
+        <slot name="nav-screen-menu-after" />
+      </template>
     </VPNav>
 
     <div id="VPContent" class="vp-content">