vuePress侧边栏sidebar分组自动生成的实现

最近在学习vuePress,返现网上搜索sidebar自动生成的方案要么是需要一堆堆的配置、要么是不能分组显示，各种不理想。

因此参考这里感谢 malunan 的引导

"vuepress-sidebar-atuo": "^1.0.4"    package.json{"name": "vuepress-sidebar-atuo","version": "1.0.4","description": "vuepress需要手动设置侧边栏、导航栏，导入大量笔记就很费时间。为了能够专心写作而不用去管侧边栏、导航栏的引入，读取大量资料，改进了下面函数","main": "index.js","dependencies": {"nrm": "^1.2.1"},"devDependencies": {},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","updata": "npm version patch","push": "npm publish"},"author": "malunan","license": "ISC"
}

改写了里边的递归方法，实现自动生成分组sidebar的功能。

具体代码直接提供给大家

新建 vuepress-sidebar-auto.js 文件路径 docs/.vuepress/vuepress-sidebar-atuo/vuepress-sidebar-auto.js

//侧边栏
// const autosidebar = require('vuepress-auto-sidebar-doumjun')
const fs = require('fs')
const path = require('path')/*** 过滤所要导航的文件* 文件名 包含.md 但 不包含  README */
function checkFileType(path) {return path.includes(".md")&&(!path.includes("README"));
}/*** 格式化文件路径*/
function prefixPath(basePath, dirPath) {let index = basePath.indexOf("/")
// 去除一级目录地址basePath = basePath.slice(index, path.length)
// replace用于处理windows电脑的路径用\表示的问题return path.join(basePath, dirPath).replace(/\\/g, "/")
}/*** 截取文档路径*/
function getPath(path,ele) {let item=prefixPath(path,ele);if (item.split('/')[6]) {return item.split('/')[3] + '/' + item.split('/')[4]+ '/' + item.split('/')[5]+ '/' + item.split('/')[6]}else if (item.split('/')[5]) {return item.split('/')[3] + '/' + item.split('/')[4]+ '/' + item.split('/')[5]}else if (item.split('/')[4]) {return item.split('/')[3] + '/' + item.split('/')[4]} else {return item.split('/')[3]}
}/*** 递归获取分组信息并排序*/
function getGroupChildren(path,ele,root) {let pa = fs.readdirSync(path + "/" + ele + "/");let palist=pa;pa = palist.sort(function (a, b) {return a.replace(".md", "").match(/[^-]*$/) - b.replace(".md", "").match(/[^-]*$/)});pa.forEach(function (item, index) {let info = fs.statSync(path + "/" + ele + "/" + item);if (info.isDirectory()) {let children = [];let group = {};group.title = item.split('-')[0];group.collapsable = true;group.sidebarDepth = 2;getGroupChildren(path + "/" + ele, item, children);group.children=children;root.push(group);} else {if (checkFileType(item)) {root.push(getPath(path + "/" + ele, item));}}})
}
/*** 初始化*/
function getChildren(path,ele){var root=[]getGroupChildren(path,ele,root);return root;
}module.exports = {getChildren: getChildren};

新建 sidebarConfig.js 导入 vuepress-sidebar-auto.js 的 getChildren 方法文件路径 docs/.vuepress/sidebarConfig.js

