Docsify侧边栏多级子目录生成

原创

已于 2023-08-13 17:10:46 修改 · 1.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Docsify

于 2023-08-13 16:57:05 首次发布

本文介绍如何使用Docsify构建网站时自动生成sidebar，并详细列举了子目录结构，包括Java、设计模式、大数据技术栈（如Presto、Spark和Alluxio）及其相关文档。同时，文章提到了各种插件和配置，如代码高亮和导航功能。

自动生成 docsify 的 sidebar 和每个子目录中的 sidebar

Docsify 官网

网站的部署

Github Page: 国内访问太慢了.

子目录

- [Java](java/)
- [设计模式](设计模式/)
- [大数据](大数据/)
  - [presto](大数据/presto/)
    - [代码阅读](大数据/presto/代码阅读/)
      - [服务发现](大数据/presto/代码阅读/discovery.md)
  - [spark](大数据/spark/)
  - [alluxio](大数据/alluxio/)

界面效果

在这里插入图片描述

docsify index.html 模版

<!-- index.html -->

<!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" />
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/themes/vue.css" />

    <!-- 文件夹样式 -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-folder.min.css" />
    <!-- 箭头样式 -->
    <!-- <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css" /> -->
  </head>
  <body>
    <div id="app">