VuePress生成多个侧边栏_vuepress侧边栏只能显示一个一级标题-CSDN博客

本文详细介绍了如何在VuePress中配置多个独立的侧边栏，包括为不同导航栏指定特定的侧边栏，以及如何通过修改config.js文件实现这一功能。

`VuePress`生成多个侧边栏

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

在这里插入图片描述

需要在.vuepress目录下的config.js文件中配置

config.js文件目前针对于默认的主题配置

module.exports = {
	themeConfig: {
		nav: [
            { text: '指南', link: '/guide/' },
            {
                text: 'VuePress配置',
                link: '/vuepress-config/'
            },
        ],
		sidebar: [
            {
                title: '基础',
                path: '/guide/',
                sidebarDepth: 2,
                children: [
                    {
                        title: '设置',
                        path: '/'
                    }
                ]
            }
        ]
	}
}

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

在这里插入图片描述

变动的只是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/'
                        }
                    ]
                }
            ]
    }
	}
}