feat(theme): add icon support for home hero actions (#456)

pengzhanbo · Feb 8, 2025 · 90db034 · 90db034
1 parent 3017bd7
commit 90db034
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 7 deletions.
diff --git a/docs/notes/theme/guide/自定义首页.md b/docs/notes/theme/guide/自定义首页.md
@@ -154,9 +154,11 @@ interface PlumeThemeHomeHero extends PlumeHomeConfigBase {
     tagline?: string
     text?: string
     actions?: {
-      theme?: 'brand' | 'alt'
+      theme?: 'brand' | 'alt' | 'sponsor'
       text: string
       link?: string
+      icon?: string // 文本左侧图标
+      suffixIcon?: string // 文本右侧图标
       target?: '_blank' | '_self' | string
       rel?: string
     }

diff --git a/theme/src/client/components/Home/VPHomeHero.vue b/theme/src/client/components/Home/VPHomeHero.vue
@@ -68,6 +68,8 @@ useHomeHeroTintPlate(
               :href="action.link"
               :target="action.target"
               :rel="action.rel"
+              :icon="action.icon"
+              :suffix-icon="action.suffixIcon"
             />
           </div>
         </div>
@@ -168,8 +170,14 @@ useHomeHeroTintPlate(
   margin: 30px 0 0;
 }
 
+.action {
+  display: flex;
+  gap: 24px;
+  align-items: center;
+}
+
 .action :deep(.vp-button) {
-  margin-right: 24px;
+  margin-left: 0;
 }
 
 .action :deep(.vp-button:last-of-type) {

diff --git a/theme/src/client/components/VPButton.vue b/theme/src/client/components/VPButton.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import VPIcon from '@theme/VPIcon.vue'
 import { computed, toRef } from 'vue'
 import { useRouter, withBase } from 'vuepress/client'
 import { useLink } from '../composables/index.js'
@@ -7,14 +8,17 @@ interface Props {
   tag?: string
   size?: 'medium' | 'big'
   theme?: 'brand' | 'alt' | 'sponsor'
-  text: string
+  text?: string
   href?: string
   target?: string
   rel?: string
+  icon?: string
+  suffixIcon?: string
 }
 const props = withDefaults(defineProps<Props>(), {
   size: 'medium',
   theme: 'brand',
+  text: '',
   tag: undefined,
   href: undefined,
   target: undefined,
@@ -47,7 +51,11 @@ function linkTo(e: Event) {
     :rel="rel ?? (isExternal ? 'noreferrer' : undefined)"
     @click="linkTo($event)"
   >
-    {{ text }}
+    <span class="button-content">
+      <VPIcon v-if="icon" :name="icon" />
+      <slot><span>{{ text }}</span></slot>
+      <VPIcon v-if="suffixIcon" :name="suffixIcon" />
+    </span>
   </Component>
 </template>
 
@@ -136,4 +144,19 @@ function linkTo(e: Event) {
   background-color: var(--vp-button-sponsor-active-bg);
   border-color: var(--vp-button-sponsor-active-border);
 }
+
+.vp-button .button-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vp-button .button-content :deep(.vp-icon) {
+  width: 1.2em;
+  height: 1.2em;
+}
+
+.vp-button + .vp-button {
+  margin-left: 1em;
+}
 </style>
diff --git a/theme/src/client/globalComponents.ts b/theme/src/client/globalComponents.ts
@@ -5,6 +5,7 @@ import VPCardMasonry from '@theme/global/VPCardMasonry.vue'
 import VPImageCard from '@theme/global/VPImageCard.vue'
 import VPLinkCard from '@theme/global/VPLinkCard.vue'
 import VPHomeBox from '@theme/Home/VPHomeBox.vue'
+import VPButton from '@theme/VPButton.vue'
 import VPIcon from '@theme/VPIcon.vue'
 import { hasGlobalComponent } from '@vuepress/helper/client'
 import { type App, h, resolveComponent } from 'vue'
@@ -31,6 +32,8 @@ export function globalComponents(app: App) {
   app.component('Icon', VPIcon)
   app.component('VPIcon', VPIcon)
 
+  app.component('VPButton', VPButton)
+
   app.component('HomeBox', VPHomeBox)
   app.component('VPHomeBox', VPHomeBox)
 

diff --git a/theme/src/node/prepare/prepareIcons.ts b/theme/src/node/prepare/prepareIcons.ts
@@ -16,8 +16,8 @@ interface IconData {
 type CollectMap = Record<string, string[]>
 type IconDataMap = Record<string, IconData>
 
-const ICON_REGEXP = /<(?:VP)?(Icon|Card|LinkCard)([^>]*)>/g
-const ICON_NAME_REGEXP = /(?:name|icon)="([^"]+)"/
+const ICON_REGEXP = /<(?:VP)?(Icon|Card|LinkCard|Button)([^>]*)>/g
+const ICON_NAME_REGEXP = /(?:name|icon|suffix-icon)="([^"]+)"/
 const URL_CONTENT_REGEXP = /(url\([\s\S]+\))/
 const ICONIFY_NAME = /^[\w-]+:[\w-]+$/
 const JS_FILENAME = 'internal/iconify.js'
@@ -124,6 +124,14 @@ function getIconsWithPage(page: Page): string[] {
             list.push(feature.icon)
         }
       }
+      if (config.type === 'hero' && config.hero?.actions?.length) {
+        for (const action of config.hero.actions) {
+          if (action.icon && isIconify(action.icon))
+            list.push(action.icon)
+          if (action.suffixIcon && isIconify(action.suffixIcon))
+            list.push(action.suffixIcon)
+        }
+      }
     }
   }
 

diff --git a/theme/src/shared/frontmatter/home.ts b/theme/src/shared/frontmatter/home.ts
@@ -7,7 +7,7 @@ export interface PlumeThemeHomeFrontmatter extends PlumeNormalFrontmatter, Omit<
   config?: PlumeThemeHomeConfig[]
 }
 
-export type PlumeThemeHomeConfig = PlumeThemeHomeBanner | PlumeThemeHomeTextImage | PlumeThemeHomeFeatures | PlumeThemeHomeProfile
+export type PlumeThemeHomeConfig = PlumeThemeHomeBanner | PlumeThemeHomeTextImage | PlumeThemeHomeFeatures | PlumeThemeHomeProfile | PlumeThemeHomeHero
 
 export interface PlumeThemeHero {
   name: string
@@ -22,6 +22,8 @@ export interface PlumeThemeHeroAction {
   link?: string
   target?: string
   rel?: string
+  icon?: string
+  suffixIcon?: string
 }
 
 export interface PlumeHomeConfigBase {