参考资料:
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/