凡科建站收费,精准防控高效处置,做户型图的网站,phpcms 和wordpress#x1f468;#x1f3fb;#x1f4bb; 热爱摄影的程序员 #x1f468;#x1f3fb;#x1f3a8; 喜欢编码的设计师 #x1f9d5;#x1f3fb; 擅长设计的剪辑师 #x1f9d1;#x1f3fb;#x1f3eb; 一位高冷无情的编码爱好者 大家好#xff0c;我是 DevO… 热爱摄影的程序员 喜欢编码的设计师 擅长设计的剪辑师 一位高冷无情的编码爱好者 大家好我是 DevOps 工程师 欢迎分享 / 收藏 / 赞 / 在看 【需求】
通常情况下在使用 VuePress 时需要指定 sidebar 的内容但是如果我们的文章很多每次都需要手动指定这样就很麻烦所以我们可以通过自动获取文章侧边栏目录的方式来解决这个问题。 【解决】
在 docs/.vuepress/utils 新建如下代码读取指定目录下的所有.md文件并按照文件名从大到小排列返回文件名数组
const fs require(fs);
const path require(path);/*** 读取指定目录下的所有.md文件按照文件名从大到小排列* param relativePath 相对路径* returns {string[]|*[]} 文件名数组*/
function findMdFiles(relativePath) {const directoryPath path.join(process.cwd() /docs/, relativePath); // 使用process.cwd()来获取当前工作目录并构建目录路径try {const files fs.readdirSync(directoryPath);// 筛选出以.md为后缀的文件名并排除README.mdconst mdFiles files.filter((file) file.endsWith(.md) file ! README.md).map((file) path.parse(file).name);// 按照从大到小排序mdFiles.sort((a, b) {const aNum parseInt(a.slice(1));const bNum parseInt(b.slice(1));return bNum - aNum;});console.log(mdFiles);return mdFiles;} catch (error) {console.error(Error reading directory ${directoryPath}: ${error});return [];}
}module.exports {findMdFiles
};这样我们就可以在 docs/.vuepress/config.js 中使用了
const path require(./utils/path.js);// 其他代码/aaa/: [{title: 编程干货,collapsable: true,children: path.findMdFiles(/aaa/)}
]代码将获取 docs/aaa 目录下的所有 .md 文件并按照文件名从大到小排列然后将其作为侧边栏的目录。
