10分钟搭建一个带导航栏的文档网站，真不是吹的！
相信大家在学习前端知识的时候会遇到一些样式很像的官方文档网站，比如 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.配置自己的文档网站
3.1 配置网站的名字和logo
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 配置示例：
server {
listen 80;
server_name docs.yourdomain.com;
location / {
root /path/to/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
}5. 完整代码
通过网盘分享的文件：zhifou-vitepress-doc.zip
链接: https://pan.baidu.com/s/1m0CkqYqggLat65jCznqLpw?pwd=6666 提取码: 6666
--来自百度网盘超级会员v9的分享拿到项目之后
npm install
npm run dev往期推荐
写在最后
最后非常感谢家人们的支持！如果您觉得这篇文章写的不错，帮忙"点赞、分享、在看"。你们的支持是我写作路上最大的动力！
分享
收藏
点赞
在看
