【Vitepress系列】-- 基础使用，充分利用配置项

原文链接

一、创建

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