VuePress实现自动获取文章侧边栏目录功能

请添加图片描述

👨🏻‍💻 热爱摄影的程序员
👨🏻‍🎨 喜欢编码的设计师
🧕🏻 擅长设计的剪辑师
🧑🏻‍🏫 一位高冷无情的编码爱好者
大家好,我是 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 文件,并按照文件名从大到小排列,然后将其作为侧边栏的目录。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/153626.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

性能测试-如何进行监控设计

监控设计步骤 首先,你要分析系统的架构。在知道架构中使用的组件之后,再针对每个组件进行监控。 其次,监控要有层次,要有步骤。先全局,后定向定量分析。 最后,通过分析全局、定向、分层的监控数据做分析…

SpringbootWeb快速入门

1. 创建新项目,并勾选相关依赖 选中Spring Initializr,设置相关项 点击next选中spring web 点击create 2. 定义HelloController类,添加方法和注解 import org.springframework.web.bind.annotation.RequestMapping;: 这一行导入了Spring MVC…

vue接入高德地图获取经纬度

&#x1f90d;step1:高德地图开放平台&#xff0c;根据指引注册成为高德开放平台开发者&#xff0c;并申请 web 平台&#xff08;JS API&#xff09;的 key 和安全密钥; &#x1f90d;step2:在html引入安全密钥&#xff08;获取经纬度用&#xff0c;不然会报错&#xff09; <…

设计模式 - 迭代器模式

目录 一. 前言 二. 实现 三. 优缺点 一. 前言 迭代器模式是一种行为型设计模式&#xff0c;它提供了一种统一的方式来访问集合对象中的元素&#xff0c;而不暴露集合内部的表示方式。简单地说&#xff0c;就是将遍历集合的责任封装到一个单独的对象中&#xff0c;我们可以按…

JVM的内存模型

一、JVM的内存模型 1.1、目标 内存模型是用来描述JVM内部的内存结构和内存管理的模型。它定义了JVM在运行Java程序时所需要的各种内存区域&#xff0c;以及每个内存区域的作用和特点。 1.2、结构划分 1.2.1、栈 每个线程在执行Java方法时会创建一个栈帧&#xff08;Stack …

数据库中了mkp勒索病毒怎么恢复数据,勒索病毒解密,数据恢复

mkp勒索病毒是一种危害性极大&#xff0c;且比较常见的电脑病毒类型。根据数据统计&#xff0c;这种类型的勒索病毒每月攻击的用户数量高达数百起。其中绝大多数用户需要恢复的数据类型为数据库。包括但不限于SQL server、MySQL和oracle等数据库。所以云天数据恢复中心将针对数…

如何查看dll文件内导出函数名称

一 使用VS自带工具 进入VS开发环境&#xff0c;然后Tools -> Visual studio 2017 Command Prompt&#xff0c;打开兼容工具命令提示符&#xff0c; 如果工具 目录下没有命令行提示&#xff0c;可以从开始菜单找到VS的命令行提示符。 cd到dll所在目录&#xff0c;输入命令…

直播购物App开发流程:从构思到上线的详细指南

直播购物App在现代社交商务领域崭露头角&#xff0c;具有巨大的潜力。本文将为您提供从构思到上线的详细直播购物App开发流程&#xff0c;并提供相关的代码示例。 步骤1&#xff1a;明确目标和构思 在着手开发之前&#xff0c;首先要明确您的直播购物App的目标和构思。考虑以…

Library <iconv2.4.0> not found 解决方法

1、升级到Xcode15之后&#xff0c;跑到C的库出现了这个问题。 2、于是去Xcode里面搜了一下&#xff0c;这个库已经搜不到了&#xff0c;但是项目里还是配置的&#xff0c;于是接下意识把它删掉了&#xff0c;就不报错了&#xff0c;顺手还把类似的这个库给加进去了 3、而且跑起…

win10搭建Selenium环境+java+IDEA(3)

这里主要对前面的maven和selenium做补充说明&#xff0c;以及更新一些pom文件下载依赖的问题。 IDEA里面&#xff0c;如果你创建的工程是maven工程文件&#xff0c;那么就会有一个pom.xml文件&#xff0c;可以在这个网站&#xff1a;https://mvnrepository.com/搜索依赖&#…

