一、创建
1. 要求
Node 18及以上版本
2. 使用
按下面的命令,可以生成一个基本的demo。
mkdir vitepress-test # 创建一个目录,也可以在老的项目中
cd vitepress-test
npm init -y # 初始化npm,老项目可以不用
npm install -D vitepress # 安装vitepress
npx vitepress init # 初始化,弹出界面如下,一步一步设置就行;
npm run docs:dev # 运行
┌ Welcome to VitePress!
│
◇ Where should VitePress initialize the config?
│ ./
│
◇ Site title:
│ My Awesome Project
│
◇ Site description:
│ A VitePress Site
│
◇ Theme:
│ Default Theme
│
◇ Use TypeScript for config and theme files?
│ Yes
│
◇ Add VitePress npm scripts to package.json?
│ Yes
│
└ Done! Now run npm run docs:dev and start writing.
3. 结果
4. 代码结构
默认生成的网站代码,结构如下:
.
├── .vitepress
│ ├── cache # 忽略
│ └── config.mts # 网站整体配置,主要是头部的
├── api-examples.md # 内容页
├── index.md # 首页
├── markdown-examples.md # 内容页
├── package-lock.json
└── package.json
二、配置
先放一张整理的名称图,看vitepress每个部分叫什么,知道叫什么,查文档也很快;图中
- 蓝色:config文件中可配置
- 红色:md文件中可配置
下面开始讲细节。
1. 整体配置
站点的整体配置,需要修改 .vitepress/config.mts的文件,下面用一个范例和注释来说主要的配置项:
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "十一月的花海", // 网站标题
description: "做一个安静的小破站", // 网站描述
locales: {
root: {
// 默认语言
label: '中文',
lang: 'zh',
themeConfig: {
logo