相信大家在学习前端知识的时候会遇到一些样式很像的官方文档网站，比如 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
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真）、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）、微信小程序定制开发等一系列互联网应用服务。
公安局备案号：
专属顾问
