VitePress 项目教程

1. 项目的目录结构及介绍

VitePress 项目的目录结构相对简洁，以下是一个典型的 VitePress 项目目录结构示例：

vitepress-project/
├── docs/
│   ├── .vitepress/
│   │   ├── config.js
│   │   └── theme/
│   ├── public/
│   └── index.md
├── package.json
└── README.md

目录结构说明：

• docs/: 存放文档内容的主目录。
  • .vitepress/: 配置文件和主题目录。
    • config.js: 项目的配置文件。
    • theme/: 自定义主题目录（可选）。
  • public/: 静态资源目录，如图片等。
  • index.md: 主页的 Markdown 文件。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目说明文件。

2. 项目的启动文件介绍

VitePress 项目的启动文件主要是 package.json 中的脚本配置。通常，你会在 package.json 中看到以下脚本：

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

脚本说明：

• dev: 启动开发服务器，用于实时预览文档。
• build: 构建生产环境的静态站点。
• serve: 启动一个本地服务器来预览构建后的站点。

3. 项目的配置文件介绍

VitePress 的配置文件位于 docs/.vitepress/config.js。以下是一个基本的配置文件示例：

module.exports = {
  title: 'My VitePress Site',
  description: 'Just playing around',
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/guide/' }
    ],
    sidebar: {
      '/guide/': [
        {
          text: 'Introduction',
          children: [
            { text: 'Getting Started', link: '/guide/getting-started' },
            { text: 'Configuration', link: '/guide/configuration' }
          ]
        }
      ]
    }
  }
}

配置文件说明：

• title: 网站的标题。
• description: 网站的描述。
• themeConfig: 主题配置，包括导航栏和侧边栏的设置。
  • nav: 导航栏链接。
  • sidebar: 侧边栏配置，根据路径分组。

通过以上配置，你可以自定义网站的标题、描述、导航栏和侧边栏等内容。