像编写文档一样轻松构建你的官网！-VitePress保姆级教程

本篇为vitepress系列教程，在开始前，若还不了解vitepress的小伙伴可以看一下以往文章：

不敲一行代码！助你快速搭建属于自己的官网博客！-VitePress保姆级教程-01

前言

vitepress居然能帮你自动管理文章，只需 Markdown 即可轻松创建美观的文档站点。文章的章节与标题自动对应，无需其它额外操作！页面的跳转居然能自动区分外链和内链！这究竟是什么魔法？本文将带你一探究竟！

跳转的基础

在vitepress中，跳转是离不开link字段的，以首页举例：

在首页的这三个按钮中，开始按钮跳转项目内的文章，在线预览跳转外部网页，代码中是这么写的：

开始按钮直接对应上项目中的文件，点击开始按钮，直接直接跳转到项目内docs/api-examples.md文件，在vitepress中xxx.md文件其实就是对应的文章，而http或https开头的则被解析为外部链接，点击在线预览按钮则会直接跳转外部链接。

了解了这个之后，我们就可以得出一个结论：

1、如果要跳转项目内的文章，则直接在link中写入文件路径，根目录为docs文件夹

2、如果要跳转外部链接，则直接在link中写入外部链接

顶部按钮的跳转

第一篇中我们说过，顶部按钮在.viewpress/config.mts文件中配置，在config.mts文件中nav则是顶部按钮的配置，例如我们点击指南跳指南文档，点击配置跳配置文档，此时就可以直接修改顶部按钮的link配置，通过路径直接指向对应的文件即可。

配置修改完后，页面就可以正常跳转了。

通常一个大型的文档，顶部的按钮会非常多，如果全部写在config.mts文件中，随着积累该文件会变得非常臃肿，我们可以把该文件nav配置抽离出一个单独的文件，然后引入到config.mts中。

在.viewpress中新建nav.mts文件，将nav的配置写在nav.mts文件中，然后导出。

// nav.mts
export default [
    { text: "指南", link: "/api-examples" },
    { text: "配置", link: "/markdown-examples" },
    {
      text: "链接",
      // 内部配置items则该按钮是下拉
      items: [
        {
          text: "在线预览",
          link: "http://101.126.93.137/#/login",
        },
        {
          text: "Gitee仓库",
          link: "https://gitee.com/wang_fan_w/SnowAdmin",
        },
        {
          text: "GitHub仓库",
          link: "https://github.com/WANG-Fan0912/SnowAdmin",
        },
      ],
    },
  ]

刷新页面，依旧正常，这样我们就精简了config.mts文件的内容。

侧边文章的跳转

在vitepress中，侧边文章对应的是.viewpress/config.mts文件中的sidebar字段

sidebar中，每一个对象，对应一个side，sidebar中可以有多个对象，你可以将sidebar中的对象想想成一本书，每个对象对应一本书，text对应书名，items是一个数组，对应书内的章节，章节的link就对应的文章路径。

例如：我现在有一本书，书名叫《指南》，《指南》中有两个章节，分别是“vitepress指南”、“侧边栏配置”

现在我们的sidebar的基础配置已经掌握了，下面我们开始正式配置nav和sidebar的联动。

nav和sidebar的联动-正式配置

下面我提供了两本书，分别是《三国演义》、《西游记》

三国演义分两卷：上卷和下卷

西游记分三卷：上卷、中卷、下卷

新建文件-创建书籍

1、创建三国演义

在docs下创建三国演义文件夹，在三国演义文件夹下分别创建上卷、下卷文件夹

这里上卷和下卷分别为两章

2、创建西游记

在docs下创建西游记文件夹，在西游记文件夹下分别创建上卷、中卷、下卷文件夹

这里上卷、中卷、下卷分别为两章

配置nav

先配置nav，把nav抽离出单独的文件

// nav.mts
export default [
  {
    text: "三国演义",
    link: "/三国演义/三国演义-上卷/宴桃园豪杰三结义",
    activeMatch: "/三国演义",
  },
  {
    text: "西游记",
    link: "/西游记/西游记-上卷/灵根育孕源流出",
    activeMatch: "/西游记",
  },
  {
    text: "链接",
    // 内部配置items则该按钮是下拉
    items: [
      {
        text: "在线预览",
        link: "http://101.126.93.137/#/login",
      },
      {
        text: "Gitee仓库",
        link: "https://gitee.com/wang_fan_w/SnowAdmin",
      },
      {
        text: "GitHub仓库",
        link: "https://github.com/WANG-Fan0912/SnowAdmin",
      },
    ],
  },
];

