§2024-06-08

I had a docsify project with package.json as

{
  "name": "monitor_replication_set",
  "version": "1.0.0",
  "description": "monitorin mongoDB replication set",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "alexlai@h2Jammy.yushei.net",
  "license": "ISC",
  "dependencies": {
    "docsify-cli": "^4.4.4"
  }
}

And ./docs has

$ tree docs
docs
├── chap_01
├── chap_02
├── chap_03
├── chap_04
├── index.html
└── README.md

And index.html as

<!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, initial-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: ''
    }
  </script>
  <!-- Docsify v4 -->
  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
</body>
</html>

How to modify index.html and make side bar appears with sub direcoties ?