feat!: 更改为使用主题包内的切换字体功能

Leetfs · Oct 24, 2024 · cd94652 · cd94652
1 parent 6055ca6
commit cd94652
Show file tree

Hide file tree

Showing 6 changed files with 719 additions and 187 deletions.
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -23,31 +23,31 @@ const nav: NavConfig = [
     text: '生活琐事',
     link: '/life/',
   },
-  {
-    text: "切换字体",
-    items: [
-      {
-        text: "更纱黑体",
-        link: "#",
-      },
-      {
-        text: "思源宋体",
-        link: "#",
-      },
-      {
-        text: "霞鹜文楷",
-        link: "#",
-      },
-      {
-        text: "霞鹜新晰黑",
-        link: "#",
-      },
-      {
-        text: "使用系统字体",
-        link: "#",
-      },
-    ],
-  },
+  // {
+  //   text: "切换字体",
+  //   items: [
+  //     {
+  //       text: "更纱黑体",
+  //       link: "#",
+  //     },
+  //     {
+  //       text: "思源宋体",
+  //       link: "#",
+  //     },
+  //     {
+  //       text: "霞鹜文楷",
+  //       link: "#",
+  //     },
+  //     {
+  //       text: "霞鹜新晰黑",
+  //       link: "#",
+  //     },
+  //     {
+  //       text: "使用系统字体",
+  //       link: "#",
+  //     },
+  //   ],
+  // },
 ]
 
 const baseConfig = {

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -9,9 +9,9 @@ import './style.css'
 
 export default {
   extends: PtjsTheme,
-  setup() {
-    onMounted(() => {
-      addFontSwitchListener(); // 添加字体切换的事件监听器
-    });
-  },
+  // setup() {
+  //   onMounted(() => {
+  //     addFontSwitchListener(); // 添加字体切换的事件监听器
+  //   });
+  // },
 }
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
@@ -152,33 +152,9 @@ html {
   margin-top: 2% !important;
 }
 
-@font-face {
-  font-family: '霞鹜文楷';
-  src: url('/fonts/LXGWWenKai-Regular.ttf') format('truetype');
-}
-@font-face {
-  font-family: '霞鹜文楷-等宽';
-  src: url('/fonts/LXGWWenKaiMono-Regular.ttf') format('truetype');
-}
-@font-face {
-  font-family: '霞鹜新晰黑';
-  src: url('/fonts/LXGWNeoXiHei.ttf') format('truetype');
-}
-@font-face {
-  font-family: '霞鹜新晰黑-等宽';
-  src: url('/fonts/NeoXiHeiCode-Regular.ttf') format('truetype');
-}
-@font-face {
-  font-family: '更纱黑体';
-  src: url('/fonts/SarasaUiCL-Regular.ttf') format('truetype');
-}
-@font-face {
-  font-family: '思源宋体';
-  src: url('./fonts/SourceHanSerifCN-Regular.otf') format('truetype');
-}
-:root {
---vp-font-family-base: var(--main-font, '霞鹜文楷');/* normal text font */
---vp-font-family-mono: "霞鹜文楷-等宽";/* code font */
-}
+/* :root {
+--vp-font-family-base: var(--main-font, '霞鹜文楷');/* normal text font
+--vp-font-family-mono: "霞鹜文楷-等宽";/* code font
+} */
 
 
diff --git a/docs/tips/fontSwitch.md b/docs/tips/fontSwitch.md
@@ -30,8 +30,6 @@ author: Lee
 
 ## 在 CSS 中导入字体
 
-将字体文件放入 `docs/public` 下
-
 ```css
 @font-face {
   font-family: '霞鹜文楷';
@@ -85,6 +83,68 @@ export const fontMap = {
 };
 ```
 
+> 上方为错误案例，vitepress 移动视图下的折叠导航栏默认处于折叠状态，只有当用户展开导航栏时，相关的资源才会被加载，而监听器创建在此事件之前，导致无法监听。
+
+### 正确样例
+
+```ts
+export const fontMap = {
+  // 字体映射表
+  '霞鹜文楷': 'LXGW WenKai',
+  '霞鹜文楷 Mono': 'LXGW WenKai Mono',
+  '霞鹜新晰黑': 'LXGW Neo XiHei',
+  '新晰黑 Code': 'NeoXiHei Code',
+  '默认字体': 'system-ui',
+  '更纱黑体': 'Sarasa UI SC',
+  '思源宋体': 'Source Han Serif CN',
+  '黑体': 'sans',
+  '宋体': 'serif',
+};
+
+// 字体切换函数
+export const switchFont = (font) => {
+  document.documentElement.style.setProperty('--main-font', fontMap[font]);
+};
+
+// 添加全局字体切换事件监听
+export const addFontSwitchListener = () => {
+  // 选择汉堡菜单
+  const hamburger = document.querySelector('.VPNavBarHamburger');
+  const fontSwitchItems = document.querySelectorAll('.items a'); // 选择所有导航项的 a 标签
+      // console.log(`找到 ${fontSwitchItems.length} 个字体切换项`);
+
+      fontSwitchItems.forEach(item => {
+        item.addEventListener('click', (e) => {
+          e.preventDefault();
+          const target = e.target;
+          const selectedFont = target.innerText; // 获取点击的字体名称
+          // console.log(`${selectedFont}`);
+          switchFont(selectedFont); // 切换字体
+        });
+      });
+
+  // 添加汉堡菜单事件监听
+  if (hamburger) {
+    hamburger.addEventListener('click', () => {
+      // 在汉堡菜单打开时添加字体切换事件监听
+      const fontSwitchItems = document.querySelectorAll('.items a'); // 选择所有导航项的 a 标签
+      // console.log(`找到 ${fontSwitchItems.length} 个字体切换项`);
+
+      fontSwitchItems.forEach(item => {
+        item.addEventListener('click', (e) => {
+          e.preventDefault();
+          const target = e.target;
+          const selectedFont = target.innerText; // 获取点击的字体名称
+          // console.log(`${selectedFont}`);
+          switchFont(selectedFont); // 切换字体
+        });
+      });
+    });
+  }
+};
+
+```
+
 ## 在 index.ts/index.js 内导入脚本
 
 ```ts

diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
     "@iconify-json/icon-park-outline": "^1.2.0",
     "@iconify-json/octicon": "^1.2.0",
     "@project-trans/suggestion-box": "^0.0.9",
-    "@project-trans/vitepress-theme-project-trans": "^0.3.1726924363",
+    "@project-trans/vitepress-theme-project-trans": "^0.4.1729767862",
     "@unocss/eslint-plugin": "^0.59.4",
     "eslint": "^8.57.0",
     "eslint-plugin-format": "^0.1.2",