feat(nav): 添加导航栏切换字体功能 (#9)

* fix(CopyrightInfo): 修复显示bug * feat(nav): 添加导航栏切换字体功能 * style: 优化 css 内的字体导入方式 * style: 更新 css 引入链接，添加新字体 * Update src/plugins/fontSwitcher.js Co-authored-by: Estela ad Astra <i@estela.moe> Signed-off-by: Lee <lee@mtftm.com> --------- Signed-off-by: Lee <lee@mtftm.com> Co-authored-by: Estela ad Astra <i@estela.moe>
project-trans · Oct 24, 2024 · f1c751b · f1c751b
1 parent 8663329
commit f1c751b
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 3 deletions.
diff --git a/build.config.ts b/build.config.ts
@@ -6,7 +6,7 @@ export default defineBuildConfig({
       builder: 'mkdist',
       input: './src',
       outDir: './dist',
-      pattern: ['**/*.ts', '**/*.css'],
+      pattern: ['**/*.ts', '**/*.css', '**/*.js'],
       format: 'esm',
       loaders: ['js'],
     },
@@ -25,6 +25,12 @@ export default defineBuildConfig({
       pattern: ['**/*.vue'],
       loaders: ['vue'],
     },
+    {
+      builder: 'mkdist',
+      input: './public',
+      outDir: './dist',
+      pattern: ['**/*'],
+    },
   ],
   declaration: true,
   clean: true,

diff --git a/example/docs/.vitepress/config.ts b/example/docs/.vitepress/config.ts
@@ -4,7 +4,29 @@ import type { ThemeContext } from '@project-trans/vitepress-theme-project-trans/
 import { withThemeContext } from '@project-trans/vitepress-theme-project-trans/utils'
 import type { DefaultTheme } from 'vitepress'
 
-const nav: DefaultTheme.NavItem[] = []
+const nav: NavConfig = [
+  {
+    text: "大学指南",
+    link: "/campus/",
+  },
+  {
+    text: "贡献指南",
+    items: [
+      {
+        text: "校园版块投稿指南",
+        link: "/contributor-guide/campus.md",
+      },
+      {
+        text: "其他投稿指南",
+        link: "/contributor-guide/other.md",
+      },
+      {
+        text: "校园版块贡献模板",
+        link: "/contributor-guide/CampusTemplate.md",
+      },
+    ],
+  },
+];
 
 const baseConfig = {
   useTitleFromFrontmatter: true,

diff --git a/src/config.ts b/src/config.ts
@@ -62,6 +62,50 @@ function genConfig() {
     sitePattern,
     org,
   } = themeConfig
+  const additionalNav = [
+    {
+      text: "切换字体",
+      items: [
+        {
+          text: "黑体",
+          link: "#",
+        },
+        {
+          text: "宋体",
+          link: "#",
+        },
+        {
+          text: "更纱黑体",
+          link: "#",
+        },
+        {
+          text: "思源宋体",
+          link: "#",
+        },
+        {
+          text: "霞鹜文楷",
+          link: "#",
+        },
+        {
+          text: "霞鹜文楷 Mono",
+          link: "#",
+        },
+        {
+          text: "霞鹜新晰黑",
+          link: "#",
+        },
+        {
+          text: "新晰黑 Code",
+          link: "#",
+        },
+        {
+          text: "默认字体",
+          link: "#",
+        },
+      ],
+    },
+  ];
+  const combinedNav = [...nav, ...additionalNav];
   return defineConfigWithTheme<PjtsThemeConfig>({
     lang: 'zh-CN',
     title: siteTitle,
@@ -113,7 +157,7 @@ function genConfig() {
       // https://vitepress.dev/reference/default-theme-config
       siteTitle: SiteTitle,
       logo: siteLogo,
-      nav,
+      nav: combinedNav,
       sidebar: generateSidebar(),
       socialLinks: [{ icon: 'github', link: githubRepoLink }],
       editLink: {

diff --git a/src/plugins/fontSwitcher.js b/src/plugins/fontSwitcher.js
@@ -0,0 +1,54 @@
+export const fontMap = {
+  // 字体映射表
+  '霞鹜文楷': 'LXGW WenKai',
+  '霞鹜文楷 Mono': 'LXGW WenKai Mono',
+  '霞鹜新晰黑': 'LXGW Neo XiHei',
+  '新晰黑 Code': 'NeoXiHei Code',
+  '系统字体': 'system-ui',
+  '更纱黑体': 'Sarasa UI CL',
+  '思源宋体': '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); // 切换字体
+        });
+      });
+    });
+  }
+};
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,6 @@
+@import 'https://fonts.project-trans.org/fonts.css';
+:root {
+    --vp-font-family-base: var(--main-font, system-ui) !important;/* 文本字体 */
+    --vp-font-family-mono: var(--main-font, system-ui) !important;/* 代码字体 */
+}
+
diff --git a/src/theme.ts b/src/theme.ts
@@ -1,6 +1,7 @@
 // https://vitepress.dev/guide/custom-theme
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme-without-fonts'
+import './style.css'
 
 import {
   NolebaseEnhancedReadabilitiesPlugin,
@@ -16,6 +17,9 @@ import '@nolebase/vitepress-plugin-highlight-targeted-heading/client/style.css'
 
 import Layout from './Layout.vue'
 
+import { onMounted } from 'vue'
+import { addFontSwitchListener } from './plugins/fontSwitcher'
+
 export type SidebarOptions = Options
 
 export default {
@@ -36,4 +40,9 @@ export default {
       },
     })
   },
+  setup() {
+    onMounted(() => {
+      addFontSwitchListener(); // 添加字体切换的事件监听器
+    });
+  },
 } satisfies Theme