feat(FontSwitcher): ✨ enhance font switching functionality with dynam…

…ic font loading

example/docs/.vitepress/config.ts

@@ -62,6 +62,7 @@ const themeConfig: ThemeContext = {
   // HideReadingTime: true, /* 隐藏字数和预计阅读时间 */
   // HideLastUpdated: true, /* 隐藏最后更新时间 */
   // HideAuthors: true, /* 隐藏作者信息 */
+  // fontsBaseUrl: 'http://localhost:8788', // For local development with wrangler pages dev
 }
 
 // https://vitepress.dev/reference/site-config

src/components/FontSwitcher/FontSwitcher.vue

@@ -1,62 +1,53 @@
 <script setup lang="tsx">
-import { useStorage } from '@vueuse/core'
+import type { PjtsThemeConfig } from '../../config'
+import { useFetch, useStorage } from '@vueuse/core'
+import { useData } from 'vitepress'
 import VPFlyout from 'vitepress/dist/client/theme-default/components/VPFlyout.vue'
-import { watchEffect } from 'vue'
+import { computed, watchEffect } from 'vue'
 import FontSwitcherItem from './FontSwitcherItem.vue'
 
+const { theme } = useData<PjtsThemeConfig>()
+
+const fontsBaseUrl = computed(() => theme.value.fontsBaseUrl)
+
+const { data: fonts } = useFetch<Record<string, { paths: string[], fontFamily: string }>>(
+  `${fontsBaseUrl.value}/path_map.json`,
+).json()
+
 const activeFont = useStorage('activeFont', '')
 
 watchEffect(() => {
+  if (!fonts.value)
+    return
+  if (!fonts.value[activeFont.value]) {
+    activeFont.value = '默认字体'
+  }
   document.documentElement.style.setProperty(
     '--main-font',
-    activeFont.value,
+    fonts.value[activeFont.value].fontFamily,
   )
 })
 
-const items = [
-  {
-    name: '黑体',
-    value: 'sans',
-  },
-  {
-    name: '宋体',
-    value: 'serif',
-  },
-  {
-    name: '更纱黑体',
-    value: 'Sarasa UI SC',
-  },
-  {
-    name: '思源宋体',
-    value: 'Source Han Serif CN',
-  },
-  {
-    name: '霞鹜文楷',
-    value: 'LXGW WenKai',
-  },
-  {
-    name: '霞鹜文楷 Mono',
-    value: 'LXGW WenKai Mono',
-  },
-  {
-    name: '霞鹜新晰黑',
-    value: 'LXGW Neo XiHei',
-  },
-  {
-    name: '新晰黑 Code',
-    value: 'NeoXiHei Code',
-  },
-  {
-    name: '默认字体',
-    value: '',
-  },
-].map(item => ({
-  component: <FontSwitcherItem fontName={item.name} value={item.value} />,
-}))
+const items = computed(() => {
+  if (!fonts.value)
+    return []
+  return Object.entries(fonts.value).map(([displayName]) => ({
+    component: <FontSwitcherItem fontName={displayName} />,
+  }))
+})
 </script>
 
 <template>
   <VPFlyout icon="i-octicon:typography-16" :items="items" />
+  <template v-if="fonts && fonts[activeFont]">
+    <link
+      v-for="css in fonts[activeFont].paths"
+      :key="css"
+      rel="stylesheet"
+      as="style"
+      :href="`${fontsBaseUrl}/${css}/result.css`"
+    >
+  </template>
 </template>
 
 <style lang="css" scoped>

src/components/FontSwitcher/FontSwitcherItem.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { useStorage } from '@vueuse/core'
 
-defineProps<{ fontName: string, value: string }>()
+defineProps<{ fontName: string }>()
 const activeFont = useStorage('activeFont', '')
 </script>
 
 <template>
-  <div class="VPMenuLink" @click="activeFont = value">
-    <span class="link" :class="[activeFont === value && 'active']">{{ fontName }}</span>
+  <div class="VPMenuLink" @click="activeFont = fontName">
+    <span class="link" :class="[activeFont === fontName && 'active']">{{ fontName }}</span>
   </div>
 </template>
 

src/config.ts

@@ -27,6 +27,7 @@ export interface PjtsThemeConfig extends DefaultTheme.Config {
   sitemap?: {
     hostname: string
   }
+  fontsBaseUrl: string
 }
 
 // 从文件系统读取 Markdown 文件内容
@@ -74,6 +75,7 @@ function genConfig() {
     HideAuthors,
     rootDir,
     hostName,
+    fontsBaseUrl = 'https://fonts.project-trans.org',
   } = themeConfig
 
   return defineConfigWithTheme<PjtsThemeConfig>({
@@ -193,6 +195,7 @@ function genConfig() {
           },
         },
       },
+      fontsBaseUrl,
     },
     transformHead: async (context) => {
       let head = [...context.head]

src/style.css

@@ -1,4 +1,3 @@
-@import 'https://fonts.project-trans.org/fonts.css';
 :root {
   --vp-font-family-base: var(--main-font) !important; /* 文本字体 */
   --vp-font-family-mono: var(--main-font) !important; /* 代码字体 */

src/utils/themeContext.ts

@@ -23,6 +23,7 @@ export interface ThemeContext {
   HideLastUpdated?: boolean
   HideAuthors?: boolean
   hostName: string
+  fontsBaseUrl?: string
 }
 
 const themeContext = new AsyncLocalStorage<ThemeContext>()