From f1c751bc56020b81be68cdc776c3a2cd9ffde12c Mon Sep 17 00:00:00 2001 From: Lee Date: Thu, 24 Oct 2024 13:12:43 +0800 Subject: [PATCH] =?UTF-8?q?feat(nav):=20=E6=B7=BB=E5=8A=A0=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E6=A0=8F=E5=88=87=E6=8D=A2=E5=AD=97=E4=BD=93=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=20(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(CopyrightInfo): 修复显示bug * feat(nav): 添加导航栏切换字体功能 * style: 优化 css 内的字体导入方式 * style: 更新 css 引入链接，添加新字体 * Update src/plugins/fontSwitcher.js Co-authored-by: Estela ad Astra Signed-off-by: Lee --------- Signed-off-by: Lee Co-authored-by: Estela ad Astra --- build.config.ts | 8 ++++- example/docs/.vitepress/config.ts | 24 +++++++++++++- src/config.ts | 46 +++++++++++++++++++++++++- src/plugins/fontSwitcher.js | 54 +++++++++++++++++++++++++++++++ src/style.css | 6 ++++ src/theme.ts | 9 ++++++ 6 files changed, 144 insertions(+), 3 deletions(-) create mode 100644 src/plugins/fontSwitcher.js create mode 100644 src/style.css diff --git a/build.config.ts b/build.config.ts index 19093e0..460320b 100644 --- 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 index d632793..b69edd2 100644 --- 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 index f80e9b3..b24e50e 100644 --- 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({ 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 new file mode 100644 index 0000000..67d91cf --- /dev/null +++ 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 new file mode 100644 index 0000000..04f2a3c --- /dev/null +++ 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;/* 代码字体 */ +} + \ No newline at end of file diff --git a/src/theme.ts b/src/theme.ts index 15f00c6..bba5666 100644 --- 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