在上面的配置中，每个数组对象为一个nav按钮

text按钮名
link链接，若http或https则为外链，否则指向项目内文件
activeMatch激活的书名，对应sidebar内的书籍
若按钮内有items则该按钮为下拉按钮，items内的配置与正常配置一致

这样nav的按钮即配置好了，点击《三国演义》即可跳转到link指向的文件：/三国演义/三国演义-上卷/宴桃园豪杰三结义

配置sidebar

同样将sidebar抽离出来，放到一个单独的文件内，在config.mts中引入

// sidebar.mts
export default {
  "/三国演义/": [
    {
      text: "三国演义-上卷",
      items: [
        {
          text: "宴桃园豪杰三结义",
          link: "/三国演义/三国演义-上卷/宴桃园豪杰三结义",
        },
        {
          text: "张翼德怒鞭督邮",
          link: "/三国演义/三国演义-上卷/张翼德怒鞭督邮",
        },
      ],
    },
    {
      text: "三国演义-下卷",
      items: [
        {
          text: "三江口曹操折兵",
          link: "/三国演义/三国演义-下卷/三江口曹操折兵",
        },
        {
          text: "用奇谋孔明借箭",
          link: "/三国演义/三国演义-下卷/用奇谋孔明借箭",
        },
      ],
    },
  ],
  "/西游记/": [
    {
      text: "西游记-上卷",
      items: [
        {
          text: "灵根育孕源流出",
          link: "/西游记/西游记-上卷/灵根育孕源流出",
        },
        {
          text: "悟彻菩提真妙理",
          link: "/西游记/西游记-上卷/悟彻菩提真妙理",
        },
      ],
    },
    {
      text: "西游记-中卷",
      items: [
        {
          text: "魔王巧算困心猿",
          link: "/西游记/西游记-中卷/魔王巧算困心猿",
        },
        {
          text: "外道施威欺正性",
          link: "/西游记/西游记-中卷/外道施威欺正性",
        },
      ],
    },
    {
      text: "西游记-下卷",
      items: [
        {
          text: "九九数完魔灭尽",
          link: "/西游记/西游记-下卷/九九数完魔灭尽",
        },
        {
          text: "猿熟马驯方脱壳",
          link: "/西游记/西游记-下卷/猿熟马驯方脱壳",
        },
      ],
    },
  ],
};

在上面的配置中，导出了一个对象，该对象分别是"/三国演义/"和"/西游记/"

"/三国演义/"对象可以理解为书名，该书是一个数组对象，每个对象为一个章节，分别为上卷、下卷

text为卷名
item为数组对象，表示每卷中有多少个章节，比如《三国演义》上卷，有两个章节，分别为：宴桃园豪杰三结义、张翼德怒鞭督邮
link指向的为路径，若http或https则为外链，否则指向项目内文件

到这里nav和sidebar就配置好了，点击nav的《三国演义》，即可跳转/三国演义/三国演义-上卷/宴桃园豪杰三结义

点击sidebar跳转上卷第二章

由于nav和sidebar关联了同一个activeMatch(书)，所以nav和sidebar的跳转的高亮是一致的。

其它配置项

配置菜单展开收起

在sidebar中配置collapsed: false可以让菜单展开收起

// sidebar.mts
export default {
  "/三国演义/": [
    {
      text: "三国演义-上卷",
      items: [
        {
          text: "宴桃园豪杰三结义",
          link: "/三国演义/三国演义-上卷/宴桃园豪杰三结义",
        },
        {
          text: "张翼德怒鞭督邮",
          link: "/三国演义/三国演义-上卷/张翼德怒鞭督邮",
        },
      ],
      collapsed: false,
    },
    {
      text: "三国演义-下卷",
      items: [
        {
          text: "三江口曹操折兵",
          link: "/三国演义/三国演义-下卷/三江口曹操折兵",
        },
        {
          text: "用奇谋孔明借箭",
          link: "/三国演义/三国演义-下卷/用奇谋孔明借箭",
        },
      ],
      collapsed: false,
    },
  ],
 
};