VitePress 安装与配置

参考链接

1 安装及配置

1.1 安装

shell

mkdir brandonvitepress && cd brandonvitepress

初始化

shell

yarn init

本地安装 VitePress

shell

yarn add --dev vitepress

创建第一篇文档

shell

mkdir docs && echo '# Hello VitePress' > docs/index.md

在 package.json.添加一些script

json

{
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:serve": "vitepress serve docs"
  }
}

在本地服务器上启动文档站点

shell

f:
cd Project/brandonvitepress
yarn docs:dev
yarn docs:dev

1.2 `/.vitepress/config.js` 配置

javascript

import mathjax3 from 'markdown-it-mathjax3';

const customElements = [
	'math', 'maction', 'maligngroup', 'malignmark', 'menclose', 'merror', 'mfenced', 'mfrac','mi','mlongdiv','mmultiscripts','mn','mo','mover',
	'mpadded','mphantom','mroot','mrow','ms','mscarries','mscarry','mscarries','msgroup','mstack','mlongdiv','msline','mstack','mspace','msqrt',
	'msrow','mstack','mstack','mstyle','msub','msup','msubsup','mtable','mtd','mtext','mtr','munder','munderover','semantics','math','mi','mn',
	'mo','ms','mspace','mtext','menclose','merror','mfenced','mfrac','mpadded','mphantom','mroot','mrow','msqrt','mstyle','mmultiscripts','mover',
	'mprescripts','msub','msubsup','msup','munder','munderover','none','maligngroup','malignmark','mtable','mtd','mtr','mlongdiv','mscarries',
	'mscarry','msgroup','msline','msrow','mstack','maction','semantics','annotation','annotation-xml','mjx-container','mjx-assistive-mml',
];

const fs = require("fs");
const path = require("path");

const docsPath = path.dirname(__dirname); // docs 目录路径
const sidebarConfig = generateSidebarConfig(docsPath);

function generateSidebarConfig(docsPath, link = '', index = 0) {

	const sidebarConfig = {};
	const files = fs.readdirSync(docsPath);

	files.forEach((filename) => {
		if (filename.startsWith(".")) return;
		const filepath = path.join(docsPath, filename);
		const stat = fs.statSync(filepath);
		// 如果是文件夹，则递归生成子级 sidebar 配置
		if (stat.isDirectory()) {
			if (index === 0) {
				const config = generateSidebarConfig(filepath, `/${filename}/`, index + 1);
				if (!sidebarConfig[`/${filename}/`]) {
					sidebarConfig[`/${filename}/`] = [config];
				}
			} else {
				if (!sidebarConfig.items) {
					sidebarConfig.items = [];
				}
				sidebarConfig.items.push(generateSidebarConfig(filepath, `${link}${filename}/`, index + 1))
			}
		} else {
			const extname = path.extname(filepath);
			const basename = path.basename(filepath, extname);
			if (filename === 'index.md' && index > 0) {
				const menuPath = path.dirname(filepath);
				const menuName = path.basename(menuPath)
				sidebarConfig.text = menuName;
				sidebarConfig.collapsed = true;
				sidebarConfig.link = link;
			}
			if (extname === ".md" && filename !== "index.md") {
				if (!sidebarConfig.items) {
					sidebarConfig.items = [];
				}
				sidebarConfig.items.push({
					text: basename,
					link: `${link}${basename}`,
				});
			}
		}
	});

	return sidebarConfig;

}

