docsify单文档生成页面侧边栏可折叠

docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接部署。

官网地址：https://docsify.js.org/#/zh-cn/

具体使用方法工具--docsify详解_李宥小哥的博客-CSDN博客

本来呢是用这个东西做一个使用文档， 但是在使用时遇到一个问题，单个markdown文档生成出来了三级目录，要求侧边能够折叠并且有下一级的情况下展示出折叠箭头， 有人推荐使用docsify-sidebar-collapse插件可以实现，引入之后发现侧边栏确实可以折叠了，但是折叠箭头一直显示不出来，研究半天决定自己手写箭头样式，话不多说直接上代码

首先在index.html中设置 

  loadSidebar: true,// 加载侧边栏
  subMaxLevel: 4, //侧边栏显示层数

新建js文件

//插入箭头样式
var nod = document.createElement("style")
str = "@font-face {\
    font-family: 'iconfont'; /* Project id 4084645 */\
    src: url('//at.alicdn.com/t/c/font_4084645_2sy2lx021sv.woff2?t=1684978602354') format('woff2'),\
        url('//at.alicdn.com/t/c/font_4084645_2sy2lx021sv.woff?t=1684978602354') format('woff'),\
        url('//at.alicdn.com/t/c/font_4084645_2sy2lx021sv.ttf?t=1684978602354') format('truetype');\
    }\
\
    .iconfont {\
        font-family: 'iconfont' !important;\
        font-size: 16px;\
        font-style: normal;\
        -webkit-font-smoothing: antialiased;\
        -moz-osx-font-smoothing: grayscale;\
    }\
\
    .icon-xiazhankai:before {\
      content: ' \e635';\
    }\
\
    .icon-youzhankai:before {\
      content: ' \e637';\
    }\
\
    .icon-sousuoxiao:before {\
      content: ' \e8d6';\
    }\
\
    .sidebar .search .input-wrap input{\
      font-family: 'iconfont'; /* Project id 4084645 */\
      width: 200px;\
      border: 1px solid #42b983;\
    }\
\
    .sidebar .sidebar-nav .file a:hover{\
      text-decoration:none;\
      color:#42b983\
    }\
\
    .app-sub-sidebar .file:before{\
      font-family: 'iconfont';\
      content: attr(isunfold);\
    }\
    /* 第一层目录箭头 收起*/\
    .sidebar > .sidebar-nav > ul > .file > .app-sub-sidebar > .file:before{\
      font-family: 'iconfont';\
      content: ' \e637 '';\
      font-size: 18px;\
    }\
    /* 第一层目录箭头 展开*/\
    .sidebar > .sidebar-nav > ul > .file > .app-sub-sidebar > .active:before{\
      font-family: 'iconfont';\
      content: ' \e635 ';\
      font-size: 18px;\
      color: #42b983;\
    }\
"
    nod.type="text/css";  
    if(nod.styleSheet){         //ie下  
    nod.styleSheet.cssText = str;  
    } else {  
    nod.innerHTML = str;       //或者写成 nod.appendChild(document.createTextNode(str))  
    }  
    document.getElementsByTagName("head")[0].appendChild(nod); 

因为看不到侧边栏代码，所以只能通过控制台查看元素通过控制对应css实现功能

箭头是有了，接下来就剩展开与收起时箭头的切换了

//滚动监听箭头样式
window.onscroll = function () {
    var files = document.getElementsByClassName("file")
    var filesLength = files.length

    for (var i = 0;i<filesLength;i++){
      let next = files[i].nextElementSibling
      if(next != null){
        if(next.className == 'app-sub-sidebar'){
          if(files[i].className.indexOf("active") != -1){
            files[i].setAttribute('isunfold','  \ue635 ')
            files[i].style.color="#42b983"
          }else{
            files[i].setAttribute('isunfold','  \ue637 ')
            files[i].style.color="#333333"
          }
        }else{
          
        }
      }
    }
}

因为点击侧边栏也会跳转到对应位置，所以只需要监听滚动事件就可以了，但是还有一个明显的bug，当文档从下往上滚动时，触发不到箭头切换，暂时还没有想到好的解决思路，如果大佬们有其他方法，希望能给小弟推荐一下，感激不尽

最后附上完整代码

document.write("<script language='javascript' src='//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js'></script>");

//滚动监听箭头样式
window.onscroll = function () {
    var files = document.getElementsByClassName("file")
    var filesLength = files.length

    for (var i = 0;i<filesLength;i++){
      let next = files[i].nextElementSibling
      if(next != null){
        if(next.className == 'app-sub-sidebar'){
          if(files[i].className.indexOf("active") != -1){
            files[i].setAttribute('isunfold','  \ue635 ')
            files[i].style.color="#42b983"
          }else{
            files[i].setAttribute('isunfold','  \ue637 ')
            files[i].style.color="#333333"
          }
        }else{
          
        }
      }
    }
}

//插入箭头样式
var nod = document.createElement("style")
str = "@font-face {\
    font-family: 'iconfont'; /* Project id 4084645 */\
    src: url('//at.alicdn.com/t/c/font_4084645_2sy2lx021sv.woff2?t=1684978602354') format('woff2'),\
        url('//at.alicdn.com/t/c/font_4084645_2sy2lx021sv.woff?t=1684978602354') format('woff'),\
        url('//at.alicdn.com/t/c/font_4084645_2sy2lx021sv.ttf?t=1684978602354') format('truetype');\
    }\
\
    .iconfont {\
        font-family: 'iconfont' !important;\
        font-size: 16px;\
        font-style: normal;\
        -webkit-font-smoothing: antialiased;\
        -moz-osx-font-smoothing: grayscale;\
    }\
\
    .icon-xiazhankai:before {\
      content: ' \e635';\
    }\
\
    .icon-youzhankai:before {\
      content: ' \e637';\
    }\
\
    .icon-sousuoxiao:before {\
      content: ' \e8d6';\
    }\
\
    .sidebar .search .input-wrap input{\
      font-family: 'iconfont'; /* Project id 4084645 */\
      width: 200px;\
      border: 1px solid #42b983;\
    }\
\
    .sidebar .sidebar-nav .file a:hover{\
      text-decoration:none;\
      color:#42b983\
    }\
\
    .app-sub-sidebar .file:before{\
      font-family: 'iconfont';\
      content: attr(isunfold);\
    }\
    /* 第一层目录箭头 收起*/\
    .sidebar > .sidebar-nav > ul > .file > .app-sub-sidebar > .file:before{\
      font-family: 'iconfont';\
      content: ' \e637 '';\
      font-size: 18px;\
    }\
    /* 第一层目录箭头 展开*/\
    .sidebar > .sidebar-nav > ul > .file > .app-sub-sidebar > .active:before{\
      font-family: 'iconfont';\
      content: ' \e635 ';\
      font-size: 18px;\
      color: #42b983;\
    }\
"
    nod.type="text/css";  
    if(nod.styleSheet){         //ie下  
    nod.styleSheet.cssText = str;  
    } else {  
    nod.innerHTML = str;       //或者写成 nod.appendChild(document.createTextNode(str))  
    }  
    document.getElementsByTagName("head")[0].appendChild(nod); 

参考链接：https://cpury.com/1408.html

                 工具--docsify详解_李宥小哥的博客-CSDN博客

                  利用js动态创建 <style>_weixin_30375247的博客-CSDN博客