【docsify】docsify自动生成侧边栏

已于 2023-04-04 19:09:06 修改
阅读量1k 收藏 5
点赞数 6
分类专栏： python脚本 文章标签： python
于 2023-04-04 18:07:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huichen1233/article/details/129958220
版权
文章介绍了如何使用一个Python脚本来自动生成docsify的侧边栏文件，如README.md和_sidebar.md。脚本基于os库，可以从文件夹结构中读取信息。用户只需配置config.ini文件，指定docsify的根目录和其他选项，即可执行脚本创建所需文件。文章提供了两个示例，展示了不同配置下（创建深度设置为-1和0）的文件生成效果。
摘要由CSDN通过智能技术生成

docsify 侧边栏自动生成脚本

打包成exe文件，程序大小约为5M，还是比较轻量的，主要文件有：

  1. buildSidebar.exe -> 执行程序后在config.ini设置的根目录下文件夹生成READMD.md和_sidebar.md（名称可自定义）
  2. config.ini -> 配置生成文件的一些输出文件\忽略情况等选项,具体可以看config.ini文件中注释

图片效果部分在最下面的案例中有

1. 脚本介绍

docsify好像没法自动读取文件夹目录结构并且展示在页面上,需要对每个文件夹配置_sidebar.md文件

我用python做了一个脚本,基本就用到了os库中的一些函数，打包程序只有5M左右

该程序运行的配置参数在config.ini，无特殊需求默认即可（默认忽略“_”和"."开头的文件）

1.1 程序链接

  1. gitee仓库
  2. github仓库
  3. 百度网盘链接 提取码：rfxb

2. 操作步骤

将config.ini文件和buildSidebar.py(或者exe程序)放在同一目录，如果对忽略文件没有特别要求，只需要修改config.ini文件中的base_dir为docsify根目录路径即可，双击运行程序

2.1 config.ini格式

[config]
# docsify根目录
base_dir=D:\MyData\Data\Docsify\docs
# 忽略以“_”,"."开头的文件，如果要添加新文件，用“|”分隔
ignore_start_with=_|.
# 只读取".md"格式问价，如果添加新格式，用“|”分隔
show_file=.md
# 要忽略的文件名，要添加新文件，用“|”分隔
ignore_file_name=README


[outFile]
# 想要在几级目录生成文件,默认"-1"表示所有文件夹生成,"0"表示在根目录生成,可以配合侧边栏折叠插件使用
create_depth=0
# 每个文件夹下主页文件名称和侧边栏文件名,默认README.md和_sidebar.md文件，想生成其他名称可修改文字，或者添加用“|”分隔
eachFile=README.md|_sidebar.md

3. 例子1

在每一个子文件夹下生成文件

原先文件夹的结构是

docs
│  .nojekyll
│  ceede.md
│  index.html
│  _coverpage.md
│  
├─PLC
│  │  电梯群控算法.md
│  │  
│  └─最新测试
│          hi回答.md
│          
├─_media
│      Pasted image 20230403194327.png
│      
└─启发式算法
    │  差分进化算法.md
    │  
    └─测试
            测试.md

我在config.ini设置忽略（默认参数，可以不用动）:

  1. 以"_“,”."开头的文件
  2. 忽略文件名为README的文件
  3. 结构中只包括".md"开头的文件

运行程序得到的结构是

docs
│  .nojekyll
│  ceede.md
│  index.html
│  README.md
│  _coverpage.md
│  _sidebar.md
│  
├─PLC
│  │  README.md
│  │  _sidebar.md
│  │  电梯群控算法.md
│  │  
│  └─最新测试
│          hi回答.md
│          README.md
│          _sidebar.md
│          
├─_media
│      Pasted image 20230403194327.png
│      
└─启发式算法
    │  README.md
    │  _sidebar.md
    │  差分进化算法.md
    │  
    └─测试
            README.md
            _sidebar.md
            测试.md

可以看到_media没有被操作,也符合要求

3.1 图片效果

请添加图片描述
点击子目录后页面变成如下
请添加图片描述

4. 例子2

上面的格式中,点击相应文件夹实际上会跳转,如果不想跳转,可以设置config.ini文件的create_depth参数

当参数为-1时候,则每个文件夹生成文件

当参数为0时,仅在根目录生成

该功能配合侧边栏折叠效果更好

原先结构

docs
│  .nojekyll
│  ceede.md
│  index.html
│  _coverpage.md
│  
├─PLC
│  │  电梯群控算法.md
│  │  
│  └─最新测试
│          hi回答.md
│          
├─_media
│      Pasted image 20230403194327.png
│      
└─启发式算法
    │  差分进化算法.md
    │  
    └─测试
            测试.md

config.ini中create_depth设为0

生成的新结构

docs
│  .nojekyll
│  ceede.md
│  index.html
│  README.md
│  _coverpage.md
│  _sidebar.md
│  
├─PLC
│  │  电梯群控算法.md
│  │  
│  └─最新测试
│          hi回答.md
│          
├─_media
│      Pasted image 20230403194327.png
│      
└─启发式算法
    │  差分进化算法.md
    │  
    └─测试
            测试.md

