From d45dfd667b9eb11be22652be910d2daf3fdb605b Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 16 Jun 2024 16:52:11 +0800
Subject: [PATCH] chore: tweak

---
 theme/src/client/components/Blog/VPBlog.vue   | 66 +++++++++++++------
 .../client/components/Blog/VPBlogArchives.vue |  4 ++
 .../client/components/Blog/VPBlogAside.vue    |  2 +
 .../client/components/Blog/VPBlogExtract.vue  |  4 ++
 .../src/client/components/Blog/VPBlogTags.vue |  4 ++
 .../src/client/components/Blog/VPPostList.vue |  3 +
 theme/src/client/components/VPContent.vue     | 51 +++++++++++---
 theme/src/client/layouts/Layout.vue           | 57 +++++++++++++---
 theme/src/client/layouts/NotFound.vue         |  6 +-
 9 files changed, 158 insertions(+), 39 deletions(-)

diff --git a/theme/src/client/components/Blog/VPBlog.vue b/theme/src/client/components/Blog/VPBlog.vue
index 922adf6b..58cbe7b6 100644
--- a/theme/src/client/components/Blog/VPBlog.vue
+++ b/theme/src/client/components/Blog/VPBlog.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
 import VPPostList from '@theme/Blog/VPPostList.vue'
 import VPBlogArchives from '@theme/Blog/VPBlogArchives.vue'
 import VPBlogAside from '@theme/Blog/VPBlogAside.vue'
@@ -10,35 +9,64 @@ import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
 import { useData } from '../../composables/data.js'
 
 const { theme, page } = useData()
-
-const com = {
-  VPPostList,
-  VPBlogTags,
-  VPBlogArchives,
-}
-
-const type = computed(() => {
-  const type = page.value.type
-  if (type === 'blog-tags')
-    return 'VPBlogTags'
-  if (type === 'blog-archives')
-    return 'VPBlogArchives'
-  return 'VPPostList'
-})
 </script>
 
 <template>
   <div class="vp-blog">
+    <slot name="blog-top" />
+
     <div class="blog-container" :class="{ 'no-profile': !theme.profile }">
       <VPBlogNav v-if="!theme.profile" is-local />
 
       <VPTransitionFadeSlideY>
-        <component :is="com[type]" />
+        <VPBlogArchives v-if="page.type === 'blog-archives'">
+          <template #blog-archives-before>
+            <slot name="blog-archives-before" />
+          </template>
+          <template #blog-archives-after>
+            <slot name="blog-archives-after" />
+          </template>
+        </VPBlogArchives>
+        <VPBlogTags v-else-if="page.type === 'blog-tags'">
+          <template #blog-tags-before>
+            <slot name="blog-tags-before" />
+          </template>
+          <template #blog-tags-after>
+            <slot name="blog-tags-after" />
+          </template>
+        </VPBlogTags>
+        <VPPostList v-else>
+          <template #blog-post-list-before>
+            <slot name="blog-post-list-before" />
+          </template>
+          <template #blog-post-list-after>
+            <slot name="blog-post-list-after" />
+          </template>
+          <template #blog-post-list-pagination-after>
+            <slot name="blog-post-list-pagination-after" />
+          </template>
+        </VPPostList>
       </VPTransitionFadeSlideY>
 
-      <VPBlogAside />
-      <VPBlogExtract />
+      <VPBlogAside>
+        <template #blog-aside-top>
+          <slot name="blog-aside-top" />
+        </template>
+        <template #blog-aside-bottom>
+          <slot name="blog-aside-bottom" />
+        </template>
+      </VPBlogAside>
+      <VPBlogExtract>
+        <template #blog-extract-before>
+          <slot name="blog-extract-before" />
+        </template>
+        <template #blog-extract-after>
+          <slot name="blog-extract-after" />
+        </template>
+      </VPBlogExtract>
     </div>
+
+    <slot name="blog-bottom" />
   </div>
 </template>
 
diff --git a/theme/src/client/components/Blog/VPBlogArchives.vue b/theme/src/client/components/Blog/VPBlogArchives.vue
index 567daab6..42890e6c 100644
--- a/theme/src/client/components/Blog/VPBlogArchives.vue
+++ b/theme/src/client/components/Blog/VPBlogArchives.vue
@@ -8,6 +8,8 @@ const { archives } = useArchives()
 
 <template>
   <div class="vp-blog-archives">
+    <slot name="blog-archives-before" />
+
     <h2 class="archives-title">
       <span class="vpi-archive icon" />
       <span>{{ archivesLink.text }}</span>
@@ -22,6 +24,8 @@ const { archives } = useArchives()
         </div>
       </template>
     </div>
+
+    <slot name="blog-archives-after" />
   </div>
 </template>
 
diff --git a/theme/src/client/components/Blog/VPBlogAside.vue b/theme/src/client/components/Blog/VPBlogAside.vue
index 04cd4129..322136ae 100644
--- a/theme/src/client/components/Blog/VPBlogAside.vue
+++ b/theme/src/client/components/Blog/VPBlogAside.vue
@@ -8,8 +8,10 @@ const { theme } = useData()
 
 <template>
   <div v-if="theme.profile" class="vp-blog-aside">
