feat(theme): add doc-meta-before and doc-meta-after slots (#554)

docs/notes/theme/guide/custom/slots.md

@@ -99,6 +99,8 @@ export default defineClientConfig({
   - `doc-footer-before`
   - `doc-before`
   - `doc-after`
+  - `doc-meta-before`
+  - `doc-meta-after`
   - `sidebar-nav-before`
   - `sidebar-nav-after`
   - `aside-top`

theme/src/client/components/Blog/VPBlogAside.vue

@@ -21,7 +21,6 @@ const { theme } = useData()
   top: calc(var(--vp-nav-height) + 2rem);
   display: none;
   width: 270px;
-  overflow-y: auto;
   text-align: center;
 }
 

theme/src/client/components/VPContent.vue

@@ -136,6 +136,13 @@ watch(
         <slot name="doc-bottom" />
       </template>
 
+      <template #doc-meta-before>
+        <slot name="doc-meta-before" />
+      </template>
+      <template #doc-meta-after>
+        <slot name="doc-meta-after" />
+      </template>
+
       <template #doc-footer-before>
         <slot name="doc-footer-before" />
       </template>

theme/src/client/components/VPDoc.vue

@@ -122,7 +122,15 @@ watch(
             <slot name="doc-before" />
             <main class="main">
               <VPDocBreadcrumbs />
-              <VPDocMeta />
+              <VPDocMeta>
+                <template #doc-meta-before>
+                  <slot name="doc-meta-before" />
+                </template>
+                <template #doc-meta-after>
+                  <slot name="doc-meta-after" />
+                </template>
+              </VPDocMeta>
+
               <VPEncryptPage v-if="!isPageDecrypted" />
               <div
                 v-else class="vp-doc plume-content"

theme/src/client/components/VPDocMeta.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup>
+import type { Ref } from 'vue'
 import VPBadge from '@theme/global/VPBadge.vue'
 import VPLink from '@theme/VPLink.vue'
 import { useReadingTimeLocale } from '@vuepress/plugin-reading-time/client'
-import { computed } from 'vue'
+import { computed, inject, ref } from 'vue'
 import { useBlogPageData, useData, useInternalLink, useTagColors } from '../composables/index.js'
 
 const { page, frontmatter: matter, theme, blog } = useData<'post'>()
@@ -40,7 +41,15 @@ const badge = computed(() => {
   return false
 })
 
-const hasMeta = computed(() => readingTime.value.time || tags.value.length || createTime.value)
+// 无法准确判断是否存在 doc-meta 插槽，因此需要通过 provide 传递
+const hasDocMetaSlot = inject<Ref<boolean>>('doc-meta-slot-exists', ref(false))
+
+const hasMeta = computed(() =>
+  readingTime.value.time
+  || tags.value.length
+  || createTime.value
+  || hasDocMetaSlot.value,
+)
 </script>
 
 <template>
@@ -48,12 +57,16 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
     {{ page.title }}
     <VPBadge v-if="badge" :type="badge.type || 'tip'" :text="badge.text" />
   </h1>
+
   <div v-if="hasMeta" class="vp-doc-meta">
+    <slot name="doc-meta-before" />
+
     <p v-if="readingTime.time && matter.readingTime !== false" class="reading-time">
       <span class="vpi-books icon" />
       <span>{{ readingTime.words }}</span>
       <span>{{ readingTime.time }}</span>
     </p>
+
     <p v-if="tags.length > 0">
       <span class="vpi-tag icon" />
       <VPLink
@@ -66,6 +79,9 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
         {{ tag.name }}
       </VPLink>
     </p>
+
+    <slot name="doc-meta-after" />
+
     <p v-if="createTime" class="create-time">
       <span class="vpi-clock icon" /><span>{{ createTime }}</span>
     </p>
@@ -89,7 +105,7 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
 .vp-doc-meta {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
+  gap: 12px 16px;
   align-items: center;
   justify-content: flex-start;
   padding: 1rem 0 0.5rem;
@@ -102,25 +118,18 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
 
 .vp-doc-meta p {
   display: flex;
+  gap: 6px;
   align-items: center;
 }
 
 .vp-doc-meta .icon {
   width: 14px;
   height: 14px;
-  margin-right: 0.3rem;
-}
-
-.vp-doc-meta .author .icon,
-.vp-doc-meta .author span {
-  color: var(--vp-c-text-2);
-  transition: color var(--vp-t-color);
 }
 
 .vp-doc-meta .tag {
   display: inline-block;
   padding: 3px 5px;
-  margin-right: 6px;
   font-size: 12px;
   line-height: 1;
   color: var(--vp-tag-color);
@@ -128,20 +137,7 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
   border-radius: 3px;
 }
 
-.vp-doc-meta .tag:last-of-type {
-  margin-right: 0;
-}
-
-.vp-doc-meta .reading-time span {
-  margin-right: 8px;
-}
-
-.vp-doc-meta .reading-time span:last-of-type {
-  margin-right: 0;
-}
-
 .vp-doc-meta .create-time {
-  min-width: 110px;
   text-align: right;
 }
 

theme/src/client/layouts/Layout.vue

@@ -87,6 +87,12 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
           <template #page-bottom>
             <slot name="page-bottom" />
           </template>
+          <template #doc-meta-before>
+            <slot name="doc-meta-before" />
+          </template>
+          <template #doc-meta-after>
+            <slot name="doc-meta-after" />
+          </template>
           <template #doc-footer-before>
             <slot name="doc-footer-before" />
           </template>