VuePress生成多个侧边栏

1. 简单的多个侧边栏 vuepress介绍 相当于所有的导航栏公用一个侧边栏

在这里插入图片描述

  1. 需要在.vuepress目录下的config.js文件中配置
    在这里插入图片描述
  2. config.js文件 目前针对于默认的主题配置
    module.exports = {
    	themeConfig: {
    		nav: [
                { text: '指南', link: '/guide/' },
                {
                    text: 'VuePress配置',
                    link: '/vuepress-config/'
                },
            ],
    		sidebar: [
                {
                    title: '基础',
                    path: '/guide/',
                    sidebarDepth: 2,
                    children: [
                        {
                            title: '设置',
                            path: '/'
                        }
                    ]
                }
            ]
    	}
    }
    

2. 每个导航栏指定独立的侧边栏

在这里插入图片描述

  1. 变动的只是config.js中的配置
    module.exports = {
    	themeConfig: {
    		nav: [
                { text: '指南', link: '/guide/' },
                {
                    text: 'VuePress配置',
                    link: '/vuepress-config/'
                },
            ],
    		sidebar: {
                '/guide/': [
                    {
                        title: '基础',
                        path: '/guide/'
                    }
                ],
                '/vuepress-config/': [
                    {
                        title: 'VuePress配置',
                        sidebarDepth: 2,
                        children: [
                            {
                                title: '介绍',
                                path: '/vuepress-config/'
                            }
                        ]
                    }
                ]
        }
    	}
    }
    

3. 文件的目录结构

  1. 需要展示导航栏的数据需要和.vuepress同级,README.md文件也可以省略,类似于index.vue也可以在导入的时候被省略
    在这里插入图片描述
    在这里插入图片描述
Logo

前往低代码交流专区

更多推荐