快捷導(dǎo)航

VuePress 側(cè)邊欄的具體使用

更新時(shí)間：2022年06月17日 10:41:49 作者：OSurer

本文主要介紹了VuePress 側(cè)邊欄的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

官網(wǎng)寫的側(cè)邊欄教程真的是讓人很糟心，經(jīng)過(guò)一番摸索，總算大致弄清楚了，下面詳細(xì)說(shuō)一下用法：

目錄結(jié)構(gòu)：

docs根目錄下有一個(gè)README.md、chinese文件夾、english文件夾

最簡(jiǎn)側(cè)邊欄：

sidebar: {
            '/language/chinese/': [
                '',  //該目錄下的README.md文件
                'a', //該目錄下的a.md文件
                'b'  //該目錄下的a.md文件
            ],
 
            '/language/english/': [
                '',
            ],
        },

chinese文件夾下的側(cè)邊欄：

english文件夾下的側(cè)邊欄：

可以看到，側(cè)邊欄效果出來(lái)了，但是我們看官網(wǎng)上的效果：

側(cè)邊欄上邊有分組，圖上的側(cè)邊欄分成了兩組，這里就是側(cè)邊欄分組了

側(cè)邊欄分組

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

 sidebar: {
            '/language/chinese/': [
                {
                    title: 'Group1',  //組名
                    children: [''],   //該分組下要顯示的文件的目錄
                },
                {
                    title: 'Group2',
                    children: ['a','b'],
                },
            ],
            '/language/english/': [
                '',
            ],
        },

可以看到分組成功，可以發(fā)現(xiàn),每個(gè)md直接顯示了它的一二級(jí)標(biāo)題，如果我們想除了顯示文件中的一二級(jí)標(biāo)題，還顯示這篇md文件的文件名（或指定的其他名字），比如下面這種效果：

該怎么做呢？官方給了這樣一個(gè)例子，用一個(gè)數(shù)組來(lái)指定路徑和名字：

我們嘗試一下：

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

結(jié)果卻是：

可以看到它只是改了一級(jí)標(biāo)題的名字，并沒(méi)有額外增加一個(gè)名字，還有其他方法嗎方法肯定是有的。

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

方法1

最簡(jiǎn)單的做法就是md文件中，把一級(jí)標(biāo)題的名字改為我們指定的名字，這樣做的壞處就是一級(jí)標(biāo)題只能在這個(gè)md文件中使用一次，（推薦使用該方法）

可以看到再一個(gè)一級(jí)標(biāo)題沒(méi)有出現(xiàn)在側(cè)邊欄中

方法2

給這個(gè)文件添加分組，添加一個(gè)分組名，即一個(gè)md文件就是一個(gè)分組，然后再用大分組，把這些小分組括起來(lái)。

小分組

我們給README.md添加名為chinese的分組：

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

給a.md添加名為A的分組

{    
      title: 'A',            
      children: [‘a(chǎn)'],
},

給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'],
                        },
                    ],
                },
 
            ],
 
        },