Vuepress

导航栏配置

接下来我们来配置一下导航栏

导航栏配置在 .vuepress/config.js 中的 nav 字段

修改 nav 如下内容（格式）：

nav:[
    { text: 'web基础', link: '/guide/web/one' },
    { text: 'js基础', link: 'https://www.w3school.com.cn/js/index.asp' },
    {
        text: '后端基础',
        // 这里是下拉列表展现形式。
        items: [
            { text: 'JAVA', link: 'http://c.biancheng.net/cpp/u/java_rumen/' },
            { text: 'PHP', link: '/guide/php/two' },
        ]
    }
]

首页，你应该在 guide 下创建两个文件夹 web 和 php ，然后分别在web 下创建文件 one.md ，在 php 文件夹下创建 two.md

重启项目，现在你可以在导航栏右边看到两个分类了。如图：

说明：

1. 这里我们定义了4种类型的导航

   • 无分类的导航（跳转内部页面）
   • 无分类导航（超链接）
   • 有分类的导航
     • 超链接
     • 跳转内部页面

2. 理论上 分类（item）中是支持无线嵌套的，这个可以试一试哦。

3. 跳转内部页面的 link 最后一个是具体的文件名，如上分别是 one.md和 two.md ，.md 可省略，否则会自动找当前文件夹下的 README.md 文件

提示

导航栏其他配置可以看一下官网，自己需要哪些东西加上即可：原网页-导航栏基本配置 (opens new window)