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

兔子先森Ace

于 2024-09-25 13:54:30 发布

阅读量819

点赞数 27

分类专栏：构建工具文章标签： javascript 前端 vue.js react.js 微信小程序 html5 css

本文链接：https://blog.csdn.net/qq_44793507/article/details/142521250

版权

构建工具专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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

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

打造你的专属主题-VitePress保姆级教程-02

前言

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,
        },
      ],
     
    };