可以看到仅在根目录生成了文件

4.1 图片效果

请添加图片描述
配合侧边栏折叠插件效果极佳
请添加图片描述

-X-灰灰-x-
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Docsify : 自动生成sidebar与子目录sidebar
04-26
自动生成sidebar与子目录sidebar
docsify-sidebar-collapse:一个docsify插件，支持侧边栏目录的扩展和折叠
05-11
docsify-sidebar-collapse 支持docsify侧边栏目录扩展和折叠 预习 用法 首先，确保已启用配置，并且根目录中提供了Markdown文件_sidebar.md 。 然后将脚本插入文档中，就像的用法一样 < script > window . $docsify = { loadSidebar : true , alias : { '/.*/_sidebar.md' : '/_sidebar.md' , } , subMaxLevel : 3 , ... sidebarDisplayLevel : 1 , // set sidebar display level } </ script > < script src =" //cdn.jsdelivr.net/npm/docsify/lib/doc
【小沐学写作】Docsify制作在线电子书、技术文档（Docsify + Markdown + node）
爱看书的小沐
12-23 1480
一个神奇的文档网站生成器。简单轻巧没有静态构建的 html 文件多个主题Docsify会即时生成您的文档网站。与 GitBook 不同，它不会生成静态 html 文件。相反，它会智能地加载和解析您的 Markdown 文件，并将它们显示为网站。要开始使用它，您需要做的就是创建一个并将其部署在 GitHub Pages 上。没有静态构建的 html 文件简单轻巧智能全文搜索插件多个主题有用的插件 APIEmoji 支持与IE11兼容支持服务端渲染。
搭建Docsify并自动生成目录访问markdown笔记
最新发布
qq_74177889的博客
06-11 483
为了将自己写的markdown笔记都放到网页上，方便查阅，固选择Docsify和自动生成侧边栏目录的方式，效果非常优秀。启动一个本地服务器，可以方便地实时预览效果。默认访问地址 http://localhost:3000。将这里指定为自己的文档根目录,然后点击快捷方式就会自动生成目录了。初始化成功后，可以看到 ./docs 目录下创建的几个文件。// 避免搜索索引冲突,同一域下的多个网站之间。安装 docsify-cli 工具。// 跳转后自动到顶部。// 侧边栏文档目录。// 页面右侧toc。
Docsify 侧边栏 : 自动生成sidebar与子目录sidebar
未将对象引用设置到对象的实例
12-10 4981
Docsify 侧边栏 : 自动生成sidebar与子目录sidebar https://github.com/xxxxue/Docsify-Build-Sidebar
docsify单文档生成页面侧边栏可折叠
qq_60876952的博客
05-29 1480
因为点击侧边栏也会跳转到对应位置，所以只需要监听滚动事件就可以了，但是还有一个明显的bug，当文档从下往上滚动时，触发不到箭头切换，暂时还没有想到好的解决思路，如果大佬们有其他方法，希望能给小弟推荐一下，感激不尽。本来呢是用这个东西做一个使用文档， 但是在使用时遇到一个问题，单个markdown文档生成出来了三级目录，要求侧边能够折叠并且有下一级的情况下展示出折叠箭头， 有人推荐使用。文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个。箭头是有了，接下来就剩展开与收起时箭头的切换了。
Docsify侧边栏多级子目录生成
csding11的博客
08-13 1200
自动生成 docsify 的 sidebar 和 每个子目录中的 sidebar。
可折叠侧边栏菜单
weixin_34248849的博客
12-05 1131
在线演示 本地下载
docsify左侧导航点击展开伸缩功能
09-21
`Docsify`是一个轻量级的静态站点生成器，特别适用于创建项目文档网站。它允许用户通过Markdown文件轻松地组织和展示内容，同时提供了丰富的插件来扩展其功能。在本话题中，我们将深入探讨如何实现"docsify左侧导航...
mydocsify：我的docsify配置
02-26
在这个文件中，作者可能已经定义了自己的一套颜色方案，调整了头部、底部、侧边栏的样式，甚至定制了高亮代码块的样式，以提高可读性。 再者，`README.md` 文件通常作为项目的入口，展示项目的概述、安装指南、使用...
docsify 自定义右侧md目录功能
09-21
`docsify`内置了自动生成目录的功能，它会根据Markdown文件中的标题结构生成一个可点击的侧边栏目录。这个功能对于浏览长篇文章或者多层级的内容十分有用，因为它允许用户快速跳转到感兴趣的部分。但是，有时候我们...
折叠效果侧边栏
04-14
折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏 折叠效果侧边栏，炫酷侧边栏
docBook::hatching_chick:很棒的启动器，就像docsify一样。包括侧边栏，标题和搜索。 :front-facing_baby_chick:
03-21
太空书 创建自己的太空书并根据需要对其进行自定义。 Spacebook可以快速设置，免费和100％开放源代码。 Spacebooks是现代的笔记本，您可以用来创建文档，勾勒出新的想法，构建简单的网站或任何适合您的想法。 演示和文档： :person_raising_hand: :collision: :woman_medium_skin_tone::rocket: :rocket: ‍:rocket: :satellite: 贡献 如果您想为Spacebook做出贡献或进行修复，则最好直接派生此存储库并向其提交拉取请求。如果您在演示/文档站点上发现了错字，也可以直接从每个页面顶部的“编辑”按钮打开一个分叉。 安装太空书 如果要快速安装以进行本地测试，请遵循以下说明： 要求 由于Tailwind 2.0版本，您必须运行Node版本12或更高版本。如果您需要在旧版本之间来回切换，建议使用NVM轻松管理您的Node版本。 （可选） 要查找您当前的节点版本： node --version 第一步 git clone https://github
markdown-file-tree:在Github Wiki的markdown（`_Sidebar.md`）中生成文件树，包括指向文件的链接
04-11
降价文件树 在GitHub Wiki边栏中生成markdown文件的文件树。 旨在帮助Github Wiki页面（如https://github.com/<user>/<repository>/wiki ）的侧边栏中的TOC（目录），请参阅更多内容。 Github Wiki Pages菜单仅显示单级目录文件。 Markdown文件树遍历目录结构，在HTML中创建多级树并将其保存到文件中，默认情况下_Sidebar.md被Github识别并放置在默认菜单下的侧边栏。 此仓库中的示例 入门 请按照以下说明和该工具。 安装/运行 全局安装： npm install -g markdown-file-tree 使用配置文件的路径作为可选参数运行： markdown-file-tree [configPath] 默认情况下，本地目录中的configPath是.mftrc.json 。 如果未
docsify-blog:docsify文档网站
03-17
Docsify 一个轻巧巧（〜21kB）没有生成静态的html文件主题丰富 ＃安装 本地建造 如果你想在本地建造：npm安装： npm i docsify-cli -g 初始化： docsify init ./docs 本地预览： docsify serve 进入 为了更好地SEO，您可以在每个文件后面自定义标题 * [ Home ](/) * [ Guide ](guide.md "The greatest guide in the world") 默认情况下会自动根据文章标题生成目录，如果不想要，可以再index.html中添加： < script > window.$docsify = { loadSidebar : true , subMaxLevel : 2 } < / script > subMaxLevel：2表示只显示h1〜h2的标题，对
纯js+html菜单栏折叠，支持数据无限嵌套
12-19
数据格式支持数组形式 list = [ { id: 1, name: '测试', children: [ { id: 11, name: '测试1', children: [ { id: 112, name: 'cs1' } ] }, { id: 12, name: '测试2' } ] }]
docsify——一个神奇的文档站点生成器
01-20
2. **配置**：在`index.html`中设置文档的基本信息，如侧边栏、主题色、加载的Markdown文件等。 3. **编写Markdown**：在项目目录下创建Markdown文件，docsify会自动识别并将其转化为网页内容。 4. **部署**：将...
Docsify 的边栏目录如何设置
HONEY MOOSE
11-29 1988
如下图中的文档中的 docsify 边栏是如何设置的？ 配置方法 在你的项目的 index.html 文件中，添加参数： loadSidebar: true 然后再在项目中添加一个 _sidebar.md 文件，这个文件的格式为： - CWIKIUS 文档概述 - [文档介绍和快速链接](README.md) - [公众平台](CONTACT.md) - Gradle - [Deploy](deploy.md) - 其他小工具 - [JWT](jwt/R..
推荐一款文档利器：docsify-sidebar-collapse
gitblog_00062的博客
06-04 383
推荐一款文档利器：docsify-sidebar-collapse 项目地址:https://gitcode.com/iPeng6/docsify-sidebar-collapse 在我们日常的工作和学习中，文档的阅读和编写是非常重要的一环。今天要向大家推荐的是一个高效且灵活的Markdown文档展示工具——docsify-sidebar-collapse，它为docsify框架添加了侧边栏目录的...
vue动态生成侧边栏
07-27
你可以使用Vue的动态绑定和循环指令来生成侧边栏。以下是一个简单的示例： 首先，在你的Vue组件中定义一个侧边栏项的数据数组，可以包含每个侧边栏项的名称和路由路径： ```javascript data() { return { sidebarItems: [ { name: '首页', path: '/' }, { name: '关于', path: '/about' }, { name: '服务', path: '/services' }, // 其他侧边栏项... ] }; } ``` 然后，在模板中使用`v-for`指令来循环生成侧边栏项： ```html <template> <div> <ul> <li v-for="item in sidebarItems" :key="item.path"> <router-link :to="item.path">{{ item.name }}</router-link> </li> </ul> </div> </template> ``` 这里使用了`v-for`指令来遍历`sidebarItems`数组，并使用`:key`绑定每个侧边栏项的唯一标识。在循环体内部，使用`router-link`组件创建路由链接。 确保在使用这段代码之前，你已经安装并配置了Vue Router，以便能够使用`router-link`组件来进行路由导航。 这样，当你更新`sidebarItems`数组时，侧边栏会自动根据新的数据重新生成。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值