docsify 側邊欄目錄擴展

本文轉載自查看原文 2021-02-02 13:07 1778 其他/ nodejs

使用docsify 生成文檔

docsify init

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</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@4/lib/themes/vue.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: '',
      loadSidebar: true,// 加載側邊欄
      subMaxLevel: 2,
      loadNavbar: true, // 加載導航欄
      search: {
        noData: {
          '/': '沒有結果!'
        },
        paths: 'auto',
        placeholder: {
          '/': '搜索'
        }
      }
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
</body>
</html>

_sidebar.md

* SDK API

    * [登錄功能](user/)
    * [獲取用戶信息](user/getuserinfo)

* 其他接口

文檔左側目錄沒有折疊

官方文檔中也沒介紹，但是找到一個開源的

git地址 https://github.com/iPeng6/docsify-sidebar-collapse

修改index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</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@4/lib/themes/vue.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css" />
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-folder.min.css" />
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: '',
      loadSidebar: true,// 加載側邊欄
      subMaxLevel: 2,
      loadNavbar: true, // 加載導航欄
      search: {
        noData: {
          '/': '沒有結果!'
        },
        paths: 'auto',
        placeholder: {
          '/': '搜索'
        }
      }
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
</body>
</html>

可以使用sidebarDisplayLevel設置默認折疊的層級

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</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@4/lib/themes/vue.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css" />
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-folder.min.css" />
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: '',
      loadSidebar: true,// 加載側邊欄
      subMaxLevel: 2,
      loadNavbar: true, // 加載導航欄
      sidebarDisplayLevel: 1,
      search: {
        noData: {
          '/': '沒有結果!'
        },
        paths: 'auto',
        placeholder: {
          '/': '搜索'
        }
      }
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Notion ---- 側邊欄目錄插件 Flutter Drawer 側邊欄、以及側邊欄內容布局 jQuery Sidebar 側邊欄 ionic 側邊欄實例博客園自定義界面樣式（側邊欄、進度條、回到頂部、目錄） vscode左邊側邊欄字體的大小 WordPress后台添加側邊欄菜單 VuePress 側邊欄幾種配置 ElementUI 側邊欄伸縮布局 sublime同步側邊欄與窗體的顏色