相信大家在学习前端知识的时候会遇到一些样式很像的官方文档网站，比如 Vue.js 官网：

比如 Vite.js 官网：

其实这些网站都是用一个牛逼的框架生成的，他就是 VitePress。

1.介绍 VitePress

官网：

https://vitepress.dev/zh/

VitePress: 由 Vite 和 Vue 驱动的静态站点生成器。将 Markdown 变成优雅的文档，只需几分钟

说白了 VitePress 是一个牛逼的框架，这玩意集 Vite 和 Vue 与一身。

我们通过 npm 安装之后，在这个框架生成的项目里可以将写好的 markdown 文件变成一个个 html 页面。

不说废话，干就完了！

2.安装VitePress项目

npm create vitepress@latest zhifou-vitepress-doc

项目目录

docs/
├── index.md                # 首页
.vitepress/
└── config.ts             # 配置

然后 npm install，npm run dev 运行项目

我们发现展示的内容正是 index.md 的内容

3.配置自己的文档网站

1.配置名字

在 config.ts 里面配置 title。

注：配置文件可以是 ts 也可以是 js，大家可以看官网自行选择。

2. 配置 logo

新建 assets/icons 文件夹，引入一个图标

在 配置文件里面 themeConfig 里面配置 logo 属性：

3.2 配置左侧菜单栏

在 doc 文件夹下分别新建 guide 和 reference 文件夹，然后依次新增 md 文件。

然后在 themeConfig 里面配置  sidebar 属性

  • "/guide/"：表示和顶部导航栏相匹配，当点击左侧菜单栏之后，顶部匹配的菜单栏会高亮。

  • text：菜单栏名字

  • collapsible: true,表示左侧菜单栏可折叠

  • items：子菜单，可以点击的菜单。link 表示对应的路径

sidebar: {
    "/reference/": [
      // 匹配/reference/路径
      {
        text: "参考", // 分组标题
        collapsible: true, // 可折叠
        items: [
          { text: "主题", link: "/reference/theme" },
          { text: "导航栏", link: "/reference/nav" },
        ],
      },
    ],
  },

3.3 配置顶部菜单栏

  • text：顶部菜单栏名称

  • link：默认打开的页面

  • activeMatch：当点击顶部菜单栏时，左侧菜单栏只显示激活路径下的页面。

3.4 演示

默认展示首页

点击顶部指南导航栏，左侧菜单栏展示和 guide 相匹配的页面。

点击顶部参考导航栏，左侧菜单栏展示和 reference 相匹配的页面。

4.部署到服务器

npm run build  # 生成 dist 目录

然后把 dist 文件夹扔到 nginx 的 html 文件夹下

Nginx 配置示例：

4.部署到服务器npm run build  # 生成 dist 目录
然后把 dist 文件夹扔到 nginx 的 html 文件夹下Nginx 配置示例：

5. 完整代码

通过网盘分享的文件：zhifou-vitepress-doc.zip
链接: https://pan.baidu.com/s/1m0CkqYqggLat65jCznqLpw?pwd=6666 提取码: 6666 
--来自百度网盘超级会员v9的分享

拿到项目之后

npm install
npm run dev