feat(theme): add page title badge (#183)

docs/notes/theme/config/frontmatter/basic.md

@@ -3,6 +3,7 @@ title: 通用配置
 author: pengzhanbo
 createTime: 2024/03/02 20:01:09
 permalink: /config/frontmatter/basic/
+badge: 徽章 badge
 ---
 
 ## 概述
@@ -14,7 +15,6 @@ permalink: /config/frontmatter/basic/
 ```md
 ---
 title: 标题
-author: 作者
 createTime: 2024/03/02 20:01:09
 permalink: /config/frontmatter/basic/
 ---
@@ -56,6 +56,12 @@ permalink: /config/frontmatter/basic/
 
   主题会在文件创建时，自动填充 当前文件名作为 文章标题。
 
+### badge
+
+- 类型： `string | { text: string, type?: 'info' | 'tip' | 'warning' | 'danger' }`
+
+在文章标题右侧显示 徽章。
+
 ### createTime
 
 - 类型： `string`

docs/notes/theme/guide/组件/轮播图.md

@@ -3,6 +3,7 @@ title: 轮播图
 icon: dashicons:images-alt2
 createTime: 2024/09/12 22:00:22
 permalink: /guide/components/swiper/
+badge: v1.0.0-rc.98 +
 ---
 
 ## 概述

theme/src/client/components/VPDocMeta.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+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'
@@ -28,12 +29,20 @@ const tags = computed(() => {
   return []
 })
 
+const badge = computed(() => {
+  if (matter.value.badge) {
+    return typeof matter.value.badge === 'string' ? { text: matter.value.badge } : matter.value.badge
+  }
+  return false
+})
+
 const hasMeta = computed(() => readingTime.value.time || tags.value.length || createTime.value)
 </script>
 
 <template>
   <h1 class="vp-doc-title page-title" :class="{ padding: !hasMeta }">
     {{ page.title }}
+    <VPBadge v-if="badge" :type="badge.type || 'tip'" :text="badge.text" />
   </h1>
   <div v-if="hasMeta" class="vp-doc-meta">
     <p v-if="readingTime.time && matter.readingTime !== false" class="reading-time">

theme/src/node/config/extendsBundlerOptions.ts

@@ -25,7 +25,7 @@ export function extendsBundlerOptions(bundlerOptions: any, app: App): void {
   ])
 
   if (isPackageExists('swiper')) {
-    addViteOptimizeDepsInclude(bundlerOptions, app, ['swiper/modules', 'swiper/vue'], true)
+    addViteOptimizeDepsInclude(bundlerOptions, app, ['swiper/modules', 'swiper/vue'])
     addViteSsrNoExternal(bundlerOptions, app, ['swiper'])
   }
 

theme/src/shared/frontmatter/post.ts

@@ -17,4 +17,12 @@ export interface PlumeThemePostFrontmatter extends PlumeThemePageFrontmatter {
    * @default false
    */
   draft?: boolean
+
+  /**
+   * 标题徽章
+   */
+  badge?: string | {
+    text: string
+    type?: 'info' | 'tip' | 'warning' | 'danger'
+  }
 }