Skip to content
📈0️⃣

vuepress 侧边栏(sidebar) 动态展示配置

vuepress sidebar 动态展示配置

vuepress 的侧边栏动态配置,研究了好几天终于弄懂了,它使用 JSON 的数组和对象两种方式配置侧边栏标题,对象针对每个导航变化时,侧边栏随着变动;数组则是针对每个页面内容变化,侧边栏跳转。vuepress 官网地址上使用就是。

配置侧边栏

如下图所示:

js
{
    // ...
    sidebar: {
        '/dev_manage/': [{
            title: 'items01',
            collapsable: false,
            children: [
                { title: 'items01', path: '/dev_manage/' },
                { title: 'items02', path: '/dev_manage/aaa' }
            ]
        }],
        '/literature/': [{
            title: 'items02',
            collapsable: false,
            children: [
                { title: 'items01', path: '/literature/aaa' },
                { title: 'items02', path: '/literature/bbbb' }
            ]
        }],
        '/guide/': [{
            title: 'items03-1',
            collapsable: false,
            children: [
                { title: 'items01', path: '/guide/' },
                { title: 'items01', path: '/guide/bbbb' }
            ]
        },
        {
            title: 'items03-2',
            collapsable: false,
            children: [
                { title: 'items01', path: '/guide/aaaa/' },
                { title: 'items01', path: '/guide/bbb/' }
            ],
        }],
        '/language/': [{
            title: 'items04',
            collapsable: false,
            children: [
                { title: 'Chinese', path: '/language/chinese/' },
                { title: 'English', path: '/language/english/' }
            ]
        }]
    }
}

参考文档

vuepress 侧边栏(sidebar) 动态展示配置