const {getChildren} = require("./vuepress-sidebar-atuo/vuepress-sidebar-auto");
let sidebar={};
/*** */
sidebar={//左侧列表'/guide/': [{title: 'guide',collapsable: false,//来让一个组永远都是展开状态sidebarDepth: 2,children: getChildren('./docs','guide')}],'/': [''] //不能放在数组第一个，否则会导致右侧栏无法使用};
module.exports = sidebar;

navConfig.js 不具备自动生成功能

const nav = [{text: 'Home', link: '/'},{text: 'Guide', link: '/guide/', target: '_self'},{text: 'VuePress中文网', link: 'https://www.vuepress.cn', target: '_blank'},{text: 'Vue.js', link: 'https://cn.vuejs.org/', rel: ''},{text: '项目',ariaLabel: '项目',items: [{text: '模块一', link: '/模块一/', items: [{text: "子模块一", link: "/模块一/子模块一/"},{text: "子模块二", link: "/模块一/子模块二/"}]},{text: '模块二', link: '/模块二/'}]}
];
module.exports = nav;

config.js 引用该sidebar 文件路径 docs/.vuepress/config.js

const navConfig =  require("./navConfig");
const sidebarConfig =  require("./sidebarConfig");
module.exports = {title: 'VuePress_Insect',description: 'VuePress_Insect',themeConfig: {theme:"@vuepress/theme-default",logo: '/logo.png',nav: navConfig,sidebar: sidebarConfig,sidebarDepth: 2,displayAllHeaders: true,activeHeaderLinks: false,},base: "/",head: [['link', { rel: 'icon', href: '/logo.png' }]],host: "0.0.0.0",port: 80,temp: "/path/to/@vuepress/core/.temp",dest: ".vuepress/dist",markdown:{lineNumbers: true,// markdown-it-anchor 的选项anchor:{ permalink: true, permalinkBefore: true, permalinkSymbol: '#' },// markdown-it-toc 的选项toc: { includeLevel: [2,3] },/*extendMarkdown: md => {// 使用更多的 markdown-it 插件!md.use(require('markdown-it-xxx'))}*/}
};

项目文件目录结构

启动后的效果暂时未做build测试

vuePress侧边栏sidebar分组自动生成的实现相关推荐

vuepress-theme-reco自动生成侧边栏
前言因为当前的博客框架并没有提供相关的自动生成侧边栏插件,也没有相应的配置.这样子就会导致我每次写完文章之后都要去配置对应的侧边栏结构. 可能有人觉得没什么,配置也就是几行,又或是一行代码的事.但是 ...
markdown自动生成侧边栏TOC /目录
markdown自动生成侧边栏TOC /目录模板地址 : https://github.com/huyande/MarkdownTemplate.git
vuepress侧边栏配置_VuePress默认主题配置(default theme config) - VuePress中文网
# 默认主题配置(default theme config) 提示此页面上列出的所有选项仅适用于默认主题.如果你使用的是自定义主题,则选项可能会有所不同. # 主页(Homepage) 默认主题提供 ...
又一个Jupyter神器，操作Excel自动生成Python代码
来源 | Python数据科学(ID: PyDataScience) 不得不说,Jupyter对于表的处理真的是越来越方便了,很多库可以直接实现可视化操作,无需写代码.但是这还不够,最近看到一个神器叫 ...
ES批量索引写入时的ID自动生成算法
对bulk request的处理流程: 1.遍历所有的request,对其做一些加工,主要包括:获取routing(如果mapping里有的话).指定的timestamp(如果没有带timestamp ...
docwizard c++程序文档自动生成工具_工具用的好，老师下班早！老师的高效办公利器都在这！...
每日公务帖子堆积如山为师却不觉得烦闷只因七种武器傍身,一身轻松今日特推荐七种武器助力教师.学者.科研人员大幅提升工作效能! 一篇好论文总是需要经过N+关卡才能"逃出生天",上到老板 ...
python写魔兽世界脚本_用python bat写软件安装脚本 + HM NIS Edit自动生成软件安装脚本...
2019-03-11更新:原来NSIS脚本也可以禁用64位文件操作重定向的! 1.在安装脚本的开始处定义 LIBRARY_X64. !include "MUI.nsh" !incl ...
docwizard c++程序文档自动生成工具_如何开发一个基于 TypeScript 的工具库并自动生成文档
为什么用 TypeScript? TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any ...
【Python】又一个Jupyter神器，操作Excel自动生成Python代码！
大家好,我是东哥. 不得不说,Jupyter对于表的处理真的是越来越方便了,很多库可以直接实现可视化操作,无需写代码.但是这还不够,最近看到一个神器叫Mito,它真的是做到了无需写一行代码,而且手动的 ...

vuePress侧边栏sidebar分组自动生成的实现

vuePress侧边栏sidebar分组自动生成的实现相关推荐

最新文章

热门文章