vuepress的侧边栏怎么动态生成

Question

现在用vuepress写博客，我现在的做法是都写在一个README.md文件里，然后配置config.js

sidebar: 'auto', // 侧边栏配置

自动生成侧边栏

但是我现在想每篇都写一个md文件，又不想一篇篇在config.js里配置侧边栏，有什么办法能自动生成侧边栏？

Answer 1

安利下自己写的插件 vuepress-plugin-auto-sidebar

Answer 2

\自己去除一下，复制到这边被转义了

const  fs  \=  require("fs");

const  path  \=  require("path");

const  rootpath  \= path.dirname(\_\_dirname);

  

/\*\*

\* string比较工具类

\*/

const  str  \= {

contains: function(string, substr, isIgnoreCase) {

if (isIgnoreCase) {

string \= string.toLowerCase();

substr \= substr.toLowerCase();

}

  

var startChar \= substr.substring(0,  1);

var strLen \= substr.length;

  

for (var j \=  0; j < string.length  \- strLen +  1; j++) {

if (string.charAt(j) \== startChar) {

//如果匹配起始字符,开始查找

if (string.substring(j, j + strLen) \== substr) {

//如果从j开始的字符与str匹配，那ok

return  true;

}

}

}

return  false;

}

};

  

/\*\*

\* 文件助手: 主要用于读取当前文件下的所有目录和文件

\*/

const  filehelper  \= {

getAllFiles: function(rpath) {

let filenames \= \[\];

fs.readdirSync(rpath).forEach(file  \=> {

fullpath \= rpath +  "/"  + file;

var fileinfo \= fs.statSync(fullpath);

// 过滤 .DS\_Store

if (fileinfo.isFile() &&  !str.contains(file,  "DS\_Store",  true)) {

if (file \===  "README.md"  || file \===  "readme.md") {

file \=  "";

} else {

file \= file.replace(".md",  "");

}

filenames.push(file);

}

});

filenames.sort();

return filenames;

},

getAllDirs: function  getAllDirs(mypath  \=  ".") {

const  items  \= fs.readdirSync(mypath);

let result \= \[\];

// 遍历当前目录中所有文件夹

items.map(item  \=> {

let temp \= path.join(mypath, item);

// 过滤无关的文件夹

if (

fs.statSync(temp).isDirectory() &&

!item.startsWith(".") &&

!str.contains(item,  "DS\_Store",  true)

) {

let path \= mypath +  "/"  + item +  "/";

result.push(path);

result \= result.concat(getAllDirs(temp));

}

});

return result;

}

};

// nav的链接路径

var navLinks \= \[\];

  

// 侧边栏

var sidebar \= {};

  

// 导航栏

var nav \=  getNav();

  

function  genSideBar() {

var sidebars \= {};

var allDirs \= filehelper.getAllDirs(rootpath);

allDirs.forEach(item  \=> {

let dirFiles \= filehelper.getAllFiles(item);

let dirname \= item.replace(rootpath,  "");

navLinks.push(dirname);

if (dirFiles.length  \>  1) {

sidebars\[dirname\] \= dirFiles;

}

});

  

sidebar \= sidebars;

}

/\*\*

\* 先生成所有nav文件链接;

\* @param  filepaths

\* @returns  {Array}

\*/

function  genNavLink(filepaths) {

genSideBar();

var navLinks \= \[\];

filepaths.forEach(p  \=> {

var ss \= p.toString().split("/");

var name \= ss\[ss.length  \-  2\];

var parent \= p.replace(name +  "/",  "");

navLinks.push({

text: name,

link: p,

items: \[\],

parent: parent

});

});

  

return navLinks;

}

  

/\*\*

\* 自定义排序文件夹

\* @param  a

\* @param  b

\* @returns  {number}

\*/

function  sortDir(a, b) {

let al \= a.parent.toString().split("/").length;

let bl \= b.parent.toString().split("/").length;

if (al \> bl) {

return  \-1;

}

if (al \=== bl) {

return  0;

}

if (al < bl) {

return  1;

}

}

  

/\*\*

\* 生成最终的 nav配置信息

\* @param  navLinks

\* @returns  {Array}

\*/

  

function  getNav() {

let nnavs \=  genNavLink(navLinks);

nnavs.sort(sortDir);

var iniMap \= {};

var result \= \[\];

var delMap \= {};

nnavs.forEach(l  \=> {

iniMap\[l.link\] \= l;

});

nnavs.forEach(l  \=> {

var parentLink \= l.parent;

if (parentLink !==  "/") {

iniMap\[parentLink\].items.push(l);

delMap\[l.link\] \= l;

}

});

for (var k in iniMap) {

if (delMap\[k\] !=  null) {

delete iniMap\[k\];

continue;

}

result.push(iniMap\[k\]);

}

return result;

}

  

/\*\*

\* Vuepress 最终需要的配置信息, 修改其他信息在此处配置

\*/

var config \= {

title: "title",

description: "description",

lang: "zh-CN",

head: \[\["link", { rel: "icon", href: "/logo.png" }\]\],

themeConfig: {

sidebar: sidebar,

nav: nav,

sidebarDepth: 3

}

};

  

module.exports  \= config;

Answer 3

侧边栏有很多的效果，要看你的目录结果，一般情况会根据你md文件的目录层级展示