09. Vuepress2.x 导航菜单栏-下拉菜单-二级菜单
在导航栏的下拉子菜单中再分二级目录结构,可修改 docs/.vuepress/config.ts 配置文件:设置 themeConfig.navbar 属性。请详细查看最后一个数组,有两级 children,第一个children 为一级目录,第二个 children 为二级目录module.exports = {themeConfig: {// 主题设置logo: '/images/logo.p
·
在导航栏的下拉子菜单中再分二级目录结构,可修改 docs/.vuepress/config.ts 配置文件:
- 设置 themeConfig.navbar 属性。
- 请详细查看最后一个数组,有两级 children,第一个children 为一级目录,第二个 children 为二级目录
module.exports = {
themeConfig: {// 主题设置
logo: '/images/logo.png',// 注意图片放在 public 文件夹下
navbar: [
{// 右上导航航条 docs/.vuepress/README.md
text: '概述',
link: '/'
},
{
text: 'Vue 学习笔记',
children:[
{text:'笔记', link: '/guide/vue/test01.md'}, // 可不写后缀 .md
{text:'其它链接', link: 'https://www.baidu.com/'}// 外部链接
]
},
{
text: 'Typescript 学习笔记',
children:[
{text:'笔记', link: '/guide/ts/'},// 以 ‘/’结束,默认读取 README.md
{text:'其它链接', link: 'https://www.baidu.com/'} // 外部链接
]
},
{
text: '其它参考',
children:[
{text: 'API', link: 'https://cn.bing.com/'},
{
text: '学习视频',
children: [
{text: '慕客', link: 'https://cn.bing.com/'},
{text: 'B 站', link: 'https://cn.bing.com/'}
]
},
{
text: '开源项目',
children: [
{text: '项目 01', link: 'https://cn.bing.com/'},
{text: '项目 02', link: 'https://cn.bing.com/'},
{text: '项目 03', link: 'https://cn.bing.com/'},
{text: '项目 04', link: 'https://cn.bing.com/'}
]
}
]
}
]
}
......
效果图
如果想改变下拉菜单中的一级菜单样式,可修改 className 为 dropdown-subtitle。
.dropdown-subtitle {
color: red;
}
修改后
更多推荐
已为社区贡献33条内容
所有评论(0)