参考资料：
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: {
    // 导航上的logo
    logo: "/logo.png",
    // 隐藏logo右边的标题,不需要的话写false
    siteTitle: "亦良笔记",
    // 头部导航栏配置
    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"
        }


      ]
    }
  ];

目录结构：

doc
	HCIE
		路由与交换
			index.md
			route001.md
			route002.md	

剩下的就是导入文档了。

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

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

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

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