ipeng6 / docsify-sidebar-collapse Goto Github PK

View Code? Open in Web Editor NEW

171.0 2.0 35.0 1.42 MB

a docsify plugin, support sidebar catalog expand and collapse

License: MIT License

JavaScript 66.47% CSS 33.53%

docsify docsify-sidebar-collapse sidebar

docsify-sidebar-collapse's People

Contributors

Stargazers

Watchers

docsify-sidebar-collapse's Issues

* [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标题都是直接罗列出来，并且是不可折叠，我应该在哪里修改参数

个别页面下可以打开，但控制台会提示如下错误

感谢大神提供的非常棒的插件，就是最近用的时候发现，在有些页面下，会控制台提示如下错误，该如何定位呢

Menu Items dissapear on double click

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

Feature request: add configuration of sidebar display level

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:

Level a1
- Level a21
- Level a22
Level b1
- Level b21
- Level b22

Example _sidebar.md:

- Level a1
  - Level a21
  - Level a22
    - Level a31
    - Level a32
- Level b1
  - Level b21
  - Level b22
    - Level b31
    - Level b32

Thanks.

每篇文章的第一个标题有时会不显示

如图所示，侧边栏的目录有时候会不显示第一个标题，同时还会显示出它所有的子标题，请问这是为什么啊

Doesn't do anything when used with the latest docsify

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.

sidebar not aligned between file and folder classes

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](/)

未成功生效

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)

只有第一一级目录下的第一个二级目录可以折叠打开，其余均无法点击

duplicate sidebar icons at level 3

See https://codesandbox.io/s/heuristic-stallman-56o0wr?file=/index.html
open the sidebar, click item 3 and expand, you will see duplicated icons

路由切换折叠的还会被展开

导航栏会消失

inex.html 有如下片段,

<nav>
    <a href="#/">首页</a>
    <a href="#/docs/zh-cn/">中文</a>
    <a href="#/docs/en/">EN</a>
</nav>

添加js后

导航会消失

addLevelClass failed when first loading docsify without a sidecar

Steps to reproduce

Open http://ctripcorp.github.io/apollo/
Check the console and you will see the error message

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)

Click Get Started button in the page
The sidecar cannot expand or collapse

Root cause

document.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

 function addLevelClass() { 

 function find(root, level) { 

 root.childNodes && 

 root.childNodes.forEach((child) => { 

 if (child.classList && child.classList.contains('folder')) { 

 child.classList.add(`level-${level}`) 

 if ( 

 window.$docsify && 

 window.$docsify.sidebarDisplayLevel && 

 typeof window.$docsify.sidebarDisplayLevel === 'number' && 

 level <= window.$docsify.sidebarDisplayLevel 

 ) { 

 child.classList.add('open') 

 } 

 if (child && child.childNodes.length > 1) { 

 find(child.childNodes[1], level + 1) 

 } 

 } 

 }) 

 } 

 find(document.querySelector('.sidebar-nav > ul'), 1) 

 }

Allow config option for default to be open or closed

It would be great if we could default items on the sidebar to be closed, rather than all expanded.

Trees don’t collapse when using deferred scripts

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.

Is it possible to add a property?

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
}

dist import

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?

Clicking on the heading should close the group again even if it's the only one open

Essentially the title. If you click on an already opened heading clicking it again should close it.

Mobile - Clicking folders closes the sidebar

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

XRecorder_Edited_25082022_091358.2.mp4

折叠按钮不显示

默认应该是会有一个 > 显示的，但是我这边不显示这个按钮，虽然直接点也能展开就是了

浏览器第一次加载页面，sidebar 无法展开目录，需要刷新一下网页才可以

代码库在这里：https://github.com/byzer-org/byzer-doc

Sidebar not appearing on GitHub Pages

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!

Clicking space between arrow and text leads to collapsing higher-level menu

Steps to reproduce

Open the second level menu (in our case it's 'Devops')
Click space between arrow and 'Devops'
Observe that 'Documentation' menu is collapsed

Expected behaviour: Only current level menu (in our case it's 'Devops' menu) should be collapsed.

使用 sidebar-folder.css 时，目录（folder）被添加文件（file）样式

问题：当目录为空时，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 聚合侧边栏时，会丢失第一个层级（文档的一级标题），其他正常显示。

在手机模式下，侧栏无法被打开。

当我安装这个插件之后，PC端没有问题，但在手机端，再无法打开侧栏了，以至于我只能看首页。

移动设备无法保持侧栏打开状态

https://ares-x.com/wiki

移动设备上点击侧栏的任何标题后都会恢复到阅读模式，需要重新打开侧栏选择下级内容

device: iphone 6s plus
ios version: 13.7

Parents in the hierarchy that aren't links don't work

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)

打开文件名带%20的文件侧栏会立刻收缩

#11 (comment)

其实是这个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)

样式/行为更改

希望侧边栏的折叠行为能和 Gitbook 的差不多，球球了）

大神求助,侧边栏被循环展开,无法折叠,

大神求助,侧边栏被循环展开,无法折叠,
参见项目
https://github.com/amd5/blog/blob/main/index.html

sidebar reloads cause the focus of the bottom link to be lost

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.

侧边栏可以加一个toggle的图标吗？

想加一个展开，收缩的图标，请问怎么实现呢？太难了啊

Clicking chevrons in sub-category collapses everything

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

奇怪，为什么目录要-和*同时用才能折叠？

- [噜噜噜](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)

类似这样的目录在打开的时候才显示折叠

Bug with click on header

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

	function addLevelClass() {
	function find(root, level) {
	root.childNodes &&
	root.childNodes.forEach((child) => {
	if (child.classList && child.classList.contains('folder')) {
	child.classList.add(`level-${level}`)

	if (
	window.$docsify &&
	window.$docsify.sidebarDisplayLevel &&
	typeof window.$docsify.sidebarDisplayLevel === 'number' &&
	level <= window.$docsify.sidebarDisplayLevel
	) {
	child.classList.add('open')
	}

	if (child && child.childNodes.length > 1) {
	find(child.childNodes[1], level + 1)
	}
	}
	})
	}
	find(document.querySelector('.sidebar-nav > ul'), 1)
	}

ipeng6 / docsify-sidebar-collapse Goto Github PK

docsify-sidebar-collapse's People

Contributors

Stargazers

Watchers

Forkers

docsify-sidebar-collapse's Issues

Steps to reproduce

Root cause

Steps to reproduce

Recommend Projects

Recommend Topics

Recommend Org