From 04ada17d5f9fd273a4ef904ca4e31ec3df9d2f04 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Mon, 18 Nov 2024 00:42:13 +0800
Subject: [PATCH] feat(theme): add categories transform and improve ui (#342)

---
 docs/notes/theme/config/主题配置.md             |  7 +++++++
 theme/src/client/components/Blog/VPBlogNav.vue  |  3 +++
 theme/src/client/components/Blog/VPPostItem.vue |  8 ++------
 theme/src/client/components/VPDocMeta.vue       |  3 +--
 theme/src/node/config/resolveThemeData.ts       |  5 +++++
 theme/src/node/pages/autoCategory.ts            | 10 ++++++----
 theme/src/shared/blog.ts                        | 10 +++++++++-
 7 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/docs/notes/theme/config/主题配置.md b/docs/notes/theme/config/主题配置.md
index e94436f3..e054349e 100644
--- a/docs/notes/theme/config/主题配置.md
+++ b/docs/notes/theme/config/主题配置.md
@@ -145,6 +145,13 @@ interface BlogOptions {
    */
   categoriesExpand?: number | 'deep'
 
+  /**
+   * 文章分类列表转换函数，比如排除不需要的一级分类
+   * @param categories 分类列表
+   * @returns 返回一个新的分类列表
+   */
+  categoriesTransform?: (categories: PageCategoryData[]) => PageCategoryData[]
+
   /**
    * 博客文章封面图
    *
diff --git a/theme/src/client/components/Blog/VPBlogNav.vue b/theme/src/client/components/Blog/VPBlogNav.vue
index 9171ee7d..92a0c338 100644
--- a/theme/src/client/components/Blog/VPBlogNav.vue
+++ b/theme/src/client/components/Blog/VPBlogNav.vue
@@ -15,6 +15,7 @@ const { hasBlogExtract, tags, archives, categories } = useBlogExtract()
 <template>
   <div v-if="hasBlogExtract" class="vp-blog-nav" :class="{ local: props.isLocal }">
     <VPLink
+      v-if="tags.link"
       class="nav-link"
       :class="{ active: route.path === tags.link }"
       :href="tags.link"
@@ -25,6 +26,7 @@ const { hasBlogExtract, tags, archives, categories } = useBlogExtract()
       <span class="icon vpi-chevron-right" />
     </VPLink>
     <VPLink
+      v-if="categories.link"
       class="nav-link"
       :class="{ active: route.path === categories.link }"
       :href="categories.link"
@@ -35,6 +37,7 @@ const { hasBlogExtract, tags, archives, categories } = useBlogExtract()
       <span class="icon vpi-chevron-right" />
     </VPLink>
     <VPLink
+      v-if="archives.link"
       class="nav-link"
       :class="{ active: route.path === archives.link }"
       :href="archives.link"
diff --git a/theme/src/client/components/Blog/VPPostItem.vue b/theme/src/client/components/Blog/VPPostItem.vue
index 264ffee3..ee97095d 100644
--- a/theme/src/client/components/Blog/VPPostItem.vue
+++ b/theme/src/client/components/Blog/VPPostItem.vue
@@ -290,6 +290,7 @@ const coverStyles = computed(() => {
 .blog-post-item-content .post-meta {
   display: flex;
   flex-wrap: wrap;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
   font-size: 14px;
@@ -302,11 +303,6 @@ const coverStyles = computed(() => {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  margin-right: 1rem;
-}
-
-.blog-post-item-content .post-meta > div:last-of-type {
-  margin-right: 0;
 }
 
 .blog-post-item-content .post-meta .tag-list {
@@ -333,7 +329,7 @@ const coverStyles = computed(() => {
 .blog-post-item-content .post-meta .icon {
   width: 14px;
   height: 14px;
-  margin: 0.3rem;
+  margin-right: 0.3rem;
   color: var(--vp-c-text-3);
   transition: color var(--vp-t-color);
 }
diff --git a/theme/src/client/components/VPDocMeta.vue b/theme/src/client/components/VPDocMeta.vue
index 53812cc9..4be3831e 100644
--- a/theme/src/client/components/VPDocMeta.vue
+++ b/theme/src/client/components/VPDocMeta.vue
@@ -90,6 +90,7 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
 .vp-doc-meta {
   display: flex;
   flex-wrap: wrap;
+  gap: 16px;
   align-items: center;
   justify-content: flex-start;
   padding: 1rem 0 0.5rem;
@@ -103,7 +104,6 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
 .vp-doc-meta p {
   display: flex;
   align-items: center;
-  margin-right: 1rem;
 }
 
 .vp-doc-meta .icon {
@@ -143,7 +143,6 @@ const hasMeta = computed(() => readingTime.value.time || tags.value.length || cr
 
 .vp-doc-meta .create-time {
   min-width: 110px;
-  margin-right: 0;
   text-align: right;
 }
 
diff --git a/theme/src/node/config/resolveThemeData.ts b/theme/src/node/config/resolveThemeData.ts
index 78e8a47d..1f9fa685 100644
--- a/theme/src/node/config/resolveThemeData.ts
+++ b/theme/src/node/config/resolveThemeData.ts
@@ -33,6 +33,11 @@ export function resolveThemeData(app: App, options: PlumeThemeLocaleOptions): Pl
     themeData.bulletin = opt
   }
 
+  if (isPlainObject(themeData.blog)) {
+    const { categoriesTransform: _, ...blog } = themeData.blog
+    themeData.blog = blog
+  }
+
   entries(options.locales || {}).forEach(([locale, opt]) => {
     themeData.locales![locale] = {}
     entries(opt).forEach(([key, value]) => {
diff --git a/theme/src/node/pages/autoCategory.ts b/theme/src/node/pages/autoCategory.ts
index 30384828..77f7764d 100644
--- a/theme/src/node/pages/autoCategory.ts
+++ b/theme/src/node/pages/autoCategory.ts
@@ -1,6 +1,6 @@
 import type { Page } from 'vuepress/core'
 import type { PageCategoryData, PlumeThemeLocaleOptions, PlumeThemePageData } from '../../shared/index.js'
-import { ensureLeadingSlash } from '@vuepress/helper'
+import { ensureLeadingSlash, isPlainObject } from '@vuepress/helper'
 import { resolveNotesLinkList } from '../config/index.js'
 import { hash } from '../utils/index.js'
 
@@ -15,11 +15,13 @@ export function autoCategory(
   options: PlumeThemeLocaleOptions,
 ) {
   const pagePath = page.filePathRelative
+  const blog = isPlainObject(options.blog) ? options.blog : {}
+  const enabled = blog.categories !== false
 
-  if (page.data.type || !pagePath)
+  if (page.data.type || !pagePath || !enabled)
     return
-  const notesLinks = resolveNotesLinkList(options)
 
+  const notesLinks = resolveNotesLinkList(options)
   if (notesLinks.some(link => page.path.startsWith(link)))
     return
 
@@ -44,5 +46,5 @@ export function autoCategory(
         name: match[2],
       }
     })
-  page.data.categoryList = categoryList
+  page.data.categoryList = blog.categoriesTransform?.(categoryList) || categoryList
 }
diff --git a/theme/src/shared/blog.ts b/theme/src/shared/blog.ts
index 6b29730b..5da0fc38 100644
--- a/theme/src/shared/blog.ts
+++ b/theme/src/shared/blog.ts
@@ -95,7 +95,8 @@ export interface PlumeThemeBlog {
   archivesLink?: string
 
   /**
-   * 是否启用分类页
+   * 是否启用分类功能
+   * - 启用后会生成分类页
    * @default true
    */
   categories?: boolean
@@ -114,6 +115,13 @@ export interface PlumeThemeBlog {
    */
   categoriesExpand?: number | 'deep'
 
+  /**
+   * 文章分类列表转换函数，比如排除不需要的一级分类
+   * @param categories 分类列表
+   * @returns 返回一个新的分类列表
+   */
+  categoriesTransform?: (categories: PageCategoryData[]) => PageCategoryData[]
+
   /**
    * 博客文章封面图
    *