多个分割的侧边栏
通过导航栏链接跳转到与当前侧边栏不相干的另外一个侧边栏方法
.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/'
},
]
}
],