diff --git a/docs/notes/theme/config/主题配置.md b/docs/notes/theme/config/主题配置.md index fbb6edd1..bb752c41 100644 --- a/docs/notes/theme/config/主题配置.md +++ b/docs/notes/theme/config/主题配置.md @@ -341,15 +341,19 @@ export default { - `'douban'` - `'steam'` - `'xbox'` - - `{ svg: string }`: 自定义图标,传入 svg 字符串 + - `{ svg: string, name?: string }`: 自定义图标,传入 svg 源码字符串,可选 `name` 字段,用于配置 [`navbarSocialInclude`](#navbarsocialinclude) 示例: -``` ts +``` ts :no-line-numbers export default { theme: plumeTheme({ social: [ - { icon: 'github', link: 'https://github.com/zhangsan' } + { icon: 'github', link: 'https://github.com/zhangsan' }, + { + icon: { svg: 'xxxxx', name: 'xxx' }, + link: 'https://xxx.com' + }, ] }) } @@ -364,6 +368,8 @@ export default { 允许显示在导航栏的社交链接。 该配置仅在 PC 端下有效。 + 如果 [`social`](#social) 配置为 `{ svg: string, name: string}` 则可将 `name` 作为 `navbarSocialInclude` 的值。 + ### navbar - 类型: `NavItem[]` diff --git a/theme/src/client/components/Nav/VPNavBarExtra.vue b/theme/src/client/components/Nav/VPNavBarExtra.vue index 8a057003..9b863ad5 100644 --- a/theme/src/client/components/Nav/VPNavBarExtra.vue +++ b/theme/src/client/components/Nav/VPNavBarExtra.vue @@ -14,9 +14,13 @@ const social = computed(() => { if (!includes.length) return theme.value.social - return theme.value.social?.filter( - ({ icon }) => typeof icon === 'string' && includes.includes(icon), - ) + return theme.value.social?.filter(({ icon }) => { + if (typeof icon === 'string') + return includes.includes(icon) + if (icon.name) + return includes.includes(icon.name) + return false + }) }) const hasExtraContent = computed( diff --git a/theme/src/client/components/Nav/VPNavBarSocialLinks.vue b/theme/src/client/components/Nav/VPNavBarSocialLinks.vue index 891325f9..3343a1d8 100644 --- a/theme/src/client/components/Nav/VPNavBarSocialLinks.vue +++ b/theme/src/client/components/Nav/VPNavBarSocialLinks.vue @@ -10,9 +10,13 @@ const social = computed(() => { if (!includes.length) return theme.value.social - return theme.value.social?.filter( - ({ icon }) => typeof icon === 'string' && includes.includes(icon), - ) + return theme.value.social?.filter(({ icon }) => { + if (typeof icon === 'string') + return includes.includes(icon) + if (icon.name) + return includes.includes(icon.name) + return false + }) }) diff --git a/theme/src/shared/base.ts b/theme/src/shared/base.ts index 0b08a091..e4b72bdc 100644 --- a/theme/src/shared/base.ts +++ b/theme/src/shared/base.ts @@ -39,7 +39,7 @@ export type SocialLinkIconUnion = | 'stackoverflow' | 'xbox' -export type SocialLinkIcon = SocialLinkIconUnion | { svg: string } +export type SocialLinkIcon = SocialLinkIconUnion | { svg: string, name?: string } export interface PresetLocale { home: string diff --git a/theme/src/shared/options/locale.ts b/theme/src/shared/options/locale.ts index 7b4f7fca..d5dd3e09 100644 --- a/theme/src/shared/options/locale.ts +++ b/theme/src/shared/options/locale.ts @@ -59,7 +59,7 @@ export interface PlumeThemeLocaleData extends LocaleData { * 允许显示在导航栏的社交类型 * @default - ['github', 'twitter', 'discord', 'facebook'] */ - navbarSocialInclude?: SocialLinkIconUnion[] + navbarSocialInclude?: (SocialLinkIconUnion | (string & { zz_IGNORE_ME?: never }))[] /** * 博客配置