ipeng6 / docsify-sidebar-collapse Goto Github PK
View Code? Open in Web Editor NEWa docsify plugin, support sidebar catalog expand and collapse
License: MIT License
a docsify plugin, support sidebar catalog expand and collapse
License: MIT License
docsify-sidebar-collapse.min.js:1 Uncaught TypeError: Cannot read property 'childNodes' of null
at n (docsify-sidebar-collapse.min.js:1)
at docsify-sidebar-collapse.min.js:1
at a (docsify.min.js:1)
at a (docsify.min.js:1)
at a (docsify.min.js:1)
at W (docsify.min.js:1)
at r (docsify.min.js:1)
at Bn.Gn.$fetch (docsify.min.js:1)
at Bn.Vn._init (docsify.min.js:1)
at new Bn (docsify.min.js:1)
Get Started
button in the pagedocument.querySelector('.sidebar-nav > ul')
returns null when first loading docsify without a sidecar, which caused addLevelClass
failed
docsify-sidebar-collapse/src/sidebar-collapse-plugin.js
Lines 145 to 168 in b232a5a
问题:当目录为空时,addFolderFileClass
函数中的 li.querySelector('ul:not(.app-sub-sidebar)')
在判断时,由于后续找不到 ul
节点,所以会添加 file 属性。
解决方案:在 li.querySelector('ul:not(.app-sub-sidebar)')
的判断处添加一种新的判断。可以是 li.querySelector('a').href.endsWith('/')
。
原理: docsify 在解析 “markdown” 文件时,若以 “.md” 结尾则 a 标签
中的 “href” 的值不会以 “/” 结尾,而如果是目录则会添加斜杠(“/”)。
是否引起其他问题:暂未发现。
修改后的代码如下:
function addFolderFileClass() {
document.querySelectorAll('.sidebar-nav li').forEach(function (li) {
if (li.querySelector('ul:not(.app-sub-sidebar)') || li.querySelector('a').href.endsWith('/')) {
li.classList.add('folder');
} else {
li.classList.add('file');
}
});
}
拓展:
问题:sidebar 在解析 markdown 文件时,会多出来一个层级(与文档的一级标题一致)
解决方案:若需要移除它,需要找到 docsify.js
文件,在 Compiler.prototype.subSidebar = function subSidebar (level)
函数中 找到 toc[0] && toc[0].level === 1 && toc.shift();
然后复制一行并保存。
是否引起其他问题:在未设置 alias
聚合侧边栏时,会丢失第一个层级(文档的一级标题),其他正常显示。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>wiki</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
search: 'auto', // default
loadSidebar: true,
alias:{
'/.*/_sidebar.md': '/_sidebar.md',
},
autoHeader: true,
auto2top: true,
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
</body>
</html>
_sidebar.md
- AXX
- [0](/README.md)
- [36](.1.md)
- [K](/README.md)
- [Ama](./I/A.md)
- [Am](./I.md)
- BXX
- [s](/README.md)
- [s](./s.md)
- [s](./s.md)
- [u](/README.md)
- [u](./u.md)
- [v](/README.md)
- [v](./v.md)
- [m](/README.md)
- [m](./m.md)
- [f](/README.md)
- [b](./b.md)
- [cat](/README.md)
- [cat 1](/README.md)
- [cat 2](/README.md)
- [cat 3](./cat.md)
- [cat 4](./cat.md)
- [cat 5](/README.md)
- [cat 5](./ca.md)
- [cat 5](./.md)
- CXX
- [WC](/README.md)
- [WC](/README.md)
- [22](./22.md)
- [x](./x.md)
In the side bar, if you try to click the " >", it doesn't work. Only when you click on the word ahead of it. (e.g. > Support)
When the options expand showing the tree ( > Support >> Support & Contacts >> FAQ), if you click on >>Support &Contacts, then everything collapses, instead of expanding
希望侧边栏的折叠行为能和 Gitbook 的差不多,球球了)
Essentially the title. If you click on an already opened heading clicking it again should close it.
* [Home](/)
* [Guide](guide.md)
* Part1
- [1_1](Part1/1_1.md)
- [1_2](Part2/1_2.md)
* Part2
- [2_1](Part2/2_1.md)
- [2_2](Part2/2_2.md)
在上面的结构中,我只想让Part1, Part2等是可折叠,一旦点击到md文件,它们的h2,h3,h4标题都是直接罗列出来,并且是不可折叠,我应该在哪里修改参数
If the parent in the markdown doesn't have a link it doesn't work.
Given this sidebar.md
code
* Start Here
* [Cheatsheet](start-here/cheatsheet.md)
* [Diagram](start-here/diagram.md)
* [About Currying & Composition](start-here/currying-composition.md)
* [Glossary](start-here/glossary.md)
* [How to read](start-here/how-to-read.md)
* [Todo](start-here/todo.md)
It will not be clickable to open. I must make the parent be a link ala:
* [Start Here](start-here/cheatsheet.md)
When the sidebar content is too long to exceed the screen height and the sidebar link at the bottom is clicked, the sidebar reloads, causing the focus of the bottom link to be lost. tks.
Is it possible to add a property 'removeOpenToRoot' , because I find it easier to view documents without automatically closeing folders
if (window.$docsify && window.$docsify.removeOpenToRoot) {
removeOpenToRoot(getActiveNode());
}
window.$docsify = {
removeOpenToRoot:true//If not set, it is false
}
It would be great if we could default items on the sidebar to be closed, rather than all expanded.
Why are you importing <script src="//unpkg.com/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js">
and not the dist/docsify-sidebar-collapse.min.js file installed on dist directory?
默认应该是会有一个 >
显示的,但是我这边不显示这个按钮,虽然直接点也能展开就是了
See https://codesandbox.io/s/heuristic-stallman-56o0wr?file=/index.html
open the sidebar, click item 3 and expand, you will see duplicated icons
想加一个展开,收缩的图标,请问怎么实现呢?太难了啊
sidebar里带链接的子节点显示都正确, 但是目录节点对不齐。比如这个sandbox里的item 3.
See: https://codesandbox.io/s/falling-paper-w19udv?file=/README.md
- [Item 1](/)
- [Item 2](/)
- Item 3 (not aligned correctly)
- [Item 3.1](/)
- [Item 3.2](/)
- [Item 4](/)
- [Item 5](/)
inex.html 有如下片段,
<nav>
<a href="#/">首页</a>
<a href="#/docs/zh-cn/">中文</a>
<a href="#/docs/en/">EN</a>
</nav>
添加js后
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script> <script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>导航会消失
Hi there!
I have been using this great plugin, and I am having trouble displaying it on GitHub Pages. Basically, the full sidebar does not appear. When I run it locally on my computer, it works.
On my computer:
On GitHub Pages:
Here is the repo I am working on. I am using the docs
folder on GitHub Pages https://github.com/reymon359/collman-fruits-example
Here is the GitHub Pages deploy https://reymon359.github.io/collman-fruits-example/#/
Here is the index.html with the default config https://github.com/reymon359/collman-fruits-example/blob/master/docs/index.html
Here is the _sidebar.md
file I am working with https://github.com/reymon359/collman-fruits-example/blob/master/docs/_sidebar.md
I have tried using default docsify themes and disabling the search plugin, among other ideas, but none of them have worked.
If someone knows what I am doing wrong or where could be the issue, please let me know.
Thank you in advance!
当我安装这个插件之后,PC端没有问题,但在手机端,再无法打开侧栏了,以至于我只能看首页。
- [噜噜噜](nonsense1.md)
* [1. 水果篮](nonsense2/1.banana.md)
* [2. 蓝色猩猩](nonsense3/2.blue_ape.md)
* [2.1. 钢铁侠](nonsense3/2.1.iron_man.md)
* [2.2. 竹子](nonsense3/2.2.bamboo.md)
* [2.3. 雪人](nonsense3/2.3.snowman.md)
* [2.4. 纸飞机](nonsense3/2.4.paper_plane.md)
* [3. 粉色独角兽](nonsense4/3.pink_unicorn.md)
* [3.1. 火箭](nonsense4/3.1.rocket.md)
* [3.2. 蜜蜂](nonsense4/3.2.bee.md)
* [3.3. 蓝鲸](nonsense4/3.3.blue_whale.md)
* [3.4. 太阳](nonsense4/3.4.sun.md)
* [3.5. 青蛙](nonsense4/3.5.frog.md)
类似这样的目录在打开的时候才显示折叠
其实是这个issue里的问题,打开文件名无空格的文件左侧侧边栏会保持原来的状态,但是如果访问了路径中有空格的文件,侧栏会立刻收缩需要重新打开
样本:
_sidebar.md 路径提前进行过url编码
- ActiveMQ
- [ActiveMQ物理路径泄漏漏洞](./VulWiki/Web安全/ActiveMQ/ActiveMQ物理路径泄漏漏洞.md)
- [(CVE-2015-1830)ActiveMQ 路径遍历导致未经身份验证的rce](./VulWiki/Web安全/ActiveMQ/(CVE-2015-1830)ActiveMQ%20路径遍历导致未经身份验证的rce.md)
Hi, thanks for making this plugin. However, I cannot make it work by either add the script or copy your js/css code directly in plugins
.
路由切换折叠的还会被展开
移动设备上点击侧栏的任何标题后都会恢复到阅读模式,需要重新打开侧栏选择下级内容
device: iphone 6s plus
ios version: 13.7
Hello Folks,
we experienced an issue with this great plugin. If you double-click an menu item, it disappears and won't return until we refresh the page.
Can you reproduce this behavior?
The only thing a bit uncommon with our setup is that we've included bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
This might be the only unusual thing with our setup.
BR Daniel
Sometimes when I click on the title, it switches to the previous one. First click is normal, the next one "switches" and so on cycle.
Active and open in different tags. Below need to open Library, but opened previous
_sidebar.md
- **Справочник**
- [Шаблоны](/template.md)
- [Список функций](/func.md)
func.md
# Source
## getTracks
## getSaved
# Yandex
## getFile
## other
大神求助,侧边栏被循环展开,无法折叠,
参见项目
https://github.com/amd5/blog/blob/main/index.html
I import scripts into <head>
and use the defer
attribute. As a result, the /pages/
tree doesn’t collapse because there is no .sidebar-nav
at the DOMContentLoaded
moment.
Consider the following directory structure:
docs
├── _sidebar.md
├── index.html
├── init.js
├── pages
│ ├── page-1.md
│ ├── page-2.md
│ └── README.md
└── README.md
_sidebar.md
:
- [Does not toggle!](/pages/)
- [Page 1](/pages/page-1)
- [Page 2](/pages/page-2)
index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Document</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/lib/themes/vue.css"
integrity="sha256-GVgqM6L5FlZZv53JoPI27I3UmnRdOX6BLH987DPeNro="
crossorigin="anonymous"
>
<script
defer
src="init.js"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/lib/docsify.min.js"
integrity="sha256-zTTKqWPEpPgRygl1gorAx8ux6HjMcv+zhnqoPp6XWOU="
crossorigin="anonymous"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/docsify-sidebar-collapse.js"
integrity="sha256-TfNIbrnq1RnOZHFkUZCex03B9ZoDbeskY+UQH5lQ0Kk="
crossorigin="anonymous"
></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
init.js
:
(function (window) {
'use strict';
window.$docsify = {
alias: {
'/.*/_sidebar.md': '/_sidebar.md'
},
loadSidebar: true,
subMaxLevel: 3
};
}(window));
I think it’s better to replace the addEventListener()
call with a hook.
Current the sidebar will collapse by default to display only level 1 title (level a1, level b1).
Does it possible to add a level configuration (1~N) to display level N title?
For example if N is two, then sidebar display like this:
Example _sidebar.md:
- Level a1
- Level a21
- Level a22
- Level a31
- Level a32
- Level b1
- Level b21
- Level b22
- Level b31
- Level b32
Thanks.
When clicking the folder the sidebar is closing / hiding, which is the same behaviour when clicking on a file. When trying to navigate multiple folders, have to keep re-opening the sidebar
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.