vuepress 侧边栏(sidebar) 动态展示配置

vitepress系列-04-规整sideBar左侧菜单导航 将于其他的配置分开,避免。文件目录用来左侧导航菜单。所有的模块都导入进来。 阅读详情

vuepress的侧边栏动态配置,研究了好几天终于弄懂了,它使用JSON的数组和对象两种方式配置侧边栏标题,对象针对每个导航变化时,侧边栏随着变动;数组则是针对每个页面内容变化,侧边栏跳转。vuepress官网地址上使用就是。如下图所示:

侧边栏

点击介绍>它是如何工作的 、快速上手等可以看到侧边栏不动,右侧内容页面在变化。参考这种方式,我的vuepress的config.js中侧边栏配置如下:

sidebar: {
	  		'/dev_manage/': [{
				title: 'items01',
				collapsable: false, 
				children: [
					{ title: 'items01', path:'/dev_manage/'},
					{ title: 'items02', path:'/dev_manage/aaa'}
				]
			}],
	  		'/literature/': [{
				title: 'items02',
				collapsable: false,
				children: [
					{ title: 'items01', path:'/literature/aaa'},
					{ title: 'items02', path:'/literature/bbbb'}
				]
			}],
	  		'/guide/': [{
				title: 'items03-1',
				collapsable: false,
				children: [
					{ title: 'items01', path:'/guide/'},
					{ title: 'items01', path: '/guide/bbbb' }
				]
			  },
			  {
			  	title: 'items03-2',
			  	collapsable: false,
			  	children: [
			  		{ title: 'items01', path:'/guide/aaaa/'},
			  		{ title: 'items01', path:'/guide/bbb/'}
			  	],
			}],
	  		'/language/': [{
				title: 'items04', 
				collapsable: false,
				children: [
					{ title: 'Chinese', path:'/language/chinese/'},
					{ title: 'English', path:'/language/english/'}
				]
			}]
	  	}

这样,点击导航时,侧边栏就会根据内容动态变化,而且,点击侧边栏内容,右侧内容也会跟着变化。跟官网效果一样。

具体本人做的一个示例地址: http://dkgee.gitee.io/

vitepress从0到1,让每个前后端小伙伴都拥有一个属于自己的博客 首先,我们在文件夹下定义一个文件,名为home.vue。然后在里面写些想要展示的内容所对应的代码,</</</ 阅读详情

相关推荐

手把手教你用CubeMX给GD32F103点灯、调串口(附完整工程)

本文详细介绍了如何使用CubeMX为GD32F103开发板配置GPIO点灯和串口通信,包含完整的工程创建、代码构建和测试流程。特别强调了GD32与STM32的差异点及常见避坑技巧,帮助开发者快速上手GD32开发。

weixin_42566424的博客 313

vitepress:编写vite插件实现vitepress自动sidebar

vitepress:编写vite插件实现vitepress自动sidebar

m0_64401231的博客 2192

基于Arduino 的 FM 调频收音机

这是一个基于 Arduino 的开源的收音机项目,它具备一台标准收音机的全部功能,从控制部分到外壳都可以自己 DIY。在项目中,我们将介绍让 FM 收音机调谐器的 RDA5807 模块与 I2C 协议进行通信的方法,整个过程只需要两根线就可以与 IC 通信,接线非常简单。3D 打印的外壳也非常简洁。总之,是个非常简单和实用的项目,来试试吧!

ByteBox的博客 1643

vuepress-----4、侧边栏

如果你希望自动生成一个仅仅包含了当前页面标题(headers)链接的侧边栏,你可以通过。记得关闭自动生成侧边栏的功能。

weixin_44235759的博客 1869

【NTN 卫星通信】使用地面网络和卫星网络接入的终端应用场景

卫星接入有广覆盖的特点, 可以改善地面接入网覆盖或无线条件差的地区(例如多径干扰)的服务可用性。对于高速移动中需要实时业务的终端,如IMS语音/视频会议,可以通过地面接入和卫星接入同时实现与5G系统的双连接,在地面接入网不可用的情况下获得连续可靠的业务。

weixin_43603524的博客 2558

《FPGA接口与协议》专栏的说明与导航

《FPGA接口与协议》专栏的说明与导航(建议阅读)。

孤独的单刀 17万+

Vuepress 导航栏与侧边栏配置详解

