feat(theme): add categories transform and improve ui (#342)

docs/notes/theme/config/主题配置.md

@@ -145,6 +145,13 @@ interface BlogOptions {
    */
   categoriesExpand?: number | 'deep'
 
+  /**
+   * 文章分类列表转换函数，比如排除不需要的一级分类
+   * @param categories 分类列表
+   * @returns 返回一个新的分类列表
+   */
+  categoriesTransform?: (categories: PageCategoryData[]) => PageCategoryData[]
+
   /**
    * 博客文章封面图
    *

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"

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);
 }

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;
 }
 

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]) => {

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
 }

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[]
+
   /**
    * 博客文章封面图
    *