iPeng6 / docsify-sidebar-collapse

a docsify plugin, support sidebar catalog expand and collapse
MIT License
176 stars 37 forks source link

使用 sidebar-folder.css 时,目录(folder)被添加文件(file)样式 #35

Open YaKazama opened 2 years ago

YaKazama commented 2 years ago

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

DanielYWoo commented 2 years ago

谢谢@YaKazama的分析,我也遇到同样问题了。按照你的方法patch完了还是不对 https://codesandbox.io/s/musing-star-j4g9t2?file=/sidebar-collapse-patched.js