1、默认读取themeConfig.nav.link 以 / 结束默认读取 README.md 2、sidebar.path 设为键值对时,key 以 / 结尾,与 path 拼接,为完整的 md 文档路径。path 可省略 .md 后缀 3、sidebarDepth 默认为1 3、sidebar.path 写成 ['test01', 'test02'] 侧边栏的目录自动读取test01.md 中的 一级、二级标题 ...

前端技术 2万+

RK3568平台(camera篇) mipi csi接口

MIPI联盟,即移动产业处理器接口(Mobile Industry Processor Interface 简称MIPI)联盟。MIPI(移动产业处理器接口)是MIPI联盟发起的为移动应用处理器制定的开放标准和一个规范。MIPI是差分串口传输,速度快,抗干扰。主流手机模组现在都是用MIPI传输,传输时使用4对差分信号传输图像数据和一对差分时钟信号;MIPI摄像头有三个电源:VDDIO(IO电源),AVDD(模拟电源),DVDD(内核数字电源),不同sensor模组的摄像头供电不同。

weixin_49303682的博客 5348

vuepress侧边栏展开配置

vuepress实现动态展开效果的侧边栏。

影子的博客 3253

Android系统解决-授予管理所有文件的权限问题

Android版本一直在加,Android9/Android10/Android11/Android12/Android13/Android14/Android15 , 客户app 也在不断适配,但是存在特别是定制产品中,客户不愿意适配,啥问题都让系统解决,绕过一定机制、实现。这里说的就是一个常见的常见需求:Android13 上面,客户要求默认授予管理所有文件的权限,如下:问题是机器重启后这个权限仍需要重新打开才行,那就是每次开机使用某些功能前都需要授权一次。是的ADB对应命令。

十年饮冰,难凉热血 2542

ERROR: Ignored the following yanked versions: 0.8.3, 0.10.19.dev18 的解决办法

关于这个问题,博主是在进行项目中的python依赖包安装的时候遇见的,遇到的异常:关于这个问题,是在。

Spring Boot-Common On With You 643

vuepress侧边栏配置_侧边栏(sidebar) - VuePress 中文文档

要启用侧边栏, 请使用 themeConfig.sidebar。基本的配置需要一个链接数组:// .vuepress/config.jsmodule.exports = {themeConfig: {sidebar: ['/','/page-a',['/page-b', 'Explicit link text']]}}你可以省略 .md 扩展名,以 / 结尾的路径被推断为 */README.md ...

weixin_39884738的博客 5734

基于BP神经网络PID控制的电机转速控制器设计复现

摘要:本文提出了一种基于BP神经网络PID控制的永磁同步电机转速控制方法,通过MATLAB/Simulink平台实现了算法复现。系统采用三层BP神经网络在线调整PID参数,包含输入层(误差、误差变化率、误差积分)、5节点隐含层和输出层(Kp、Ki、Kd)。仿真结果表明,相比传统PID控制,该方案具有更快的响应速度(上升时间减少约40%)、更小的超调量(降低约60%)和更强的抗干扰能力,在电动汽车电机驱动等复杂工况下表现优异。文中详细给出了PMSM数学模型建立、BP网络设计、权值更新算法及Simulink仿真

max500600的博客 308

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

