Vuepress

侧边栏配置

下面来配置一下侧边栏

侧边栏配置在 .vuepress/config.js 中的 sidebar 字段

内容修改如下：

sidebar:[
    {
        title: '第一个标题',   // 必要的
        path: '/guide/',      // 可选的, 标题的跳转链接，应为绝对路径且必须存在 **加入该属性当前栏目可点击
        collapsable: false, // 可选的, 默认值是 true ==>是否可展开：false：一直开着，true：可展开
        //sidebarDepth: 1,    // 可选的, 默认值是 1
        children: []
    },
    {
        title: '第二个标题',   // 必要的
        //path: '/guide/',      // 可选的, 标题的跳转链接，应为绝对路径且必须存在 **加入该属性当前栏目可点击
        collapsable: false, // 可选的, 默认值是 true ==>是否可展开：false：一直开着，true：可展开
        //sidebarDepth: 1,    // 可选的, 默认值是 1
        children: [
            '/guide/web/one',
        ]
    },

    {
        title: '第三个标题',   // 必要的
        //path: '/guide/',      // 可选的, 标题的跳转链接，应为绝对路径且必须存在 **加入该属性当前栏目可点击
        collapsable: false, // 可选的, 默认值是 true ==>是否可展开：false：一直开着，true：可展开
        //sidebarDepth: 1,    // 可选的, 默认值是 1
        children: [
            '/guide/web/one',
            '/guide/php/two',
        ]
    },
]

说明：

1. 字段说明：

   • title：当前分组的名称
   • path：当前分组跳转路径，如果不带此参数，当前分组标题不可点击
   • collapsable： 是否展开分组 false：一直开着；true：可收起
   • sidebarDepth：可选项，标题链接的生成方式 具体可查看sidebarDepth (opens new window)
   • children:当前分组下的各个标题（具体页面的路径），如果为空，说明下边没有分类

2. children 中写的是具体页面的路径，这个标题会自动提取当前页面第一行的带 # 的文字,如果页面首行不是带 # 的，那么侧边栏中的标题会显示当前路径，而不显示具体的文字。如图：

   -- 图一

   -- 图二

   说明

   `#` 在 `.md` 文件中是标题的标注，分为6级，1个 `#` 到 6个 `#` 分别对应 `h1` 到 `h6`
   

   提示

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