Unity布料系统Cloth

Unity布料系统Cloth 介绍布料系统Cloth(Unity组件)组件上的一些属性布料系统的使用布料约束Select面板Paint面板Gradient Tool面板 布料碰撞布料碰撞碰撞适用 介绍 布料系统我第一次用是做人物的裙摆自然飘动&#xff0c;当时我用的是UnityChan这个unity官方自带的插件做的裙摆…

Go语言面经进阶10问

1.Golang可变参数 函数方法的参数&#xff0c;可以是任意多个&#xff0c;这种我们称之为可以变参数&#xff0c;比如我们常用的fmt.Println()这类函数&#xff0c;可以接收一个可变的参数。可以变参数&#xff0c;可以是任意多个。我们自己也可以定义可以变参数&#xff0c;可…

保护 Web 服务器安全性

面向公众的系统&#xff08;如 Web 服务器&#xff09;经常成为攻击者的目标&#xff0c;如果这些业务关键资源没有得到适当的保护&#xff0c;可能会导致安全攻击&#xff0c;从而导致巨大的财务后果&#xff0c;并在客户中失去良好的声誉。 什么是网络服务器审核 当有人想要…

SpringBoot的创建和使用

优点 快速添加依赖&#xff1b; 内置web容器&#xff1b; 自动装配&#xff1b; idea创建 创建maven项目&#xff08;配置&#xff09; 一定要选择2.x版本的Spring Boot 介绍目录 (有这个注解的SpringBootApplication就是启动类) 删除文件 尝试去运行带有SpringBootApplica…

# 解析Pikachu靶场:一个安全研究的练习场

引言 Pikachu靶场是一个非常流行的安全研究和渗透测试练习平台。这个环境包括多个安全漏洞&#xff0c;从基础的到高级的&#xff0c;供安全研究人员和渗透测试者进行实验和学习。在这篇博客中&#xff0c;我们将探讨Pikachu靶场的基本概念&#xff0c;功能&#xff0c;以及如…

Flink-SQL join 优化 -- MiniBatch + local-global

背景 问题1. 近期在开发flink-sql期间&#xff0c;发现数据在启动后&#xff0c;任务总是进行重试&#xff0c;运行一段时间后&#xff0c;container心跳超时&#xff0c;内存溢出&#xff0c;作业无法进行正常工作 023-10-07 14:53:30,408 | INFO | [flink-akka.actor.defa…

c++模板库容器list vector map set操作和性能对比

文章目录 listvectormapset性能比较总结 list 列表&#xff08;list&#xff09;是C STL中的一种容器类型&#xff0c;它是一个双向链表&#xff0c;可以在任意位置高效地添加、删除、移动元素。 以下是一些常用的列表操作&#xff1a; 创建列表 #include <list> std…

什么是信创测试?信创测试工具有哪些?

信创全称是“信息技术应用创新”&#xff0c;旨在实现信息技术自主可控&#xff0c;规避外部技术制裁和风险&#xff0c;其涉及产业链包括硬件、基础软件、应用软件、云服务、数据安全等领域。 信创测试是指对信创工程项目中的产品、系统等进行测试和验证&#xff0c;以确保其…

JVM 参数

JVM 参数类型大致分为以下几类&#xff1a; 标准参数&#xff08;-&#xff09;&#xff1a;保证在所有的 JVM 实现都支持的参数非标准参数&#xff08;-X&#xff09;&#xff1a;通用的&#xff0c;特定于 HotSpot 虚拟机的参数&#xff0c;这些参数不保证在所有 JVM 实现中…

用SegNext训练dms数据集(一)

数据集官方格式&#xff1a; 在mmseg/datasets下对数据集进行初始定义 在configs/_ _base_ _/datasets下对数据加载进行定义 在configs/下选择需要的模型参数进行修改 找了两个模型fcn和danet进行训练 类别数应该等于 n 1, 也就是多少类别背景。46类应该是47 返回tools/trai…