Skip to content

Commit

Permalink
docs: Vitepress 导航栏切换字体
Browse files Browse the repository at this point in the history
  • Loading branch information
Leetfs committed Oct 23, 2024
1 parent aa6c487 commit c60e6dc
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 6 deletions.
9 changes: 5 additions & 4 deletions docs/.vitepress/theme/fontSwitcher.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
// fontSwitcher.js
export const fontMap = {
'霞鹜文楷': "'霞鹜文楷', serif",
'霞鹜新晰黑': "'霞鹜新晰黑', serif",
// '霞鹜文楷': "'霞鹜文楷', serif",
// 字体映射表
'霞鹜文楷': '霞鹜文楷',
'霞鹜新晰黑': '霞鹜新晰黑',
};

// 字体切换函数
Expand All @@ -11,7 +12,7 @@ export const fontMap = {

// 添加全局字体切换事件监听
export const addFontSwitchListener = () => {
const fontSwitchItems = document.querySelectorAll('.items a'); // 选择所有导航项的 span
const fontSwitchItems = document.querySelectorAll('.items a'); // 选择所有导航项的 a 标签
// console.log(`找到 ${fontSwitchItems.length} 个字体切换项`);
fontSwitchItems.forEach(item => {
item.addEventListener('click', (e) => {
Expand Down
2 changes: 0 additions & 2 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ hero:
text: 生活琐事
link: /life

image?: ThemeableImage

# features:
# - title: 我认为:
# details: 没有未来的未来不是我想要的未来
Expand Down
112 changes: 112 additions & 0 deletions docs/tips/fontSwitch.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
---
title: Vitepress 导航栏切换字体
author: Lee
---

## 实现原理

定义一个 css 变量,在导航栏按钮被点击时更新 css 变量

## 添加按钮

```ts
// docs/.vitepress/config.ts
// nav ...
{
text: "切换字体",
items: [
{
text: "霞鹜文楷",
link: "#", // 因为不需要跳转,所以我们使用空链接
},
{
text: "霞鹜新晰黑",
link: "#",
},
],
},

```

## 在 CSS 中导入字体

将字体文件放入 `docs/public`

```css
@font-face {
font-family: '霞鹜文楷';
src: url('/LXGWWenKai-Regular.ttf') format('truetype');
}
```

## 在 CSS 中引入 CSS 变量

由于 `--main-font` 被赋值前的初值为空,我们可以将备用字体选项作为 `默认字体` 来使用

``` css
:root {
/* var(--main-font, '备用字体') */
--vp-font-family-base: var(--main-font, '霞鹜文楷');/* 文本字体 */
--vp-font-family-mono: "霞鹜文楷-等宽";/* 代码字体 */
}
```

## 监听按钮并传递字体名给 CSS 变量

这里我们新建一个 js 脚本,用于监听按钮和更新 CSS 变量

```js
// docs/.vitepress/theme/fontSwitcher.js
export const fontMap = {
'霞鹜文楷': "'霞鹜文楷', serif", // '按钮名':'字体名',备用字体(可选)
'霞鹜新晰黑': "'霞鹜新晰黑', serif",
};

// 字体切换函数
export const switchFont = (font) => {
document.documentElement.style.setProperty('--main-font', fontMap[font]);
};

// 添加全局字体切换事件监听
export const addFontSwitchListener = () => {
// 通常情况下 vitepress 下拉栏内容默认包裹在 span 标签,请替换为('.items span'),本站点下拉栏包裹在 a 标签内故使用 a
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
// docs/.vitepress/theme/index.ts
// https://vitepress.dev/guide/custom-theme
import PtjsTheme from '@project-trans/vitepress-theme-project-trans/theme'
import { onMounted } from 'vue'
import { addFontSwitchListener } from './fontSwitcher' // 导入脚本
import 'uno.css'
import './style.css'

export default {
extends: PtjsTheme, // 这里是我导入的自定义主题
setup() {
onMounted(() => {
addFontSwitchListener(); // 添加字体切换的事件监听器
});
},
}
```

## 结尾

如不生效,请善用控制台检查css文件的访问路径是否正确,脚本是否正常执行,是否正确的获取到了按钮内容(参考注释)

0 comments on commit c60e6dc

Please sign in to comment.