在导航栏的下拉子菜单中再分二级目录结构,可修改 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;
}

 修改后

 

Logo

前往低代码交流专区

更多推荐