customize sidebar and navbar via markdown file, #6 (#8)

* Refactor: use iife

* Feat: customize sidebar and navbar via markdown file, #6

* Add changelog

Author: QingWei-Li

CHANGELOG.md

@@ -1,9 +1,13 @@
+## 0.5.0
+### Features
+- Custom sidebars and navbars by markdown file
+
 ## 0.4.2
-## Bug fixes
+### Bug fixes
 - Correct catch ajax error
 
 ## 0.4.1
-## Bug fixes
+### Bug fixes
 - catch ajax error
 
 ## 0.4.0

build/build.js

@@ -15,11 +15,14 @@ var build = function (opts) {
 
       console.log(dest)
       bundle.write({
-        format: 'umd',
+        format: 'iife',
         moduleName: opts.moduleName || 'Docsify',
         dest: dest
       })
     })
+    .catch(function (err) {
+      console.error(err)
+    })
 }
 
 build({

docs/README.md

@@ -144,3 +144,60 @@ Custom sidebar. if it'set, the TOC will be disabeld. Bind global variables on th
 <script src="/lib/docsify.js" data-sidebar="sidebar"></script>
 ```
 
+
+#### load-sidebar
+
+Load sidebar markdown file. If it is configured, load  the current directory `_sidebar.md` by default. If the file isn't exist, sidebar will appear TOC.
+
+```html
+<script src="/lib/docsify.js" data-load-sidebar></script>
+```
+
+You can specify a file:
+
+```html
+<script src="/lib/docsify.js" data-load-sidebar="_sidebar.md"></script>
+```
+
+The contents of the file can be:
+
+```markdown
+- [Home](/)
+- [Installation](/installation)
+- Essentials
+  - [Getting Started](/getting-started)
+  - [Dynamic Route Matching](/dynamic-matching)
+  - [Nested Routes](/nested-routes)
+  - [Programmatic Navigation](/navigation)
+  - [Named Routes](/named-routes)
+  - [Named Views](/named-views)
+  - [Redirect and Alias](/redirect-and-alias)
+  - [HTML5 History Mode](/history-mode)
+```
+
+#### load-navbar
+
+Load navbar markdown file. If it is configured, load  the current directory `_navbar.md` by default.
+
+```html
+<script src="/lib/docsify.js" data-load-navbar></script>
+```
+
+You can specify a file:
+
+```html
+<script src="/lib/docsify.js" data-load-navbar="_navbar.md"></script>
+```
+
+The contents of the file can be:
+
+```markdown
+- [en](/)
+- [chinese](/zh-cn)
+```
+
+## FAQ
+
+### Why use `404.html` instead of `index.html`
+
+[issues/7](https://github.com/QingWei-Li/docsify/issues/7)

docs/zh-cn.md

@@ -142,3 +142,63 @@ docsify serve docs
 <script src="/lib/docsify.js" data-sidebar="sidebar"></script>
 ```
 
+#### load-sidebar
+
+读取侧边栏配置文件，如果配置，默认加载当前目录下的 `_sidebar.md`。如果文件不存在，会显示 TOC 作为侧边栏内容。如果你有二级目录，也应该放置一份配置文件。
+
+```html
+<script src="/lib/docsify.js" data-load-sidebar></script>
+```
+
+你可以指定侧边栏文件名
+
+```html
+<script src="/lib/docsify.js" data-load-sidebar="_sidebar.md"></script>
+```
+
+`_sidebar.md` 的内容可以是这样的
+
+```markdown
+- [Home](/)
+- [Installation](/installation)
+- Essentials
+  - [Getting Started](/getting-started)
+  - [Dynamic Route Matching](/dynamic-matching)
+  - [Nested Routes](/nested-routes)
+  - [Programmatic Navigation](/navigation)
+  - [Named Routes](/named-routes)
+  - [Named Views](/named-views)
+  - [Redirect and Alias](/redirect-and-alias)
+  - [HTML5 History Mode](/history-mode)
+```
+
+#### load-navbar
+
+读取导航配置文件，如果配置，默认加载当前目录下的 `_navbar.md`。如果文件不存在，会显示 html 里定义的导航栏。
+
+```html
+<script src="/lib/docsify.js" data-load-navbar></script>
+```
+
+你可以指定导航栏文件名
+
+```html
+<script src="/lib/docsify.js" data-load-navbar="_navbar.md"></script>
+```
+
+`_navbar.md` 的内容可以是这样
+
+```markdown
+- [en](/)
+- [中文](/zh-cn)
+```
+
+## FAQ
+
+### 为什么是 `404.html` 而不用 `index.html`
+
+docsify 想要实现的是用最简单的方式 **动态渲染内容**。
+
+例如我有两个文档分别为 `README.md` 和 `guide.md`，如果我用 `index.html` 作为文件名，`README.md` 可以被正确的渲染因为我们已经规定它为首页文件，但是如果我们访问 `my-domain.com/guide` 想要得到的结果是 `guide.md` 的内容，它将无法工作，因为目录下并不存在一个 `guide.html` 的文件。
+
+但是 GitHub Pages 服务器找不到资源， 就会回退并渲染 `404.html` 文件。😄