跳转到内容

多个分割的侧边栏

通过导航栏链接跳转到与当前侧边栏不相干的另外一个侧边栏方法

.vitepress/config.ts 修改如下

// 添加
import { type DefaultTheme } from 'vitepress'

// 修改sidebar,侧边栏1的内容放在content文件夹下,侧边栏2的内容放在another文件夹下

sidebar: {
  '/content/': { base: '/content/', items: sidebarContent() },
  '/another/': { base: '/another/', items: sidebarAnother() }
},

// 在export default defineConfig({ }) 或 export default withMermaid({ }) 后加两个函数

function sidebarContent(): DefaultTheme.SidebarItem[] {
  return [
    {
      text: '开始',
      collapsed: false,
      items: [
        { text: '简介', link: 'introduce' }
      ]
    },
    {
      text: '内容',
      collapsed: true,
      items: [
        { text: '内容1', link: 'content-first' },
        { text: '内容2', link: 'content-second' },
      ]
    },
  ]
}

function sidebarAnother(): DefaultTheme.SidebarItem[] {
  return [
    {
      text: '其他侧边栏',
      collapsed: false,
      items: [
        { text: '其他侧边栏内容', link: 'another-content' }
      ]
    },
  ]
}

侧边栏内容定义好后即可在导航栏设置链接内容,跳转不同的侧边栏内容即可切换不同侧边栏,如下

其中不同侧边栏链接为完整的侧边栏链接即可,同样首页也直接写全链接即可跳转目标侧边栏

nav: [
  { text: '首页', link: '/' },
  { 
    text: '标题',
    items: [
      {
        text: '外链1',
        // 链接
        link: 'https://wangzhi.com'
      },
      {
        text: '侧边栏1',
        link: '/content/introduce/',
        activeMatch: '/content/'
      }
    ]
  },
  {
    text: '标题2',
    items: [
      {
        text: '侧边栏2',
        link: '/another/another-content/',
        activeMatch: '/another/'
      },
    ]
  }
],