export default {
	base: "/",
	title: 'Brandon',
	ignoreDeadLinks: true,
	markdown: {
		lineNumbers: true,
		config: (md) => {
			md.use(mathjax3);
		},
	},
	vue: {
		template: {
			compilerOptions: {
				isCustomElement: (tag) => customElements.includes(tag),
			},
		},
	},
	lastUpdated: true,
	appearence: true,
	themeConfig: {
		siteTitle: "Brandon",
		logo: "/brandon.png",
		lastUpdated: "最近更新",
		sidebar: sidebarConfig,
		outlineTitle: '目录',
		nav: [{
				text: "Install",
				link: "/install/"
			},
			{
				text: "Daily",
				items: [{
						items: [{
								text: "202306",
								link: "/daily/202306/"
							},
							{
								text: "202307",
								link: "/daily/202307/"
							},
							{
								text: "202308",
								link: "/daily/202308/"
							},
							{
								text: "202309",
								link: "/daily/202309/"
							},
							{
								text: "202310",
								link: "/daily/202310/"
							},
							{
								text: "202311",
								link: "/daily/202311/"
							},
							{
								text: "202312",
								link: "/daily/202312/"
							}
						],
					},
					{
						items: [{
							text: "202401",
							link: "/daily/202401/"
						}, ],
					},
				],
			},
			{
				text: "Graduate",
				items: [{
						items: [{
								text: "English",
								link: "/graduate/english/"
							},
							{
								text: "En-Examination",
								link: "/graduate/english/examination/"
							},
						],
					},
					{
						items: [{
							text: "Mathematics",
							link: "/graduate/mathematics/"
						}, {
							text: "Ma-Examination",
							link: "/graduate/mathematics/examination/"
						}, ],
					},
				],
			},
		],
		socialLinks: [
			// Github
			{
				icon: "github",
				link: "https://github.com/DjyBrandon"
			},
			// Gitee
			{
				icon: {
					svg: '<svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>Gitee</title><path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"/></svg>',
				},
				link: "https://gitee.com/dong-jiayi",
			},
			// CSDN
			{
				icon: {
					svg: '<svg role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><title>CSDN</title><path d="M512 0c282.784 0 512 229.216 512 512s-229.216 512-512 512S0 794.784 0 512 229.216 0 512 0z m189.952 752l11.2-108.224c-31.904 9.536-100.928 16.128-147.712 16.128-134.464 0-205.728-47.296-195.328-146.304 11.584-110.688 113.152-145.696 232.64-145.696 54.784 0 122.432 8.8 151.296 18.336L768 272.704C724.544 262.24 678.272 256 599.584 256c-203.2 0-388.704 94.88-406.4 263.488C178.336 660.96 303.584 768 535.616 768c80.672 0 138.464-6.432 166.336-16z"/></svg>',
				},
				link: "https://blog.csdn.net/Brandon_",
			},
		],
	},
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183

1.3 运行及部署 Vitepress

运行

shell

yarn docs:dev

部署

shell

git init
git branch -m master main
git remote add brandonvitepress git@github.com:DjyBrandon/brandonlibrary
git remote -v
git add -A
git commit -m "first commit"
git pull brandonvitepress main
git pull brandonvitepress main --allow-unrelated-histories
git push -u brandonvitepress main
git push brandonvitepress main

2 markdown-it-mathjax3

一个从 markdown-it-katex 改造而来、额外增加了 MathJax v3 和 SVG 渲染支持的插件

2.1 安装 LaTeX 库

shell

npm install markdown-it-mathjax3 -D

2.2 配置 LaTeX 插件

修改.vitepress/config.js配置文件 markdown-it-mathjax3的配置与markdown-it-katex基本相同，但由于markdown-it-mathjax3使用svg渲染，增加了一些自定义标签，配置时同样需要将这些标签标记为自定义标签，防止编译出错

import mathjax3 from 'markdown-it-mathjax3';

const customElements = [
	'math', 'maction', 'maligngroup', 'malignmark', 'menclose', 'merror', 'mfenced', 'mfrac','mi','mlongdiv','mmultiscripts','mn','mo','mover',
	'mpadded','mphantom','mroot','mrow','ms','mscarries','mscarry','mscarries','msgroup','mstack','mlongdiv','msline','mstack','mspace','msqrt',
	'msrow','mstack','mstack','mstyle','msub','msup','msubsup','mtable','mtd','mtext','mtr','munder','munderover','semantics','math','mi','mn',
	'mo','ms','mspace','mtext','menclose','merror','mfenced','mfrac','mpadded','mphantom','mroot','mrow','msqrt','mstyle','mmultiscripts','mover',
	'mprescripts','msub','msubsup','msup','munder','munderover','none','maligngroup','malignmark','mtable','mtd','mtr','mlongdiv','mscarries',
	'mscarry','msgroup','msline','msrow','mstack','maction','semantics','annotation','annotation-xml','mjx-container','mjx-assistive-mml',
];

export default {
  markdown: {
    config: (md) => {
      md.use(mathjax3);
    },
  },
  vue: {
    template: {
      compilerOptions: {
        isCustomElement: (tag) => customElements.includes(tag),
      },
    },
  },
};

由于markdown-it-mathjax3使用svg渲染，不需要引入额外css文件。

plugpackage

tool

VitePress 安装与配置

1 安装及配置

1.1 安装

1.2 `/.vitepress/config.js` 配置

1.3 运行及部署 Vitepress

2 markdown-it-mathjax3

2.1 安装 LaTeX 库

2.2 配置 LaTeX 插件

3 前端导航页

4 Visitor Badge

VitePress 安装与配置 ​

1 安装及配置 ​

1.1 安装 ​

1.2 /.vitepress/config.js 配置 ​

1.3 运行及部署 Vitepress ​

2 markdown-it-mathjax3 ​

2.1 安装 LaTeX 库 ​

2.2 配置 LaTeX 插件 ​

3 前端导航页 ​

4 Visitor Badge ​

VitePress 安装与配置

1 安装及配置

1.1 安装

1.2 `/.vitepress/config.js` 配置

1.3 运行及部署 Vitepress

2 markdown-it-mathjax3

2.1 安装 LaTeX 库

2.2 配置 LaTeX 插件

3 前端导航页

4 Visitor Badge