Docsify目录折叠功能实现

非原创,我只是善于发现的搬运工,原创作者:https://github.com/Wsine/blog

一直觉得docsify唯一美中不足的就是侧栏不能收起来,于是我在茫茫网页中搜索解决办法,发现官方也没有做出回应,在不断的检索中,偶然发现作者写的一篇文章,提了一下目录折叠,但是没有详细步骤,作为一个网页开发工作者,我看了一下 index.html , 第一感觉还是蒙圈,仔细分析了一下,伪代码如下:

<html>
    <head>
        这部分没啥特殊的
    </head>
    <body>
        <script>
        window.$docsify{
            这部分是主题的配置文件,
            markdown:{
                `markdown渲染部分`
            },
            plugins:[
                `折叠代码`
            ]
        }
        </script>
    </body>
</html>

还有下面引入的 js ,我看了看都是我需要的,我就原封不动的把 index 文件复制下来了

特殊写法

加入了 标题站标搜索 ,还需要重点说明的是 _sidebar.md 文件书写格式:

* 复制index页
   - [test1](pack/test1.md)
* sidebar书写格式
   - [test2](pack/test2.md)

作者的原版

index.html 代码,多数地方我已经标记了含义,下方还有我自己使用的版本。

<!-- index.html -->
<!-- 折叠目录插件作者: https://github.com/Wsine/blog -->
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <title>标题</title>
  <!-- 站标 -->
  <link rel="shortcut icon" href="" type="image/x-icon">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css" />
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css">
</head>
<body>
  
  <div id="app"></div>
  <script>
    const sleep = ms => new Promise(r => setTimeout(r, ms));
    window.$docsify = {
      name: '模板',
      repo: '#',
      loadSidebar: true,
      subMaxLevel: 2,
      auto2top: true,
      search: 'auto', // 默认值
      alias: {
        '/.*/_sidebar.md': '/_sidebar.md'
      },
      search: {
        placeholder: '请输入搜索关键词...'},
      // markdown渲染
      markdown: {
        renderer: {
          code: function(code, lang) {
            if (lang === "flow") {
              (async () => {
                await sleep(500);
                var diagram = flowchart.parse(code);
                diagram.drawSVG('flow');
              })();
              return '<div id="flow"></div>';
            } else if (lang === "sequence") {
              (async () => {
                await sleep(500);
                var diagram = Diagram.parse(code);
                diagram.drawSVG('sequence', {theme: 'simple'});
              })();
              return '<div id="sequence"></div>';
            } else if (lang === "mermaid") {
              return (
                '<div class="mermaid">' + mermaid.render(lang, code) + "</div>"
              );
            } else if (lang === "c++") {
              lang = "cpp";
            }
            return this.origin.code.apply(this, arguments);
          }
        }
      },
      // 折叠目录
      plugins: [
        function(hook, vm) {
          hook.doneEach(function() {
            document.querySelectorAll(".sidebar-nav > ul > li").forEach(
              function(node, index, nodelist) {
                var span = document.createElement("span");
                span.innerHTML = node.firstChild.data;
                span.style.cursor = "pointer";
                span.onclick = function(event) {
                  var ul = event.target.nextElementSibling;
                  if (ul.style.display === "none") {
                    ul.style.display = "block";
                  } else {
                    ul.style.display = "none";
                  }
                };
                node.firstChild.replaceWith(span);
                node.lastChild.style.display = "none";
            });
            var active = document.querySelector(".sidebar-nav li.active");
            if (active) {
              active.parentElement.style.display = "block";
            }
          });
        }
      ]
    }
  </script>
  <!-- docsify -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
  <!-- 语言高亮 -->
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-cmake.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>
  <!-- 流程图 -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.2.0/raphael-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/flowchart/1.12.0/flowchart.min.js"></script>
  <!-- 时序图 -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js"></script>
  <!-- 阿甘图 -->
  <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <script type="text/javascript">mermaid.initialize({ startOnLoad: false });</script>
</body>
</html>

自己使用的版本

<!-- index.html -->
<!-- 折叠目录插件作者: https://github.com/Wsine/blog -->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="UTF-8">
    <title>无垠-学习笔记</title>
    <!-- 站标 -->
    <link rel="shortcut icon" href="https://img.cxywy.com/assets/avatar.png" type="image/x-icon">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
<nav>
    <a href="#/Web/">Web</a>
    <a href="#/基础语法/">基础语法</a>
    <a href="#/底层原理/">底层原理</a>
    <a href="#/技术杂谈/">技术杂谈</a>
    <a href="#/数据分析/">数据分析</a>
    <a href="#/数据存储/">数据存储</a>
    <a href="#/数据采集/">数据采集</a>
    <a href="#/文章精选/">文章精选</a>
</nav>
<div id="app"></div>
<script>
    const sleep = ms => new Promise(r => setTimeout(r, ms));
    window.$docsify = {
        name: '学习笔记',          // 文档标题,会显示在侧边栏顶部。
        loadSidebar: true,        // 侧边栏
        subMaxLevel: 2,           // 自定义侧边栏后默认不会再生成目录,你也可以通过设置生成目录的最大层级开启这个功能。
        auto2top: true,           // 切换页面后是否自动跳转到页面顶部。
        alias: {
            '/Web/.*/_sidebar.md': '/Web/_sidebar.md',
            '/%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95/.*/_sidebar.md': '/基础语法/_sidebar.md',
            '/%E5%BA%95%E5%B1%82%E5%8E%9F%E7%90%86/.*/_sidebar.md': '/底层原理/_sidebar.md',
            '/%E6%8A%80%E6%9C%AF%E6%9D%82%E8%B0%88/.*/_sidebar.md': '/技术杂谈/_sidebar.md',
            '/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/.*/_sidebar.md': '/数据分析/_sidebar.md',
            '/%E6%95%B0%E6%8D%AE%E5%AD%98%E5%82%A8/.*/_sidebar.md': '/数据存储/_sidebar.md',
            '/%E6%95%B0%E6%8D%AE%E9%87%87%E9%9B%86/.*/_sidebar.md': '/数据采集/_sidebar.md',
            '/%e6%96%87%e7%ab%a0%e7%b2%be%e9%80%89/.*/_sidebar.md': '/文章精选/_sidebar.md',
        },
        // 折叠目录
        plugins: [
            function (hook, vm) {
                hook.doneEach(function () {
                    document.querySelectorAll(".sidebar-nav > ul > li").forEach(
                        function (node, index, nodelist) {
                            var span = document.createElement("span");
                            span.innerHTML = node.firstChild.data;
                            span.style.cursor = "pointer";
                            span.onclick = function (event) {
                                var ul = event.target.nextElementSibling;
                                if (ul.style.display === "none") {
                                    ul.style.display = "block";
                                } else {
                                    ul.style.display = "none";
                                }
                            };
                            node.firstChild.replaceWith(span);
                            node.lastChild.style.display = "none";
                        });
                    var active = document.querySelector(".sidebar-nav li.active");
                    if (active) {
                        active.parentElement.style.display = "block";
                    }
                });
            }
        ]
    }
</script>
<!-- docsify -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<!-- 复制到剪贴板 -->
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code"></script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
<!-- 语言高亮 -->
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-python.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-sql.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-c.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-java.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/prismjs@1/components/prism-ini.min.js"></script>


</body>
</html>

版权声明:
作者:hyzsj0106
链接:https://www.cxywy.com/?p=7
来源:程序员无垠
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录