Add render sub menu

src/event.js

@@ -16,7 +16,10 @@ export function scrollActiveSidebar () {
     const li = lis[i]
     let href = li.querySelector('a').getAttribute('href')
 
-    if (href !== '/') href = href.match(/#([^#]+)$/g)[0].slice(1)
+    if (href !== '/') {
+      const match = href.match('#([^#]+)$')
+      if (match && match.length) href = match[0].slice(1)
+    }
 
     nav[decodeURIComponent(href)] = li
   }
@@ -61,18 +64,22 @@ export function activeLink (dom, activeParent) {
 
   dom = typeof dom === 'object' ? dom : document.querySelector(dom)
   if (!dom) return
+  let target
 
   ;[].slice.call(dom.querySelectorAll('a')).forEach(node => {
-    if (node.href === host) {
+    if (node.href === host && !target) {
       activeParent
         ? node.parentNode.setAttribute('class', 'active')
         : node.setAttribute('class', 'active')
+      target = node
     } else {
       activeParent
         ? node.parentNode.removeAttribute('class')
         : node.removeAttribute('class')
     }
   })
+
+  return target
 }
 
 /**

src/index.js

@@ -1,11 +1,12 @@
 import { load, camel2kebab, isNil, getRoute } from './util'
-import { activeLink, scrollIntoView } from './event'
+import { scrollIntoView } from './event'
 import * as render from './render'
 
 const OPTIONS = {
   el: '#app',
   repo: '',
   maxLevel: 6,
+  maxSubLevel: 0,
   sidebar: '',
   sidebarToggle: false,
   loadSidebar: null,
@@ -40,7 +41,6 @@ const mainRender = function (cb) {
   const route = OPTIONS.basePath + getRoute()
   if (cacheRoute === route) return cb()
 
-  let wait
   let basePath = cacheRoute = route
 
   if (!/\//.test(basePath)) {
@@ -72,22 +72,16 @@ const mainRender = function (cb) {
     if (OPTIONS.coverpage && page !== OPTIONS.homepage) render.renderCover()
     // render sidebar
     if (OPTIONS.loadSidebar) {
-      if (wait === false) cb()
+      load(basePath + OPTIONS.loadSidebar)
-      wait = false
+        .then(result => {
+          render.renderSidebar(result)
+          cb()
+        })
     } else {
       cb()
     }
   }, _ => render.renderArticle(null))
 
-  // Render sidebar
-  if (OPTIONS.loadSidebar) {
-    load(basePath + OPTIONS.loadSidebar).then(result => {
-      render.renderSidebar(result)
-      if (wait === false) cb()
-      wait = false
-    })
-  }
-
   // Render navbar
   if (OPTIONS.loadNavbar) {
     load(basePath + OPTIONS.loadNavbar).then(render.renderNavbar)
@@ -98,10 +92,7 @@ const Docsify = function () {
   const dom = document.querySelector(OPTIONS.el) || document.body
   const replace = dom !== document.body
   const main = function () {
-    mainRender(_ => {
+    mainRender(_ => scrollIntoView())
-      activeLink('aside.sidebar', true)
-      scrollIntoView()
-    })
   }
 
   // Render app

src/render.js

@@ -78,10 +78,7 @@ export function renderApp (dom, replace) {
  */
 export function renderArticle (content) {
   renderTo('article', content ? marked(content) : 'not found')
-  if (!renderSidebar.rendered) renderSidebar(null, OPTIONS)
+  if (!OPTIONS.sidebar && !OPTIONS.loadSidebar) renderSidebar()
-  if (!renderNavbar.rendered) renderNavbar(null, OPTIONS)
-  renderSidebar.rendered = false
-  renderNavbar.rendered = false
 
   if (content && typeof Vue !== 'undefined' && typeof Vuep !== 'undefined') {
     const vm = new Vue({ el: 'main' }) // eslint-disable-line
@@ -96,7 +93,6 @@ export function renderArticle (content) {
 export function renderNavbar (content) {
   if (CACHE.navbar && CACHE.navbar === content) return
   CACHE.navbar = content
-  renderNavbar.rendered = true
 
   if (content) renderTo('nav', marked(content))
   activeLink('nav')
@@ -106,25 +102,27 @@ export function renderNavbar (content) {
  * sidebar
  */
 export function renderSidebar (content) {
-  let isToc = false
+  let html
 
   if (content) {
-    content = marked(content)
+    html = marked(content)
   } else if (OPTIONS.sidebar) {
-    content = tpl.tree(OPTIONS.sidebar, '<ul>')
+    html = tpl.tree(OPTIONS.sidebar, '<ul>')
   } else {
-    content = tpl.tree(genTree(toc, OPTIONS.maxLevel), '<ul>')
+    html = tpl.tree(genTree(toc, OPTIONS.maxLevel), '<ul>')
-    isToc = true
   }
 
-  renderSidebar.rendered = true
+  renderTo('aside.sidebar', html)
-  if (CACHE.sidebar && CACHE.sidebar === content) return
+  const target = activeLink('aside.sidebar', true)
-  CACHE.sidebar = content
+  if (content) renderSubSidebar(target)
-  renderTo('aside.sidebar', content)
-  if (isToc) {
-    scrollActiveSidebar()
-  }
   toc = []
+
+  scrollActiveSidebar()
+}
+
+export function renderSubSidebar (target) {
+  if (!OPTIONS.maxSubLevel) return
+  target.parentNode.innerHTML += tpl.tree(genTree(toc, OPTIONS.maxSubLevel), '<ul>')
 }
 
 /**