VuePress搭建博客教程(四)、vuepress导航栏设置

小景哥哥博客

一、修改confi.js

修改config.js文件，在主题里面把nav导航设置成一个单独的js文件，改写成：nav: require("./nav.js"),

全部代码如下：

module.exports = {
    title: '小景哥哥',
    description: '小景哥哥带你上王者',
    dest: './dist',
    port: '80',
    head: [
        ['link', {rel: 'icon', href: '/logo.jpg'}]
    ],
    markdown: {
        lineNumbers: true
    },
    themeConfig: {
        nav: require("./nav.js"),
        sidebar: {'/guide/':[
            {
                  title:'新手指南',
                  collapsable: true,
                  children:[
                    '/guide/notes/one',
                  ]
                },
                {
                  title:'小景哥哥',
                  collapsable: true,
                  children:[
                    '/guide/notes/two',
                  ]
                }
            ]
        },
        sidebarDepth: 2,
        lastUpdated: 'Last Updated',
        searchMaxSuggestoins: 10,
        serviceWorker: {
            updatePopup: {
                message: "有新的内容.",
                buttonText: '更新'
            }
        },
        editLinks: true,
        editLinkText: '在 GitHub 上编辑此页 ！'
    }
}

在config.js同级目录下创建nav.js文件，并且文件内容如下：

module.exports = [
	{
        text: '碎碎念', link: '/coding/',
		items: [
            {text: 'PAT', link: '/baodian/zero/'},
			{text: '剑指offer', link: '/baodian/zero/'},
            {text: 'LeeCode', link: '/baodian/high/'}
        ]
    },
	{
        text: '爱编程', link: '/coding/',
		items: [
            {text: 'PAT', link: '/coding/pat/'},
			{text: '剑指offer', link: '/coding/offer/'},
            {text: 'LeeCode', link: '/coding/leeCode/'}
        ]
    },
	{
        text: '专栏', link: '/column/',
		items: [
            {text: '群晖NAS Docker系列教程', link: '/column/synology/'},
			{text: 'vuepress系列教程', link: '/column/vuepress/'},
            {text: 'springboot系列教程', link: '/column/springboot/'}
        ]
    },
    {
        text: '后端',
        items: [
			{
                text: 'Mysql',
				items: [
					{text: 'DS918-Mysql', link: 'http://mysql.hepcloud.top'},
					{text: 'DS220-MySql', link: 'http://mysql.huerpu.top'}
				]
            },
			{
                text: 'Redis',
				items: [
					{text: 'DS918-Redis', link: 'http://redis.hepcloud.top'},
					{text: 'DS220-Redis', link: 'http://redis.huerpu.top'}
				]
            },
			{
                text: 'ElasticSearch',
				items: [
					{text: 'DS918-es', link: 'http://es.hepcloud.top'},
					{text: 'DS220-es', link: 'http://es.hepcloud.top'}
				]
            }
        ]
    },
	{
        text: '关于我', link: 'http://www.huerpu.cc:7000'
    }
]

nav.js其实是一个数组，里面可以有多个元素。每个元素里面也可以为数组，这样就形成了二级菜单下拉的效果。

talk is cheap, show me the code. 启动一下项目npm run docs:dev，让我们看一下效果。

这时，菜单栏出现了碎碎念、爱编程、专栏、后端、关于我，并且多个数组嵌套的可以显示下拉框菜单效果。