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测试