vuepress 侧边栏(sidebar) 动态展示配置
vuepress的侧边栏动态配置,研究了好几天终于弄懂了,它使用JSON的数组和对象两种方式配置侧边栏标题,对象针对每个导航变化时,侧边栏随着变动;数组则是针对每个页面内容变化,侧边栏跳转。vuepress官网地址上使用就是。如下图所示:点击介绍>它是如何工作的 、快速上手等可以看到侧边栏不动,右侧内容页面在变化。参考这种方式,我的vuepress的config.js中侧边栏配置如下...
·
vuepress的侧边栏动态配置,研究了好几天终于弄懂了,它使用JSON的数组和对象两种方式配置侧边栏标题,对象针对每个导航变化时,侧边栏随着变动;数组则是针对每个页面内容变化,侧边栏跳转。vuepress官网地址上使用就是。如下图所示:
点击介绍>它是如何工作的 、快速上手等可以看到侧边栏不动,右侧内容页面在变化。参考这种方式,我的vuepress的config.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/'}
]
}]
}
这样,点击导航时,侧边栏就会根据内容动态变化,而且,点击侧边栏内容,右侧内容也会跟着变化。跟官网效果一样。
具体本人做的一个示例地址: http://dkgee.gitee.io/
更多推荐
已为社区贡献1条内容
所有评论(0)