參考資料：
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/