diff --git a/theme/src/client/components/VPContent.vue b/theme/src/client/components/VPContent.vue
index 5047c142..238e7744 100644
--- a/theme/src/client/components/VPContent.vue
+++ b/theme/src/client/components/VPContent.vue
@@ -7,18 +7,15 @@ import VPHome from '@theme/Home/VPHome.vue'
 import VPFriends from '@theme/VPFriends.vue'
 import { useData, useSidebar } from '../composables/index.js'
 import { inBrowser } from '../utils/index.js'
+import { useBlogPageData } from '../composables/page.js'
 
 const props = defineProps<{
   isNotFound?: boolean
 }>()
 
 const { hasSidebar } = useSidebar()
-const { frontmatter, page } = useData()
-
-const isBlogLayout = computed(() => {
-  const { type } = page.value
-  return type === 'blog' || type === 'blog-archives' || type === 'blog-tags' || type === 'blog-categories'
-})
+const { frontmatter } = useData()
+const { isBlogLayout } = useBlogPageData()
 
 watch([isBlogLayout, () => frontmatter.value.pageLayout], () => nextTick(() =>
   inBrowser && document.documentElement.classList.toggle(
@@ -54,6 +51,12 @@ watch([isBlogLayout, () => frontmatter.value.pageLayout], () => nextTick(() =>
       <template #blog-tags-after>
         <slot name="blog-tags-after" />
       </template>
+      <template #blog-categories-before>
+        <slot name="blog-categories-before" />
+      </template>
+      <template #blog-categories-after>
+        <slot name="blog-categories-after" />
+      </template>
       <template #blog-post-list-before>
         <slot name="blog-post-list-before" />
       </template>
diff --git a/theme/src/client/components/VPDoc.vue b/theme/src/client/components/VPDoc.vue
index 8ab60784..fe2104b8 100644
--- a/theme/src/client/components/VPDoc.vue
+++ b/theme/src/client/components/VPDoc.vue
@@ -10,13 +10,13 @@ import { useEncrypt } from '../composables/encrypt.js'
 import { useSidebar } from '../composables/sidebar.js'
 import { useData } from '../composables/data.js'
 import { useHeaders } from '../composables/outline.js'
-import { useBlogPost } from '../composables/page.js'
+import { useBlogPageData } from '../composables/page.js'
 
 const { page, theme, frontmatter, isDark } = useData()
 const route = useRoute()
 
 const { hasSidebar, hasAside, leftAside } = useSidebar()
-const { isBlogPost } = useBlogPost()
+const { isBlogPost } = useBlogPageData()
 const headers = useHeaders()
 const { isPageDecrypted } = useEncrypt()
 
diff --git a/theme/src/client/components/VPDocMeta.vue b/theme/src/client/components/VPDocMeta.vue
index 0b603238..57b06582 100644
--- a/theme/src/client/components/VPDocMeta.vue
+++ b/theme/src/client/components/VPDocMeta.vue
@@ -4,11 +4,11 @@ import { useReadingTimeLocale } from '@vuepress/plugin-reading-time/client'
 import VPLink from '@theme/VPLink.vue'
 import { useData } from '../composables/data.js'
 import { useTagColors } from '../composables/tag-colors.js'
-import { useBlogPost } from '../composables/page.js'
+import { useBlogPageData } from '../composables/page.js'
 import { useBlogExtract } from '../composables/blog-extract.js'
 
 const { page, frontmatter: matter } = useData<'post'>()
-const { isBlogPost } = useBlogPost()
+const { isBlogPost } = useBlogPageData()
 const colors = useTagColors()
 const readingTime = useReadingTimeLocale()
 const { categories } = useBlogExtract()
@@ -53,7 +53,7 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
       <span v-if="index !== categoryList.length - 1" class="dot">&rsaquo;</span>
     </template>
   </div>
-  <h1 class="vp-doc-title" :class="{ padding: !hasMeta }">
+  <h1 class="vp-doc-title page-title" :class="{ padding: !hasMeta }">
     {{ page.title }}
   </h1>
   <div v-if="hasMeta" class="vp-doc-meta">
diff --git a/theme/src/client/components/VPLocalNav.vue b/theme/src/client/components/VPLocalNav.vue
index f4465121..a76290d4 100644
--- a/theme/src/client/components/VPLocalNav.vue
+++ b/theme/src/client/components/VPLocalNav.vue
@@ -5,7 +5,7 @@ import VPLocalNavOutlineDropdown from '@theme/VPLocalNavOutlineDropdown.vue'
 import { useSidebar } from '../composables/sidebar.js'
 import { useHeaders } from '../composables/outline.js'
 import { useData } from '../composables/data.js'
-import { useBlogPost } from '../composables/page.js'
+import { useBlogPageData } from '../composables/page.js'
 
 const props = defineProps<{
   open: boolean
@@ -15,7 +15,7 @@ const props = defineProps<{
 defineEmits<(e: 'openMenu') => void>()
 
 const { theme } = useData()
-const { isBlogPost } = useBlogPost()
+const { isBlogPost } = useBlogPageData()
 
 const { hasSidebar } = useSidebar()
 const { y } = useWindowScroll()
diff --git a/theme/src/client/composables/langs.ts b/theme/src/client/composables/langs.ts
index 8f7c749b..994b1149 100644
--- a/theme/src/client/composables/langs.ts
+++ b/theme/src/client/composables/langs.ts
@@ -4,7 +4,7 @@ import { normalizeLink } from '../utils/index.js'
 import { useThemeData } from './theme-data.js'
 import { useData } from './data.js'
 import { getSidebarFirstLink, useSidebarData } from './sidebar.js'
-import { useBlogPost } from './page.js'
+import { useBlogPageData } from './page.js'
 
 export function useLangs({
   removeCurrent = true,
@@ -13,7 +13,7 @@ export function useLangs({
   const { page } = useData()
   const routeLocale = useRouteLocale()
   const sidebar = useSidebarData()
-  const { isBlogPost } = useBlogPost()
+  const { isBlogPost } = useBlogPageData()
 
   const currentLang = computed(() => {
     const link = routeLocale.value
diff --git a/theme/src/client/composables/page.ts b/theme/src/client/composables/page.ts
index 86474205..5e70cdfe 100644
--- a/theme/src/client/composables/page.ts
+++ b/theme/src/client/composables/page.ts
@@ -2,7 +2,7 @@ import { computed } from 'vue'
 import { useData } from './data.js'
 import { usePostList } from './blog-data.js'
 
-export function useBlogPost() {
+export function useBlogPageData() {
   const { page } = useData()
   const postList = usePostList()
 
@@ -10,7 +10,13 @@ export function useBlogPost() {
     return postList.value.some(item => item.path === page.value.path)
   })
 
+  const isBlogLayout = computed(() => {
+    const type = page.value.type
+    return type === 'blog' || type === 'blog-archives' || type === 'blog-tags' || type === 'blog-categories'
+  })
+
   return {
     isBlogPost,
+    isBlogLayout,
   }
 }
diff --git a/theme/src/client/composables/prev-next.ts b/theme/src/client/composables/prev-next.ts
index d9600e4c..4172f9ed 100644
--- a/theme/src/client/composables/prev-next.ts
+++ b/theme/src/client/composables/prev-next.ts
@@ -7,7 +7,7 @@ import { resolveNavLink } from '../utils/index.js'
 import { usePostList } from './blog-data.js'
 import { useSidebar } from './sidebar.js'
 import { useData } from './data.js'
-import { useBlogPost } from './page.js'
+import { useBlogPageData } from './page.js'
 
 export function usePrevNext() {
   const route = useRoute()
@@ -15,7 +15,7 @@ export function usePrevNext() {
   const { sidebar } = useSidebar()
   const postList = usePostList() as unknown as Ref<PlumeThemeBlogPostItem[]>
   const locale = usePageLang()
-  const { isBlogPost } = useBlogPost()
+  const { isBlogPost } = useBlogPageData()
 
   const prevNavList = computed(() => {
     const prevConfig = resolveFromFrontmatterConfig(frontmatter.value.prev)