-> v0.4.0

* feat: custom sidebar, #4

* fix dev html

* fix doc

* fix doc

docs/README.md

@@ -121,3 +121,26 @@ Root element.
 <script src="//unpkg.com/docsify" data-el="#app"></script>
 ```
 
+#### sidebar
+
+Custom sidebar. if it'set, the TOC will be disabeld. Bind global variables on the `data-sidebar`.
+
+![image](https://cloud.githubusercontent.com/assets/7565692/20647425/de5ab1c2-b4ce-11e6-863a-135868f2f9b4.png)
+
+```html
+<script>
+  window.sidebar = [
+    { slug: '/', title: 'Home' },
+    {
+      slug: '/pageA',
+      title: 'page A',
+      children: [
+        { slug: '/pageA/childrenB', title: 'children B' }
+      ]
+    },
+    { slug: '/PageC', title: 'Page C' }
+  ]
+</script>
+<script src="/lib/docsify.js" data-sidebar="sidebar"></script>
+```
+

docs/zh-cn.md

@@ -75,7 +75,7 @@ docsify serve docs
 <link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css">
 ```
 
-### 压缩版
+压缩版
 
 ```html
 <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
@@ -119,4 +119,26 @@ docsify serve docs
 <script src="//unpkg.com/docsify" data-el="#app"></script>
 ```
 
