VitePress美化

参考资料：
https://blog.csdn.net/weixin_44803753/article/details/130903396
https://blog.csdn.net/qq_30678861/category_12467776.html

站点信息修改

首页部分的修改基本都在.vitepress/config.mts,这个文件内修改。

title 站点名称
description 描述

top导航栏修改

nav内容比较多，我们另起一个文件，现在不用管

// 头部导航config.mts
import topNav from "./topNav";//需要注意的是import { pythonNote }中的pythonNote名称要和sideBar目录内的函数名一直
import { pythonNote } from "./sideBar/pythonBar";
import { linuxNote }  from "./sideBar/linuxBar";
import { dockerNote }  from "./sideBar/dockerBar";
import { route_swc }  from "./sideBar/route_swc";
import { ospf }  from "./sideBar/ospfBar";
import { bgp }  from "./sideBar/bgpBar";export default {title: "亦良笔记",description: "开发学习笔记网站",// 打包目录 outDir: "./dist",head: [// 添加图标["link", { rel: "icon", href: "/favicon.ico" }],],// 主题配置themeConfig: {// 导航上的logologo: "/logo.png",// 隐藏logo右边的标题,不需要的话写falsesiteTitle: "亦良笔记",// 头部导航栏配置nav: topNav,  //nav另起文件了，所以调用它search: {provider: 'local'},//这里是导航栏的二级菜单sidebar: {"/python/": pythonNote,"/linux/linux基础/": linuxNote,"/linux/docker/": dockerNote,"/HCIE/路由与交换/": route_swc,"/HCIE/OSPF笔记/": ospf,"/HCIE/BGP笔记/": bgp},
//github的小图标socialLinks: [{ icon: 'github', link: 'https://github.com/vuejs/vitepress' }, // 右上角github图标]}
};

新建目录topNav，在下面新建index.js

import { text } from "stream/consumers";export default [//导航栏的设置
// 严格区分大小写{ text: "首页", link: "/" },{ text: "Python", link: "/python/index" },{text: "Linux",items: [{ text: "linux基础", link: "/linux/linux基础/index" },{ text: "deocker", link: "/linux/docker/index" },{ text: "kubernetes", link: "/kubernetes/index" },],},
//有多级菜单的情况{text: "华为HCIE",items:[{text: "路由与交换", link: "/HCIE/路由与交换/index"},    {text: "OSPF", link: "/HCIE/OSPF笔记"},{text: "BGP", link: "/HCIE/BGP笔记"}]},//仅有一级菜单的情况{ text: "Web前端", link: "/HTML/index" },{ text: "MySQL", link: "/mysql/index" },{text:"个人生活",items:[{ text: "近期行动清单", link: "https://pokes.notion.site/11b643489e76439c89efb5d5062d7999" },{ text: "苏州·游记", link: "https://pokes.notion.site/c2d938c54072497797805c9d7ff11a80" },{ text: "学习炒菜", link: "https://pokes.notion.site/8b664ba3b7714cb9a478361e28d9cfa5" },{ text: "摄影·走到哪拍到哪", link: "https://pokes.notion.site/d426eac42fb34ff39c9e36291031c813?pvs=74" },{ text: "看书", link: "https://pokes.notion.site/3c01d20de51e477cab6e6ab461f266f1" },]}];

左侧菜单栏修改

我们想要的结果是：

点击top导航栏，每个栏目的左侧菜单栏是不同的这是一点。
如下图所示，无论我点击python笔记下面任何一个文章，左侧菜单栏一直在。

而官方默认，当点击首页旁边的python时，左侧是在的，但是当我再次点击python02时，左侧就消失了。

所以我们如下解决

新建目录sideBar，在目录内新建文件：pythonBar.js


// python技术笔记左侧导航栏
export const pythonNote = [{text: "python笔记",items: [{text: "1.python01",link: "/python/python01",},{text: "2.python02",link: "/python/python02",},{text: "03.python转码代码笔记汇总",link: "/python/python转码代码笔记汇总",},]}];

注意：pythonNote 是和config.mts中 import 名称对应的。

效果：
在这里插入图片描述
修改的步骤：

首先在config.mfs中，引入：

在config.mts中，添加 import { route_swc } from "./sideBar/route_swc";
sidebar中写入路由

然后新建route_swc.js:


// 路由与交换:左侧导航栏
export const route_swc = [{text: "路由与交换基础",items: [{text: "01.route001",link: "/HCIE/路由与交换/route001",},{text: "02.route002",link: "/HCIE/路由与交换/route002"}]}];

目录结构：

在这里插入图片描述

docHCIE路由与交换index.mdroute001.mdroute002.md

剩下的就是导入文档了。

整体体验就是比较麻烦，左侧栏需要手动添加，如果文档多的话，会很痛苦。网上说的自动添加左侧栏，我没有成功！

给大家介绍几个做的比较好的blog：

陌生人做的
https://msyuan.github.io/vitePress-project/

官网
https://vitepress.dev/zh/