最近在学习vuePress,返现网上搜索sidebar自动生成的方案要么是需要一堆堆的配置、要么是不能分组显示,各种不理想。 因此参考 这里感谢malunan 的引导 "vuepress-sidebar-atuo": "^1.0.4" package.json { "name": "vuepress-sidebar-atuo", "version": "1.0.4", "description": "vuepress需要手动设置侧边栏、导航栏,导入大量笔记就很费时间。...

Insect的博客 6368

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

vuepress侧边栏配置_VuePress 侧边栏几种配置

module.exports = {title: "Fur",description: "小僧不才,略懂皮毛(Fur)",base: "/fur.baiqian.ltd/",dest: "dist",markdown: {lineNumbers: true,toc: {includeLevel: [1, 2, 3],},},themeConfig: {nav: [{text: "指南",link:...

weixin_39845113的博客 1329

IDEA的使用指南

IDEA基于java的使用手册,可以最快速的上手,在使用中不断的丰富自己的使用技巧.

VuePress生成多个侧边栏

VuePress生成多个侧边栏 1. 简单的多个侧边栏 vuepress介绍 相当于所有的导航栏公用一个侧边栏 需要在.vuepress目录下的config.js文件中配置 config.js文件 目前针对于默认的主题配置module.exports = { themeConfig: { nav: [ { text: '指南', link: '/guide/' }, { text: 'VuePress配置',

小火车况且况且况且的博客 4374

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

vuepress侧边栏配置_VuePress 快速踩坑小结

最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePress 针对 Markdown 文件做了一些扩展使其功能更加强大,本文将围绕搭建一个 Github 的静态博客展开。为项目加入 VuePress第一步为您的项目...

weixin_39531604的博客 2135

VuePress搭建文档网站/个人博客(详细配置)主题配置-侧边栏配置

每个人都有惰性,但不断学习是好好生活的根本,共勉!两岸青山相对出,孤帆一片日边来。——《望天门山》

感谢阅读 1982

VuePress 侧边栏使用详解

前言 官网写的侧边栏教程真的是让人很糟心,经过一番摸索,总算大致弄清楚了,下面详细说一下用法: 目录结构: docs根目录下有一个README.md、chinese文件夹、english文件夹 最简侧边栏: sidebar: { '/language/chinese/': [ '', //该目录下的README.md文件 'a', //该目录下的a.md文件 'b' /

wq_ocean_的博客 1万+

【亲测免费】 推荐使用:Vuepress Plugin Auto Sidebar - 自动化你的文档侧边栏

推荐使用:Vuepress Plugin Auto Sidebar - 自动化你的文档侧边栏 Vuepress Plugin Auto Sidebar 是一个高效的开源插件,专为 Vuepress 设计,能够自动为你创建文档的侧边栏,极大地简化了构建专业级文档网站的工作流程。 项目介绍 在撰写技术文档时,组织清晰的侧边栏对于用户体验至关重要。Vuepress Plugin Auto Sidebar...

gitblog_00008的博客 567

VuePress 侧边栏配置与 useSidebar 实用指南

通过合理的侧边栏配置,可以显著提升文档的导航性和用户体验。无论是单一的侧边栏还是根据不同路径显示的多个侧边栏,VuePress 都提供了丰富的配置选项。同时,useSidebar组合式函数进一步增强了侧边栏的交互性和动态性。希望这些技巧能帮助你更好地组织和呈现你的文档内容。

1489

vuepress侧边栏配置_GitHub - realDuang/vuepress-plugin-auto-sidebar: vuepress 自动生成侧边栏的插件。...

Vuepress Plugin Auto Sidebar介绍(Introduction)这是为 vuepress 自动生成侧边栏分组的插件。1. 目录结构示例docs├── exampleMenu1│ ├── exampleSubMenu1-1│ │ └── file1.md│ ├── exampleSubMenu1-2│ │ └── exampleSubMenu1-2-1...

weixin_34757565的博客 2165

【vuepress】自动生成侧边栏

VuePress是尤雨溪尤大为了支持Vue及其子项目的文档需求而写的一个项目,VuePress界面十分简洁,并且非常容易上手,花少量时间就可以将项目架构搭好。

Ma_lunan的博客 2337

Vuepress Plugin Auto Sidebar 使用教程

Vuepress Plugin Auto Sidebar 使用教程 1. 项目的目录结构及介绍 Vuepress Plugin Auto Sidebar 项目的目录结构如下: ├── docs │ ├── .vuepress │ │ ├── config.js │ │ └── public │ ├── exampleMenu1 │ │ ├── exampleSubM...

gitblog_00214的博客 424

侧边栏_vuepress自动渲染侧边栏,还可以排序

记得点击蓝字关注我们哦!vuePress自动渲染侧边栏#前言:`vuepress需要手动设置侧边栏、导航栏,导入大量笔记就很费时间。为了能够专心写作而不用去管侧边栏、导航栏的引入,读取大量资料,改进了下面函数`#下载npmivuepress-sidebar-atuo#引入const{getChildren}=require("vuepress-sidebar-atuo...

weixin_29827071的博客 821

推荐使用 Vuepress Plugin Auto Sidebar 插件

推荐使用 Vuepress Plugin Auto Sidebar 插件 项目介绍 Vuepress Plugin Auto Sidebar 是一个专为 VuePress 设计的插件,旨在自动生成网站的侧边栏。这个插件极大地简化了网站导航栏的配置过程,让开发者能够更专注于内容的创作而非繁琐的配置工作。无论是 VuePress v1 还是 VuePress v2(测试阶段),该插件都能提供无缝的支持...

gitblog_00841的博客 452
上一篇: Java 同步JSON字符串至ES(Elasticsearch) 添加时间戳(@timestamp)、版本(@version) 字段
下一篇: nsqadmin 会报错 EOF
dkgee
博客等级 码龄14年 43粉丝 66原创
评论 14
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值