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

* Refactor: use iife * Feat: customize sidebar and navbar via markdown file, #6 * Add changelog
2024-11-30 02:58:37 +08:00 · 2016-11-29 01:07:47 +08:00 · 2016-11-29 01:07:47 +08:00 · 35d3bd1647
commit 35d3bd1647
parent e09b6f218f
16 changed files with 625 additions and 333 deletions
--- a/CHANGELOG.md
+++ b/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
--- a/build/build.js
+++ b/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({
--- a/docs/README.md
+++ b/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)
--- a/docs/zh-cn.md
+++ b/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` 文件。😄
--- a/lib/docsify.js
+++ b/lib/docsify.js
@ -1,28 +1,80 @@
-(function (global, factory) {
-	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
-	typeof define === 'function' && define.amd ? define(factory) :
-	(global.Docsify = factory());
-}(this, (function () { 'use strict';
+var Docsify = (function () {
+'use strict';

-var ajax = function (url, options) {
-  if ( options === void 0 ) options = {};
+/**
+ * Simple ajax
+ * @param  {String} url
+ * @param  {String} [method=get]
+ * @return {Promise}
+ */
+function load (url, method) {
+  if ( method === void 0 ) method = 'get';

  var xhr = new XMLHttpRequest();

-  xhr.open(options.method || 'get', url);
+  xhr.open(method, url);
  xhr.send();

  return {
-    then: function (cb) {
-      xhr.addEventListener('load', cb);
-      return this
-    },
-    catch: function (cb) {
-      xhr.addEventListener('error', cb);
-      return this
+    then: function (success, error) {
+      if ( error === void 0 ) error = function () {};
+
+      xhr.addEventListener('error', error);
+      xhr.addEventListener('load', function (ref) {
+        var target = ref.target;
+
+        target.status >= 400 ? error(target) : success(target.response);
+      });
    }
  }
-};
+}
+
+/**
+ * gen toc tree
+ * @link https://github.com/killercup/grock/blob/5280ae63e16c5739e9233d9009bc235ed7d79a50/styles/solarized/assets/js/behavior.coffee#L54-L81
+ * @param  {Array} toc
+ * @param  {Number} maxLevel
+ * @return {Array}
+ */
+function genTree (toc, maxLevel) {
+  var headlines = [];
+  var last = {};
+
+  toc.forEach(function (headline) {
+    var level = headline.level || 1;
+    var len = level - 1;
+
+    if (level > maxLevel) { return }
+    if (last[len]) {
+      last[len].children = last[len].children || [];
+      last[len].children.push(headline);
+    } else {
+      headlines.push(headline);
+    }
+    last[level] = headline;
+  });
+
+  return headlines
+}
+
+/**
+ * camel to kebab
+ * @link https://github.com/bokuweb/kebab2camel/blob/master/index.js
+ * @param  {String} str
+ * @return {String}
+ */
+function camel2kebab (str) {
+  return str.replace(/([A-Z])/g, function (m) { return '-' + m.toLowerCase(); })
+}
+
+/**
+ * is nil
+ * @param  {Object}  object
+ * @return {Boolean}
+ */
+function isNil (o) {
+  return o === null || o === undefined
+}

 var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};

@ -2119,96 +2171,52 @@ Prism.languages.js = Prism.languages.javascript;
 });

 /**
- * @link from https://github.com/killercup/grock/blob/5280ae63e16c5739e9233d9009bc235ed7d79a50/styles/solarized/assets/js/behavior.coffee#L54-L81
+ * Render github corner
+ * @param  {Object} data
+ * @return {String}
 */
-var tocToTree = function (toc, maxLevel) {
-  var headlines = [];
-  var last = {};
+function corner (data) {
+  if (!data) { return '' }
+  if (!/\/\//.test(data)) { data = 'https://github.com/' + data; }

-  toc.forEach(function (headline) {
-    var level = headline.level || 1;
-    var len = level - 1;
+  return ("\n  <a href=\"" + data + "\" class=\"github-corner\" aria-label=\"View source on Github\">\n    <svg viewBox=\"0 0 250 250\" aria-hidden=\"true\">\n      <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path>\n      <path d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\" fill=\"currentColor\" style=\"transform-origin: 130px 106px;\" class=\"octo-arm\"></path>\n      <path d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\" fill=\"currentColor\" class=\"octo-body\"></path>\n    </svg>\n  </a>")
+}

-    if (level > maxLevel) { return }
-    if (last[len]) {
-      last[len].children = last[len].children || [];
-      last[len].children.push(headline);
-    } else {
-      headlines.push(headline);
-    }
-    last[level] = headline;
-  });
+/**
+ * Render main content
+ * @return {[type]}      [description]
+ */
+function main () {
+  return "<main>\n    <aside class=\"sidebar\"></aside>\n    <section class=\"content\">\n      <article class=\"markdown-section\"></article>\n    </section>\n  </main>"
+}

-  return headlines
-};
-
-var buildHeadlinesTree = function (tree, tpl) {
+/**
+ * Render tree
+ * @param  {Array} tree
+ * @param  {String} tpl
+ * @return {String}
+ */
+function tree (toc, tpl) {
  if ( tpl === void 0 ) tpl = '';

-  if (!tree || !tree.length) { return '' }
+  if (!toc || !toc.length) { return '' }

-  tree.forEach(function (node) {
+  toc.forEach(function (node) {
    tpl += "<li><a class=\"section-link\" href=\"" + (node.slug) + "\">" + (node.title) + "</a></li>";
    if (node.children) {
-      tpl += "<li><ul class=\"children\">" + (buildHeadlinesTree(node.children)) + "</li></ul>";
+      tpl += "<li><ul class=\"children\">" + (tree(node.children)) + "</li></ul>";
    }
  });

  return tpl
-};
-
-var genToc = function (toc, opts) {
-  var tree = Array.isArray(opts.sidebar)
-    ? opts.sidebar
-    : tocToTree(toc, opts['max-level']);
-
-  return buildHeadlinesTree(tree, '<ul>')
-};
-
-var cornerTpl = "\n  <a href=\"{{repo}}\" class=\"github-corner\" aria-label=\"View source on Github\">\n    <svg viewBox=\"0 0 250 250\" aria-hidden=\"true\">\n      <path d=\"M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z\"></path>\n      <path d=\"M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2\" fill=\"currentColor\" style=\"transform-origin: 130px 106px;\" class=\"octo-arm\"></path>\n      <path d=\"M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z\" fill=\"currentColor\" class=\"octo-body\"></path>\n    </svg>\n  </a>\n";
-var toc = [];
-var renderer = new marked.Renderer();
+}

 /**
- * render anchor tag
- * @link https://github.com/chjj/marked#overriding-renderer-methods
+ * Active sidebar when scroll
+ * @link https://buble.surge.sh/
 */
-renderer.heading = function (text, level) {
-  var slug = text.replace(/<(?:.|\n)*?>/gm, '').toLowerCase().replace(/[\s\n\t]+/g, '-');
-
-  toc.push({ level: level, slug: '#' + slug, title: text });
-
-  return ("<h" + level + " id=\"" + slug + "\"><a href=\"#" + slug + "\" class=\"anchor\"></a>" + text + "</h" + level + ">")
-};
-
-// highlight code
-renderer.code = function (code, lang) {
-  if ( lang === void 0 ) lang = '';
-
-  var hl = prism.highlight(code, prism.languages[lang] || prism.languages.markup);
-
-  return ("<pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + hl + "</code></pre>")
-};
-marked.setOptions({ renderer: renderer });
-
-var render = function (content, opts) {
-  if ( opts === void 0 ) opts = {};
-
-  var corner = '';
-
-  if (opts.repo) {
-    var repo = /\/\//.test(opts.repo) ? opts.repo : ('https://github.com/' + opts.repo);
-    corner = cornerTpl.replace(/{{repo}}/g, repo);
-  }
-
-  var section = "<section class=\"content\">\n    <article class=\"markdown-section\">" + (marked(content)) + "</article>\n  </section>";
-  var sidebar = "<aside class=\"sidebar\">" + (genToc(toc, opts)) + "</aside>";
-
-  return (corner + "<main>" + sidebar + section + "</main>")
-};
-
-function scrollActiveSidebar (isCustom) {
-  if (/mobile/i.test(navigator.userAgent) || isCustom) { return }
+function scrollActiveSidebar () {
+  if (/mobile/i.test(navigator.userAgent)) { return }

  var anchors = document.querySelectorAll('.anchor');
  var nav = {};
@ -2257,84 +2265,160 @@ function scrollActiveSidebar (isCustom) {
  scrollIntoView();
 }

-var bindEvent = function (isCustom) {
-  scrollActiveSidebar(isCustom);
-};
+/**
+ * Acitve link
+ */
+function activeLink (dom, activeParent) {
+  var host = document.location.origin + document.location.pathname;

-var DEFAULT_OPTS = {
-  el: '#app',
-  repo: '',
-  'max-level': 6,
-  sidebar: ''
-};
+  dom = typeof dom === 'object' ? dom : document.querySelector(dom);
+  if (!dom) { return

-var script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop();
-
-if (script) {
-  for (var prop in DEFAULT_OPTS) {
-    DEFAULT_OPTS[prop] = script.getAttribute('data-' + prop) || DEFAULT_OPTS[prop];
-  }
-}
-
-var Docsify = function Docsify (opts) {
-  Docsify.installed = true;
-
-  this.opts = Object.assign({}, opts, DEFAULT_OPTS);
-  this.replace = true;
-  this.dom = document.querySelector(this.opts.el);
-  if (!this.dom) {
-    this.dom = document.body;
-    this.replace = false;
-  }
-  if (this.opts.sidebar) { this.opts.sidebar = window[this.opts.sidebar]; }
-
-  this.loc = document.location.pathname;
-  if (/\/$/.test(this.loc)) { this.loc += 'README'; }
-
-  this.load();
-
-  var nav = document.querySelector('nav');
-  if (nav) { this.activeNav(nav); }
-};
-
-Docsify.prototype.load = function load () {
-    var this$1 = this;
-
-  ajax(((this.loc) + ".md"))
-  .then(function (res) {
-    var target = res.target;
-    if (target.status >= 400) {
-      this$1.render('not found');
-    } else {
-      this$1.render(res.target.response);
-      bindEvent(!!this$1.opts.sidebar);
-      if (this$1.opts.sidebar) {
-        this$1.activeNav(document.querySelector('aside.sidebar'), true);
-      }
-    }
-  })
-  .catch(function (_) { return this$1.render('not found'); });
-};
-
-Docsify.prototype.render = function render$1 (content) {
-  this.dom[this.replace ? 'outerHTML' : 'innerHTML'] = render(content, this.opts);
-};
-
-Docsify.prototype.activeNav = function activeNav (elm, activeParentNode) {
-  var host = document.location.origin + document.location.pathname;[].slice.call(elm.querySelectorAll('a')).forEach(function (node) {
+  ; }[].slice.call(dom.querySelectorAll('a')).forEach(function (node) {
    if (node.href === host) {
-      activeParentNode
+      activeParent
        ? node.parentNode.setAttribute('class', 'active')
        : node.setAttribute('class', 'active');
    }
  });
+}
+
+var renderTo = function (dom, content) {
+  dom = typeof dom === 'object' ? dom : document.querySelector(dom);
+  dom.innerHTML = content;
+
+  return dom
+};
+var toc = [];
+var renderer = new marked.Renderer();
+
+/**
+ * render anchor tag
+ * @link https://github.com/chjj/marked#overriding-renderer-methods
+ */
+renderer.heading = function (text, level) {
+  var slug = text.toLowerCase().replace(/<(?:.|\n)*?>/gm, '').replace(/[\s\n\t]+/g, '-');
+
+  toc.push({ level: level, slug: '#' + slug, title: text });
+
+  return ("<h" + level + " id=\"" + slug + "\"><a href=\"#" + slug + "\" class=\"anchor\"></a>" + text + "</h" + level + ">")
+};
+// highlight code
+renderer.code = function (code, lang) {
+  if ( lang === void 0 ) lang = '';
+
+  var hl = prism.highlight(code, prism.languages[lang] || prism.languages.markup);
+
+  return ("<pre data-lang=\"" + lang + "\"><code class=\"lang-" + lang + "\">" + hl + "</code></pre>")
+};
+marked.setOptions({ renderer: renderer });
+
+/**
+ * App
+ */
+function renderApp (dom, replace, opts) {
+  var nav = document.querySelector('nav') || document.createElement('nav');
+
+  dom[replace ? 'outerHTML' : 'innerHTML'] = corner(opts.repo) + main();
+  document.body.insertBefore(nav, document.body.children[0]);
+}
+
+/**
+ * article
+ */
+function renderArticle (content) {
+  if ( content === void 0 ) content = 'not found';
+
+  renderTo('article', marked(content));
+  if (!renderSidebar.rendered) { renderSidebar(null); }
+  if (!renderNavbar.rendered) { renderNavbar(null); }
+}
+
+/**
+ * navbar
+ */
+function renderNavbar (content, OPTIONS) {
+  if ( OPTIONS === void 0 ) OPTIONS = {};
+
+  renderNavbar.rendered = true;
+
+  if (content) { renderTo('nav', marked(content)); }
+  activeLink('nav');
+}
+
+/**
+ * sidebar
+ */
+function renderSidebar (content, OPTIONS) {
+  if ( OPTIONS === void 0 ) OPTIONS = {};
+
+  renderSidebar.rendered = true;
+
+  var isToc = false;
+
+  if (content) {
+    content = marked(content);
+  } else if (OPTIONS.sidebar) {
+    content = tree(OPTIONS.sidebar, '<ul>');
+  } else {
+    content = tree(genTree(toc, OPTIONS.maxLevel), '<ul>');
+    isToc = true;
+  }
+
+  renderTo('aside.sidebar', content);
+  isToc ? scrollActiveSidebar() : activeLink('aside.sidebar', true);
+}
+
+var OPTIONS = {
+  el: '#app',
+  repo: '',
+  maxLevel: 6,
+  sidebar: '',
+  loadSidebar: null,
+  loadNavbar: null
+};
+var script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop();
+
+// load configuration for script attribute
+if (script) {
+  for (var prop in OPTIONS) {
+    var val = script.getAttribute('data-' + camel2kebab(prop));
+    OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : true;
+  }
+  if (OPTIONS.loadSidebar === true) { OPTIONS.loadSidebar = '_sidebar.md'; }
+  if (OPTIONS.loadNavbar === true) { OPTIONS.loadNavbar = '_navbar.md'; }
+  if (OPTIONS.sidebar) { OPTIONS.sidebar = window[OPTIONS.sidebar]; }
+}
+
+var Docsify = function () {
+  var dom = document.querySelector(OPTIONS.el) || document.body;
+  var replace = dom !== document.body;
+  var loc = document.location.pathname;
+
+  if (/\/$/.test(loc)) { loc += 'README'; }
+
+  // Render app
+  renderApp(dom, replace, OPTIONS);
+
+  // Render markdown file
+  load((loc + ".md"))
+    .then(renderArticle, function (_) { return renderArticle(); });
+
+  // Render sidebar
+  if (OPTIONS.loadSidebar) {
+    load(OPTIONS.loadSidebar)
+      .then(function (content) { return renderSidebar(content, OPTIONS); });
+  }
+
+  // Render navbar
+  if (OPTIONS.loadNavbar) {
+    load(OPTIONS.loadNavbar)
+      .then(function (content) { return renderNavbar(content, OPTIONS); });
+  }
 };

-window.addEventListener('load', function () {
-  if (Docsify.installed) { return }
-  new Docsify();
-});
+var index = Docsify();

-return Docsify;
+return index;

-})));
+}());
--- a/lib/docsify.min.js
+++ b/lib/docsify.min.js
--- a/lib/themes/vue.css
+++ b/lib/themes/vue.css
--- a/src/ajax.js
+++ b/src/ajax.js
@ -1,17 +0,0 @@
-export default function (url, options = {}) {
-  const xhr = new XMLHttpRequest()
-
-  xhr.open(options.method || 'get', url)
-  xhr.send()
-
-  return {
-    then: function (cb) {
-      xhr.addEventListener('load', cb)
-      return this
-    },
-    catch: function (cb) {
-      xhr.addEventListener('error', cb)
-      return this
-    }
-  }
-}
--- a/src/bind-event.js
+++ b/src/bind-event.js
@ -1,5 +1,10 @@
-function scrollActiveSidebar (isCustom) {
-  if (/mobile/i.test(navigator.userAgent) || isCustom) return
+
+/**
+ * Active sidebar when scroll
+ * @link https://buble.surge.sh/
+ */
+export function scrollActiveSidebar () {
+  if (/mobile/i.test(navigator.userAgent)) return

  const anchors = document.querySelectorAll('.anchor')
  const nav = {}
@ -48,6 +53,20 @@ function scrollActiveSidebar (isCustom) {
  scrollIntoView()
 }

-export default function (isCustom) {
-  scrollActiveSidebar(isCustom)
+/**
+ * Acitve link
+ */
+export function activeLink (dom, activeParent) {
+  const host = document.location.origin + document.location.pathname
+
+  dom = typeof dom === 'object' ? dom : document.querySelector(dom)
+  if (!dom) return
+
+  ;[].slice.call(dom.querySelectorAll('a')).forEach(node => {
+    if (node.href === host) {
+      activeParent
+        ? node.parentNode.setAttribute('class', 'active')
+        : node.setAttribute('class', 'active')
+    }
+  })
 }
--- a/src/gen-toc.js
+++ b/src/gen-toc.js
@ -1,44 +0,0 @@
-/**
- * @link from https://github.com/killercup/grock/blob/5280ae63e16c5739e9233d9009bc235ed7d79a50/styles/solarized/assets/js/behavior.coffee#L54-L81
- */
-const tocToTree = function (toc, maxLevel) {
-  const headlines = []
-  const last = {}
-
-  toc.forEach(headline => {
-    const level = headline.level || 1
-    const len = level - 1
-
-    if (level > maxLevel) return
-    if (last[len]) {
-      last[len].children = last[len].children || []
-      last[len].children.push(headline)
-    } else {
-      headlines.push(headline)
-    }
-    last[level] = headline
-  })
-
-  return headlines
-}
-
-const buildHeadlinesTree = function (tree, tpl = '') {
-  if (!tree || !tree.length) return ''
-
-  tree.forEach(node => {
-    tpl += `<li><a class="section-link" href="${node.slug}">${node.title}</a></li>`
-    if (node.children) {
-      tpl += `<li><ul class="children">${buildHeadlinesTree(node.children)}</li></ul>`
-    }
-  })
-
-  return tpl
-}
-
-export default function (toc, opts) {
-  var tree = Array.isArray(opts.sidebar)
-    ? opts.sidebar
-    : tocToTree(toc, opts['max-level'])
-
-  return buildHeadlinesTree(tree, '<ul>')
-}
--- a/src/index.js
+++ b/src/index.js
@ -1,81 +1,52 @@
-import ajax from './ajax'
-import render from './render'
-import bindEvent from './bind-event'
+import { load, camel2kebab, isNil } from './util'
+import * as render from './render'

-const DEFAULT_OPTS = {
+const OPTIONS = {
  el: '#app',
  repo: '',
-  'max-level': 6,
-  sidebar: ''
+  maxLevel: 6,
+  sidebar: '',
+  loadSidebar: null,
+  loadNavbar: null
 }
-
 const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()

+// load configuration for script attribute
 if (script) {
-  for (const prop in DEFAULT_OPTS) {
-    DEFAULT_OPTS[prop] = script.getAttribute('data-' + prop) || DEFAULT_OPTS[prop]
+  for (const prop in OPTIONS) {
+    const val = script.getAttribute('data-' + camel2kebab(prop))
+    OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : true
+  }
+  if (OPTIONS.loadSidebar === true) OPTIONS.loadSidebar = '_sidebar.md'
+  if (OPTIONS.loadNavbar === true) OPTIONS.loadNavbar = '_navbar.md'
+  if (OPTIONS.sidebar) OPTIONS.sidebar = window[OPTIONS.sidebar]
+}
+
+const Docsify = function () {
+  const dom = document.querySelector(OPTIONS.el) || document.body
+  const replace = dom !== document.body
+  let loc = document.location.pathname
+
+  if (/\/$/.test(loc)) loc += 'README'
+
+  // Render app
+  render.renderApp(dom, replace, OPTIONS)
+
+  // Render markdown file
+  load(`${loc}.md`)
+    .then(render.renderArticle, _ => render.renderArticle())
+
+  // Render sidebar
+  if (OPTIONS.loadSidebar) {
+    load(OPTIONS.loadSidebar)
+      .then(content => render.renderSidebar(content, OPTIONS))
+  }
+
+  // Render navbar
+  if (OPTIONS.loadNavbar) {
+    load(OPTIONS.loadNavbar)
+      .then(content => render.renderNavbar(content, OPTIONS))
  }
 }

-class Docsify {
-  constructor (opts) {
-    Docsify.installed = true
-
-    this.opts = Object.assign({}, opts, DEFAULT_OPTS)
-    this.replace = true
-    this.dom = document.querySelector(this.opts.el)
-    if (!this.dom) {
-      this.dom = document.body
-      this.replace = false
-    }
-    if (this.opts.sidebar) this.opts.sidebar = window[this.opts.sidebar]
-
-    this.loc = document.location.pathname
-    if (/\/$/.test(this.loc)) this.loc += 'README'
-
-    this.load()
-
-    const nav = document.querySelector('nav')
-    if (nav) this.activeNav(nav)
-  }
-
-  load () {
-    ajax(`${this.loc}.md`)
-    .then(res => {
-      const target = res.target
-      if (target.status >= 400) {
-        this.render('not found')
-      } else {
-        this.render(res.target.response)
-        bindEvent(!!this.opts.sidebar)
-        if (this.opts.sidebar) {
-          this.activeNav(document.querySelector('aside.sidebar'), true)
-        }
-      }
-    })
-    .catch(_ => this.render('not found'))
-  }
-
-  render (content) {
-    this.dom[this.replace ? 'outerHTML' : 'innerHTML'] = render(content, this.opts)
-  }
-
-  activeNav (elm, activeParentNode) {
-    const host = document.location.origin + document.location.pathname
-
-    ;[].slice.call(elm.querySelectorAll('a')).forEach(node => {
-      if (node.href === host) {
-        activeParentNode
-          ? node.parentNode.setAttribute('class', 'active')
-          : node.setAttribute('class', 'active')
-      }
-    })
-  }
-}
-
-window.addEventListener('load', () => {
-  if (Docsify.installed) return
-  new Docsify()
-})
-
-export default Docsify
+export default Docsify()
--- a/src/render.js
+++ b/src/render.js
@ -1,16 +1,15 @@
 import marked from 'marked'
 import Prism from 'prismjs'
-import genToc from './gen-toc'
+import * as tpl from './tpl'
+import { activeLink, scrollActiveSidebar } from './event'
+import { genTree } from './util'

-const cornerTpl = `
-  <a href="{{repo}}" class="github-corner" aria-label="View source on Github">
-    <svg viewBox="0 0 250 250" aria-hidden="true">
-      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
-      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
-      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
-    </svg>
-  </a>
-`
+const renderTo = function (dom, content) {
+  dom = typeof dom === 'object' ? dom : document.querySelector(dom)
+  dom.innerHTML = content
+
+  return dom
+}
 const toc = []
 const renderer = new marked.Renderer()

@ -19,13 +18,12 @@ const renderer = new marked.Renderer()
 * @link https://github.com/chjj/marked#overriding-renderer-methods
 */
 renderer.heading = function (text, level) {
-  const slug = text.replace(/<(?:.|\n)*?>/gm, '').toLowerCase().replace(/[\s\n\t]+/g, '-')
+  const slug = text.toLowerCase().replace(/<(?:.|\n)*?>/gm, '').replace(/[\s\n\t]+/g, '-')

  toc.push({ level, slug: '#' + slug, title: text })

  return `<h${level} id="${slug}"><a href="#${slug}" class="anchor"></a>${text}</h${level}>`
 }
-
 // highlight code
 renderer.code = function (code, lang = '') {
  const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
@ -34,18 +32,52 @@ renderer.code = function (code, lang = '') {
 }
 marked.setOptions({ renderer })

-export default function (content, opts = {}) {
-  let corner = ''
+/**
+ * App
+ */
+export function renderApp (dom, replace, opts) {
+  const nav = document.querySelector('nav') || document.createElement('nav')

-  if (opts.repo) {
-    const repo = /\/\//.test(opts.repo) ? opts.repo : ('https://github.com/' + opts.repo)
-    corner = cornerTpl.replace(/{{repo}}/g, repo)
+  dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(opts.repo) + tpl.main()
+  document.body.insertBefore(nav, document.body.children[0])
+}
+
+/**
+ * article
+ */
+export function renderArticle (content = 'not found') {
+  renderTo('article', marked(content))
+  if (!renderSidebar.rendered) renderSidebar(null)
+  if (!renderNavbar.rendered) renderNavbar(null)
+}
+
+/**
+ * navbar
+ */
+export function renderNavbar (content, OPTIONS = {}) {
+  renderNavbar.rendered = true
+
+  if (content) renderTo('nav', marked(content))
+  activeLink('nav')
+}
+
+/**
+ * sidebar
+ */
+export function renderSidebar (content, OPTIONS = {}) {
+  renderSidebar.rendered = true
+
+  let isToc = false
+
+  if (content) {
+    content = marked(content)
+  } else if (OPTIONS.sidebar) {
+    content = tpl.tree(OPTIONS.sidebar, '<ul>')
+  } else {
+    content = tpl.tree(genTree(toc, OPTIONS.maxLevel), '<ul>')
+    isToc = true
  }

-  const section = `<section class="content">
-    <article class="markdown-section">${marked(content)}</article>
-  </section>`
-  const sidebar = `<aside class="sidebar">${genToc(toc, opts)}</aside>`
-
-  return `${corner}<main>${sidebar}${section}</main>`
+  renderTo('aside.sidebar', content)
+  isToc ? scrollActiveSidebar() : activeLink('aside.sidebar', true)
 }
--- a/src/tpl.js
+++ b/src/tpl.js
@ -0,0 +1,51 @@
+
+/**
+ * Render github corner
+ * @param  {Object} data
+ * @return {String}
+ */
+export function corner (data) {
+  if (!data) return ''
+  if (!/\/\//.test(data)) data = 'https://github.com/' + data
+
+  return `
+  <a href="${data}" class="github-corner" aria-label="View source on Github">
+    <svg viewBox="0 0 250 250" aria-hidden="true">
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+      <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
+      <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
+    </svg>
+  </a>`
+}
+
+/**
+ * Render main content
+ * @return {[type]}      [description]
+ */
+export function main () {
+  return `<main>
+    <aside class="sidebar"></aside>
+    <section class="content">
+      <article class="markdown-section"></article>
+    </section>
+  </main>`
+}
+
+/**
+ * Render tree
+ * @param  {Array} tree
+ * @param  {String} tpl
+ * @return {String}
+ */
+export function tree (toc, tpl = '') {
+  if (!toc || !toc.length) return ''
+
+  toc.forEach(node => {
+    tpl += `<li><a class="section-link" href="${node.slug}">${node.title}</a></li>`
+    if (node.children) {
+      tpl += `<li><ul class="children">${tree(node.children)}</li></ul>`
+    }
+  })
+
+  return tpl
+}
--- a/src/util.js
+++ b/src/util.js
@ -0,0 +1,68 @@
+/**
+ * Simple ajax
+ * @param  {String} url
+ * @param  {String} [method=get]
+ * @return {Promise}
+ */
+export function load (url, method = 'get') {
+  const xhr = new XMLHttpRequest()
+
+  xhr.open(method, url)
+  xhr.send()
+
+  return {
+    then: function (success, error = function () {}) {
+      xhr.addEventListener('error', error)
+      xhr.addEventListener('load', ({ target }) => {
+        target.status >= 400 ? error(target) : success(target.response)
+      })
+    }
+  }
+}
+
+/**
+ * gen toc tree
+ * @link https://github.com/killercup/grock/blob/5280ae63e16c5739e9233d9009bc235ed7d79a50/styles/solarized/assets/js/behavior.coffee#L54-L81
+ * @param  {Array} toc
+ * @param  {Number} maxLevel
+ * @return {Array}
+ */
+export function genTree (toc, maxLevel) {
+  const headlines = []
+  const last = {}
+
+  toc.forEach(headline => {
+    const level = headline.level || 1
+    const len = level - 1
+
+    if (level > maxLevel) return
+    if (last[len]) {
+      last[len].children = last[len].children || []
+      last[len].children.push(headline)
+    } else {
+      headlines.push(headline)
+    }
+    last[level] = headline
+  })
+
+  return headlines
+}
+
+/**
+ * camel to kebab
+ * @link https://github.com/bokuweb/kebab2camel/blob/master/index.js
+ * @param  {String} str
+ * @return {String}
+ */
+export function camel2kebab (str) {
+  return str.replace(/([A-Z])/g, m => '-' + m.toLowerCase())
+}
+
+/**
+ * is nil
+ * @param  {Object}  object
+ * @return {Boolean}
+ */
+export function isNil (o) {
+  return o === null || o === undefined
+}
--- a/themes/buble.css
+++ b/themes/buble.css
@ -105,7 +105,7 @@ main {
  overflow-y: auto;
  position: absolute;
  top: 0;
-  width: 14em;
+  width: 16em;
  z-index: 1;
  padding-top: 40px;
 }
@ -141,7 +141,7 @@ main {
 /* main content */
 .content {
  bottom: 0;
-  left: 14em;
+  left: 16em;
  overflow-y: auto;
  position: absolute;
  right: 0;
@ -152,7 +152,7 @@ main {

@media screen and (max-width: 600px) {
  .sidebar {
-    left: -14em;
+    left: -16em;
  }

  .content {
@ -164,7 +164,7 @@ main {
 .markdown-section {
  position: relative;
  margin: 0 auto;
-  max-width: 64em;
+  max-width: 60em;
  padding: 20px 15px 40px 15px;
 }

--- a/themes/vue.css
+++ b/themes/vue.css
@ -21,6 +21,11 @@ nav {
  text-align: right;
 }

+nav ul, nav li {
+  list-style: none;
+  display: inline-block;
+}
+
 nav a {
  margin: 0 1em;
  padding: 5px 0;
@ -118,10 +123,13 @@ main {
  list-style: none;
 }

+.sidebar li {
+  margin: 12px 15px;
+}
+
 .sidebar ul li a {
  color: #7f8c8d;
  display: block;
-  padding: 6px 15px;
  border-bottom: none;
  text-overflow: ellipsis;
  overflow: hidden;
@ -138,10 +146,6 @@ main {
  font-weight: 500;
 }

-.sidebar ul li ul {
-  padding-left: 20px;
-}
-
 /* main content */
 .content {
  bottom: 0;