+#### sidebar
+
+设置后 TOC 功能将不可用，适合导航较多的文档，`data-sidebar` 传入全局变量名。
+
+![image](https://cloud.githubusercontent.com/assets/7565692/20647425/de5ab1c2-b4ce-11e6-863a-135868f2f9b4.png)
+
+```html
+<script>
+  window.sidebar = [
+    { slug: '/', title: 'Home' },
+    {
+      slug: '/pageA',
+      title: 'page A',
+      children: [
+        { slug: '/pageA/childrenB', title: 'children B' }
+      ]
+    },
+    { slug: '/PageC', title: 'Page C' }
+  ]
+</script>
+<script src="/lib/docsify.js" data-sidebar="sidebar"></script>
+```
 

lib/docsify.js

@@ -2141,7 +2141,7 @@ var buildHeadlinesTree = function (tree, tpl) {
   if (!tree || !tree.length) { return '' }
 
   tree.forEach(function (node) {
-    tpl += "<li><a class=\"section-link\" href=\"#" + (node.slug) + "\">" + (node.title) + "</a></li>";
+    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>";
     }
@@ -2150,8 +2150,11 @@ var buildHeadlinesTree = function (tree, tpl) {
   return tpl
 };
 
-var genToc = function (toc, maxLevel) {
-  var tree = tocToTree(toc, maxLevel);
+var genToc = function (toc, opts) {
+  var tree = Array.isArray(opts.sidebar)
+    ? opts.sidebar
+    : tocToTree(toc, opts['max-level']);
+
   return buildHeadlinesTree(tree, '<ul>')
 };
 
@@ -2164,15 +2167,17 @@ var renderer = new marked.Renderer();
  * @link https://github.com/chjj/marked#overriding-renderer-methods
  */
 renderer.heading = function (text, level) {
-  var slug = text.toLowerCase().replace(/[\s\n\t]+/g, '-');
+  var slug = text.replace(/<(?:.|\n)*?>/gm, '').toLowerCase().replace(/[\s\n\t]+/g, '-');
 
-  toc.push({ level: level, slug: slug, title: text });
+  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>")
@@ -2190,13 +2195,13 @@ var render = function (content, opts) {
   }
 
   var section = "<section class=\"content\">\n    <article class=\"markdown-section\">" + (marked(content)) + "</article>\n  </section>";
-  var sidebar = "<aside class=\"sidebar\">" + (genToc(toc, opts['max-level'])) + "</aside>";
+  var sidebar = "<aside class=\"sidebar\">" + (genToc(toc, opts)) + "</aside>";
 
   return (corner + "<main>" + sidebar + section + "</main>")
 };
 
-function scrollActiveSidebar () {
-  if (/mobile/i.test(navigator.userAgent)) { return }
+function scrollActiveSidebar (isCustom) {
+  if (/mobile/i.test(navigator.userAgent) || isCustom) { return }
 
   var anchors = document.querySelectorAll('.anchor');
   var nav = {};
@@ -2245,14 +2250,15 @@ function scrollActiveSidebar () {
   scrollIntoView();
 }
 
-var bindEvent = function () {
-  scrollActiveSidebar();
+var bindEvent = function (isCustom) {
+  scrollActiveSidebar(isCustom);
 };
 
 var DEFAULT_OPTS = {
   el: '#app',
   repo: '',
-  'max-level': 6
+  'max-level': 6,
+  sidebar: ''
 };
 
 var script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop();
@@ -2267,15 +2273,17 @@ 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');
@@ -2291,7 +2299,10 @@ Docsify.prototype.load = function load () {
       this$1.render('not found');
     } else {
       this$1.render(res.target.response);
-      bindEvent();
+      bindEvent(!!this$1.opts.sidebar);
+      if (this$1.opts.sidebar) {
+        this$1.activeNav(document.querySelector('aside.sidebar'), true);
+      }
     }
   });
 };
@@ -2300,10 +2311,12 @@ Docsify.prototype.render = function render$1 (content) {
   this.dom[this.replace ? 'outerHTML' : 'innerHTML'] = render(content, this.opts);
 };
 
-Docsify.prototype.activeNav = function activeNav (elm) {
+Docsify.prototype.activeNav = function activeNav (elm, activeParentNode) {
   var host = document.location.origin + document.location.pathname;[].slice.call(elm.querySelectorAll('a')).forEach(function (node) {
     if (node.href === host) {
-      node.setAttribute('class', 'active');
+      activeParentNode
+        ? node.parentNode.setAttribute('class', 'active')
+        : node.setAttribute('class', 'active');
     }
   });
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docsify",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A magical documentation generator.",
   "main": "lib/docsify.js",
   "files": [

src/bind-event.js

@@ -1,5 +1,5 @@
-function scrollActiveSidebar () {
-  if (/mobile/i.test(navigator.userAgent)) return
+function scrollActiveSidebar (isCustom) {
+  if (/mobile/i.test(navigator.userAgent) || isCustom) return
 
   const anchors = document.querySelectorAll('.anchor')
   const nav = {}
@@ -48,6 +48,6 @@ function scrollActiveSidebar () {
   scrollIntoView()
 }
 
-export default function () {
-  scrollActiveSidebar()
+export default function (isCustom) {
+  scrollActiveSidebar(isCustom)
 }

src/gen-toc.js

@@ -25,8 +25,8 @@ const tocToTree = function (toc, maxLevel) {
 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>`
+  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>`
     }
@@ -35,7 +35,10 @@ const buildHeadlinesTree = function (tree, tpl = '') {
   return tpl
 }
 
-export default function (toc, maxLevel) {
-  var tree = tocToTree(toc, maxLevel)
+export default function (toc, opts) {
+  var tree = Array.isArray(opts.sidebar)
+    ? opts.sidebar
+    : tocToTree(toc, opts['max-level'])
+
   return buildHeadlinesTree(tree, '<ul>')
 }

src/index.js

@@ -5,7 +5,8 @@ import bindEvent from './bind-event'
 const DEFAULT_OPTS = {
   el: '#app',
   repo: '',
-  'max-level': 6
+  'max-level': 6,
+  sidebar: ''
 }
 
 const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()
@@ -21,15 +22,17 @@ class Docsify {
     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')
@@ -43,7 +46,10 @@ class Docsify {
         this.render('not found')
       } else {
         this.render(res.target.response)
-        bindEvent()
+        bindEvent(!!this.opts.sidebar)
+        if (this.opts.sidebar) {
+          this.activeNav(document.querySelector('aside.sidebar'), true)
+        }
       }
     })
   }
@@ -52,12 +58,14 @@ class Docsify {
     this.dom[this.replace ? 'outerHTML' : 'innerHTML'] = render(content, this.opts)
   }
 
-  activeNav (elm) {
+  activeNav (elm, activeParentNode) {
     const host = document.location.origin + document.location.pathname
 
     ;[].slice.call(elm.querySelectorAll('a')).forEach(node => {
       if (node.href === host) {
-        node.setAttribute('class', 'active')
+        activeParentNode
+          ? node.parentNode.setAttribute('class', 'active')
+          : node.setAttribute('class', 'active')
       }
     })
   }

src/render.js

@@ -19,15 +19,15 @@ const renderer = new marked.Renderer()
  * @link https://github.com/chjj/marked#overriding-renderer-methods
  */
 renderer.heading = function (text, level) {
-  const slug = text.toLowerCase().replace(/[\s\n\t]+/g, '-')
+  const slug = text.replace(/<(?:.|\n)*?>/gm, '').toLowerCase().replace(/[\s\n\t]+/g, '-')
 
-  toc.push({ level, slug, title: text })
+  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) {
+renderer.code = function (code, lang = '') {
   const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
 
   return `<pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
@@ -45,7 +45,7 @@ export default function (content, opts = {}) {
   const section = `<section class="content">
     <article class="markdown-section">${marked(content)}</article>
   </section>`
-  const sidebar = `<aside class="sidebar">${genToc(toc, opts['max-level'])}</aside>`
+  const sidebar = `<aside class="sidebar">${genToc(toc, opts)}</aside>`
 
   return `${corner}<main>${sidebar}${section}</main>`
 }