+    <slot name="blog-aside-top" />
     <VPBlogProfile />
     <VPBlogNav />
+    <slot name="blog-aside-bottom" />
   </div>
 </template>
 
diff --git a/theme/src/client/components/Blog/VPBlogExtract.vue b/theme/src/client/components/Blog/VPBlogExtract.vue
index b0f96b6f..76442236 100644
--- a/theme/src/client/components/Blog/VPBlogExtract.vue
+++ b/theme/src/client/components/Blog/VPBlogExtract.vue
@@ -64,6 +64,8 @@ const showBlogExtract = computed(() => {
     <Transition name="fade">
       <div v-show="open" class="blog-modal" @click.self="open = false">
         <div class="blog-modal-container" :class="{ open: lazyOpen }">
+          <slot name="blog-extract-before" />
+
           <div v-if="profile" class="profile">
             <p v-if="imageUrl" class="avatar">
               <img :src="imageUrl" :alt="profile.name">
@@ -95,6 +97,8 @@ const showBlogExtract = computed(() => {
               <span>{{ archives.text }}</span>
             </VPLink>
           </div>
+
+          <slot name="blog-extract-after" />
         </div>
       </div>
     </Transition>
diff --git a/theme/src/client/components/Blog/VPBlogTags.vue b/theme/src/client/components/Blog/VPBlogTags.vue
index d4e78067..ebf0266d 100644
--- a/theme/src/client/components/Blog/VPBlogTags.vue
+++ b/theme/src/client/components/Blog/VPBlogTags.vue
@@ -8,6 +8,8 @@ const { tags: tagsLink } = useBlogExtract()
 
 <template>
   <div class="vp-blog-tags" :class="{ 'has-list': postList.length > 0 }">
+    <slot name="blog-tags-before" />
+
     <div class="tags-nav">
       <h2 class="tags-title">
         <span class="vpi-tag icon" />
@@ -34,6 +36,8 @@ const { tags: tagsLink } = useBlogExtract()
 
       <VPShortPostList v-if="postList.length" :post-list="postList" />
     </div>
+
+    <slot name="blog-tags-after" />
   </div>
 </template>
 
diff --git a/theme/src/client/components/Blog/VPPostList.vue b/theme/src/client/components/Blog/VPPostList.vue
index f52adc11..ffa0f805 100644
--- a/theme/src/client/components/Blog/VPPostList.vue
+++ b/theme/src/client/components/Blog/VPPostList.vue
@@ -18,6 +18,7 @@ const {
 
 <template>
   <div class="vp-blog-post-list">
+    <slot name="blog-post-list-before" />
     <template v-for="(post, index) in postList" :key="post.path">
       <VPTransitionDrop appear :delay="index * 0.04">
         <VPPostItem
@@ -26,6 +27,7 @@ const {
         />
       </VPTransitionDrop>
     </template>
+    <slot name="blog-post-list-after" />
     <VPPagination
       v-if="isPaginationEnabled"
       :page="page"
@@ -35,6 +37,7 @@ const {
       :is-first-page="isFirstPage"
       @change="changePage"
     />
+    <slot name="blog-post-list-pagination-after" />
   </div>
 </template>
 
diff --git a/theme/src/client/components/VPContent.vue b/theme/src/client/components/VPContent.vue
index 5cf17e00..79f64314 100644
--- a/theme/src/client/components/VPContent.vue
+++ b/theme/src/client/components/VPContent.vue
@@ -22,14 +22,52 @@ const isBlogLayout = computed(() => {
 
 <template>
   <div
-    id="VPContent"
-    vp-content
-    class="vp-content" :class="{
+    id="VPContent" vp-content class="vp-content" :class="{
       'has-sidebar': hasSidebar && !props.isNotFound,
       'is-home': frontmatter.pageLayout === 'home',
     }"
   >
-    <VPBlog v-if="isBlogLayout" />
+    <VPBlog v-if="isBlogLayout">
+      <template #blog-top>
+        <slot name="blog-top" />
+      </template>
+      <template #blog-bottom>
+        <slot name="blog-bottom" />
+      </template>
+      <template #blog-archives-before>
+        <slot name="blog-archives-before" />
+      </template>
+      <template #blog-archives-after>
+        <slot name="blog-archives-after" />
+      </template>
+      <template #blog-tags-before>
+        <slot name="blog-tags-before" />
+      </template>
+      <template #blog-tags-after>
+        <slot name="blog-tags-after" />
+      </template>
+      <template #blog-post-list-before>
+        <slot name="blog-post-list-before" />
+      </template>
+      <template #blog-post-list-after>
+        <slot name="blog-post-list-after" />
+      </template>
+      <template #blog-post-list-pagination-after>
+        <slot name="blog-post-list-pagination-after" />
+      </template>
+      <template #blog-aside-top>
+        <slot name="blog-aside-top" />
+      </template>
+      <template #blog-aside-bottom>
+        <slot name="blog-aside-bottom" />
+      </template>
+      <template #blog-extract-before>
+        <slot name="blog-extract-before" />
+      </template>
+      <template #blog-extract-after>
+        <slot name="blog-extract-after" />
+      </template>
+    </VPBlog>
 
     <VPPage v-else-if="frontmatter.pageLayout === 'page'">
       <template #page-top>
@@ -44,10 +82,7 @@ const isBlogLayout = computed(() => {
 
     <VPHome v-else-if="frontmatter.pageLayout === 'home'" />
 
-    <component
-      :is="frontmatter.pageLayout"
-      v-else-if="frontmatter.pageLayout && frontmatter.pageLayout !== 'doc'"
-    />
+    <component :is="frontmatter.pageLayout" v-else-if="frontmatter.pageLayout && frontmatter.pageLayout !== 'doc'" />
 
     <VPDoc v-else>
       <template #doc-top>
diff --git a/theme/src/client/layouts/Layout.vue b/theme/src/client/layouts/Layout.vue
index b01542da..d631747b 100644
--- a/theme/src/client/layouts/Layout.vue
+++ b/theme/src/client/layouts/Layout.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { useRoute } from 'vuepress/client'
 import { watch } from 'vue'
-import VPBackdrop from '../components/VPBackdrop.vue'
-import VPContent from '../components/VPContent.vue'
-import VPLocalNav from '../components/VPLocalNav.vue'
-import VPNav from '../components/Nav/VPNav.vue'
-import VPSidebar from '../components/VPSidebar.vue'
-import VPSkipLink from '../components/VPSkipLink.vue'
-import VPFooter from '../components/VPFooter.vue'
-import VPBackToTop from '../components/VPBackToTop.vue'
-import VPEncryptGlobal from '../components/VPEncryptGlobal.vue'
+import VPBackdrop from '@theme/VPBackdrop.vue'
+import VPContent from '@theme/VPContent.vue'
+import VPLocalNav from '@theme/VPLocalNav.vue'
+import VPNav from '@theme/Nav/VPNav.vue'
+import VPSidebar from '@theme/VPSidebar.vue'
+import VPSkipLink from '@theme/VPSkipLink.vue'
+import VPFooter from '@theme/VPFooter.vue'
+import VPBackToTop from '@theme/VPBackToTop.vue'
+import VPEncryptGlobal from '@theme/VPEncryptGlobal.vue'
 import { useCloseSidebarOnEscape, useSidebar } from '../composables/sidebar.js'
 import { useGlobalEncrypt, usePageEncrypt } from '../composables/encrypt.js'
 import { useData } from '../composables/data.js'
@@ -110,6 +110,45 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
           <template #aside-outline-after>
             <slot name="aside-outline-after" />
           </template>
+          <template #blog-top>
+            <slot name="blog-top" />
+          </template>
+          <template #blog-bottom>
+            <slot name="blog-bottom" />
+          </template>
+          <template #blog-archives-before>
+            <slot name="blog-archives-before" />
+          </template>
+          <template #blog-archives-after>
+            <slot name="blog-archives-after" />
+          </template>
+          <template #blog-tags-before>
+            <slot name="blog-tags-before" />
+          </template>
+          <template #blog-tags-after>
+            <slot name="blog-tags-after" />
+          </template>
+          <template #blog-post-list-before>
+            <slot name="blog-post-list-before" />
+          </template>
+          <template #blog-post-list-after>
+            <slot name="blog-post-list-after" />
+          </template>
+          <template #blog-post-list-pagination-after>
+            <slot name="blog-post-list-pagination-after" />
+          </template>
+          <template #blog-aside-top>
+            <slot name="blog-aside-top" />
+          </template>
+          <template #blog-aside-bottom>
+            <slot name="blog-aside-bottom" />
+          </template>
+          <template #blog-extract-before>
+            <slot name="blog-extract-before" />
+          </template>
+          <template #blog-extract-after>
+            <slot name="blog-extract-after" />
+          </template>
         </VPContent>
       </slot>
       <VPBackToTop />
diff --git a/theme/src/client/layouts/NotFound.vue b/theme/src/client/layouts/NotFound.vue
index 47d2d595..3c6dc20e 100644
--- a/theme/src/client/layouts/NotFound.vue
+++ b/theme/src/client/layouts/NotFound.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { useRouteLocale, withBase } from 'vuepress/client'
-import VPNav from '../components/Nav/VPNav.vue'
-import VPSkipLink from '../components/VPSkipLink.vue'
-import VPFooter from '../components/VPFooter.vue'
+import VPNav from '@theme/Nav/VPNav.vue'
+import VPSkipLink from '@theme/VPSkipLink.vue'
+import VPFooter from '@theme/VPFooter.vue'
 import { useData } from '../composables/data.js'
 
 const root = useRouteLocale()