VuePress 侧边栏使用详解

作者:神秘网友 发布时间:2020-10-24 00:05:37

VuePress 侧边栏使用详解

VuePress 侧边栏使用详解

前言

官网写的侧边栏教程真的是让人很糟心，经过一番摸索，总算大致弄清楚了，下面详细说一下用法：

目录结构：

VuePress 侧边栏使用详解

docs根目录下有一个README.md、chinese文件夹、english文件夹

最简侧边栏：

sidebar: {
            '/language/chinese/': [
                '',  //该目录下的README.md文件
                'a', //该目录下的a.md文件
                'b'  //该目录下的a.md文件
            ],

            '/language/english/': [
                '',
            ],
        },

chinese文件夹下的侧边栏：

VuePress 侧边栏使用详解

english文件夹下的侧边栏：

VuePress 侧边栏使用详解

 可以看到，侧边栏效果出来了，但是我们看官网上的效果：

VuePress 侧边栏使用详解

 侧边栏上边有分组，图上的侧边栏分成了两组，这里就是侧边栏分组了

侧边栏分组

我们把chinese文件夹下的README.md分到Group1，a.md、b.md分到Group2：

 sidebar: {
            '/language/chinese/': [
                {
                    title: 'Group1',  //组名
                    children: [''],   //该分组下要显示的文件的目录
                },
                {
                    title: 'Group2',
                    children: ['a','b'],
                },
            ],
            '/language/english/': [
                '',
            ],
        },

VuePress 侧边栏使用详解

VuePress 侧边栏使用详解

可以看到分组成功，可以发现,每个md直接显示了它的一二级标题，如果我们想除了显示文件中的一二级标题，还显示这篇md文件的文件名（或指定的其他名字），比如下面这种效果：

VuePress 侧边栏使用详解

该怎么做呢？官方给了这样一个例子，用一个数组来指定路径和名字：

VuePress 侧边栏使用详解

我们尝试一下：

        sidebar: {

            '/language/chinese/': [
                {
                    title: 'Group1',  //组名
                    children: [
                        ['', 'chinese']
                    ]
                },
                {
                    title: 'Group2',
                    children: [
                        ['a', 'A'],
                        ['b', 'B'],
                    ],
                }
            ]
        }

 结果却是：

VuePress 侧边栏使用详解

VuePress 侧边栏使用详解

可以看到它只是改了一级标题的名字，并没有额外增加一个名字，还有其他方法吗方法肯定是有的。

显示文件名（或其他指定名字）

最简单的做法就是md文件中，把一级标题的名字改为我们指定的名字，这样做的坏处就是一级标题只能在这个md文件中使用一次，（推荐使用该方法）

VuePress 侧边栏使用详解

可以看到再一个一级标题没有出现在侧边栏中

给这个文件添加分组，添加一个分组名，即一个md文件就是一个分组，然后再用大分组，把这些小分组括起来。

小分组

我们给README.md添加名为chinese的分组：

{    
      title: 'chinese',          
      children: [‘’],
},

给a.md添加名为A的分组

{    
      title: 'A',            
      children: [‘a’],
},

给b.md添加名为B的分组

{    
      title: 'B',            
      children: [‘b’],
},

大分组：

把chinese假入大组Group1：

                {
                    title: 'Group1',
                    children: [
                        {
                            title: 'chinese',   
                            children: [''],
                        },
                    ],
                },

把A、B加入大组Group2：

                {
                    title: 'Group2',
                    children: [
                        //小组A
                        {
                            title: 'A',   
                            children: ['a'],
                        },
                        //小组B
                        {
                            title: 'B',   
                            children: ['b'],
                        },

                    ],
                },

完全代码：

        sidebar: {

            '/language/chinese/': [
                //Group1
                {
                    title: 'Group1',
                    children: [
                        {
                            title: 'chinese',   // 必要的
                            children: ['']
                        }
                    ]
                },
                //Group2
                {
                    title: 'Group2',
                    children: [
                        //小组A
                        {
                            title: 'A',   
                            children: ['a'],
                        },
                        //小组B
                        {
                            title: 'B',   
                            children: ['b'],
                        },
                    ],
                },

            ],

        },

VuePress 侧边栏使用详解

VuePress 侧边栏使用详解

显然，这样写起来眼花缭乱，因此推荐方法一。

 

VuePress 侧边栏使用详解相关教程

  1. java web 项目乱码问题的解决办法（数据库使用MySQL）

    java web 项目乱码问题的解决办法（数据库使用MySQL） 1、如何解决服务器返回页面中文乱码问题 response.setContentType(text/html;charset=UTF-8); 2、解决post方式请求表单参数中文乱码问题 request.setCharacterEncoding(UTF-8);//注意此语句一定要设置在

  2. 笃学私教：Lombok入门使用教程及其优缺点详解

    笃学私教：Lombok入门使用教程及其优缺点详解 在Java开发中，因工作需要，你可能会学习或被迫去学习Lombok这个工具，这玩意用起来可以说是贼爽，很方便，可玄武老师实际上并不推荐大家使用，至于Lombok是什么？怎么入门？为什么不推荐使用？下面，玄武老师会

  3. Vue 页面加载进度条nprogress的使用

    Vue 页面加载进度条nprogress的使用 前言：客户在访问网页的时候想要看到网页加载的进度，所以使用 nprogress 来实现当页面跳转是出现在浏览器顶部的进度条，它是轻量级的进度条组件，使用简便，可以很方便集成到应用中来。 效果： 一、参考资料 官网：https:

  4. Java——使用GSON对JSON进行解析 教程

    Java——使用GSON对JSON进行解析 教程 GSON GSON是Googel公司开发的用于解析json的类库。可以很轻松地让程序员将java对象转换成JSON格式，或者将JSON格式的对象转换成Java对象。 使用方法很简单： 首先，需要将GSON类库的jar包引入到自己的IDE中，本教程使用I

  5. tensorflow学习笔记_用于个人记录使用

    tensorflow学习笔记_用于个人记录使用 使用keras的compile、fit等训练 使用keras创建网络： 获取数据集，需要转换为tf.data.Dataset类型，或者Numpy Array类型的数据； 使用tf.keras.layers.Sequential([])来创建网络； 使用network.build()输入input_shape来

  6. HDL/FPGA学习笔记二十二：Vivado 双口RAM IP核的使用

    HDL/FPGA学习笔记二十二：Vivado 双口RAM IP核的使用 一、双口RAM介绍 双口 RAM（dual port RAM） 在异构系统中应用广泛，通过 双口RAM ，不同硬件架构的芯片可以实现数据的交互，从而实现通信。例如，一般情况下， ARM与DSP 之间的通信，可以利用 双口RAM 实

  7. k8s使用glusterfs做持久化存储（十三）

    k8s使用glusterfs做持久化存储（十三） k8s使用glusterfs存储 [[emailprotected] ~]# kubectl explain pv.spec语法格式kubectl explain 资源.命令.命令 1)编写yaml文件[[emailprotected] ~]# mkdir /k8s/glusterfs[[emailprotected] ~]# cd /k8s/glusterfs[[e

  8. json字符串转json对象时包含“\”，使用JSON.parse报错情况

    json字符串转json对象时包含“\”，使用JSON.parse报错情况 javascript中的json中包含转义字符\斜杠 //---------------------------//参考网页https://www.cnblogs.com/jun-tao/p/3707663.html/*大家可以试一下写1个\斜杠，或者写2个\斜杠，或者写3个\斜杠，