From e2b7b976cf5f36933bd946461d8f100f22962dba Mon Sep 17 00:00:00 2001
From: "qingwei.li" <cinwell.li@gmail.com>
Date: Sat, 18 Feb 2017 19:35:14 +0800
Subject: [PATCH] refactor(core): fix route path

---
 src/core/event/index.js        |   8 ++
 src/core/event/scroll.js       |   4 +-
 src/core/fetch/ajax.js         |   4 +-
 src/core/fetch/index.js        |  24 ++--
 src/core/index.js              |  12 +-
 src/core/init/index.js         |   4 +-
 src/core/render/compiler.js    |  34 +++--
 src/core/render/index.js       |  39 +++++-
 src/core/render/progressbar.js |   6 +-
 src/core/render/tpl.js         |   2 +-
 src/core/route/hash.js         |  13 +-
 src/core/route/index.js        |  16 +--
 src/core/route/util.js         |  12 +-
 src/index.js                   | 145 --------------------
 src/render.js                  | 237 ---------------------------------
 src/themes/vue.css             |   9 ++
 16 files changed, 125 insertions(+), 444 deletions(-)
 delete mode 100644 src/index.js
 delete mode 100644 src/render.js

diff --git a/src/core/event/index.js b/src/core/event/index.js
index 1181c9ba5..6c469a592 100644
--- a/src/core/event/index.js
+++ b/src/core/event/index.js
@@ -1,6 +1,14 @@
 import { isMobile } from '../util/env'
 import { body, on } from '../util/dom'
 import * as sidebar from './sidebar'
+import { scrollIntoView } from './scroll'
+
+export function eventMixin (proto) {
+  proto.$resetEvents = function () {
+    scrollIntoView(this.route.query.id)
+    sidebar.getAndActive('nav')
+  }
+}
 
 export function initEvent (vm) {
   // Bind toggle button
diff --git a/src/core/event/scroll.js b/src/core/event/scroll.js
index 89b9b82c8..5cfdb1171 100644
--- a/src/core/event/scroll.js
+++ b/src/core/event/scroll.js
@@ -1,5 +1,6 @@
 import { isMobile } from '../util/env'
 import * as dom from '../util/dom'
+import { parse } from '../route/hash'
 
 export function scrollActiveSidebar () {
   if (isMobile) return
@@ -21,8 +22,7 @@ export function scrollActiveSidebar () {
     let href = a.getAttribute('href')
 
     if (href !== '/') {
-      const match = href.match('#([^#]+)$')
-      if (match && match.length) href = match[0].slice(1)
+      href = parse(href).query.id
     }
 
     nav[decodeURIComponent(href)] = li
diff --git a/src/core/fetch/ajax.js b/src/core/fetch/ajax.js
index 09d43905a..503889742 100644
--- a/src/core/fetch/ajax.js
+++ b/src/core/fetch/ajax.js
@@ -28,7 +28,9 @@ export function get (url, hasBar = false) {
   return {
     then: function (success, error = noop) {
       if (hasBar) {
-        const id = setInterval(_ => progressbar({}), 500)
+        const id = setInterval(_ => progressbar({
+          step: Math.floor(Math.random() * 5 + 1)
+        }), 500)
 
         on('progress', progressbar)
         on('loadend', evt => {
diff --git a/src/core/fetch/index.js b/src/core/fetch/index.js
index 25b74387f..e3f4c0d77 100644
--- a/src/core/fetch/index.js
+++ b/src/core/fetch/index.js
@@ -2,13 +2,10 @@ import { get } from './ajax'
 import { callHook } from '../init/lifecycle'
 import { getRoot } from '../route/util'
 import { noop } from '../util/core'
-import { scrollIntoView } from '../event/scroll'
-import { getAndActive } from '../event/sidebar'
 
-export function fetchMixin (Docsify) {
+export function fetchMixin (proto) {
   let last
-
-  Docsify.prototype._fetch = function (cb = noop) {
+  proto._fetch = function (cb = noop) {
     const { path } = this.route
     const { loadNavbar, loadSidebar } = this.config
     const root = getRoot(path)
@@ -42,7 +39,7 @@ export function fetchMixin (Docsify) {
       )
   }
 
-  Docsify.prototype._fetchCover = function () {
+  proto._fetchCover = function () {
     const { coverpage } = this.config
     const root = getRoot(this.route.path)
 
@@ -54,13 +51,16 @@ export function fetchMixin (Docsify) {
     get(this.$getFile(root + coverpage))
       .then(text => this._renderCover(text))
   }
+
+  proto.$fetch = function () {
+    this._fetchCover()
+    this._fetch(result => {
+      this.$resetEvents()
+      callHook(this, 'doneEach')
+    })
+  }
 }
 
 export function initFetch (vm) {
-  vm._fetchCover(vm)
-  vm._fetch(result => {
-    scrollIntoView(vm.route.query.id)
-    getAndActive('nav')
-    callHook(vm, 'doneEach')
-  })
+  vm.$fetch()
 }
diff --git a/src/core/index.js b/src/core/index.js
index f5b8b4b69..3a8b6be99 100644
--- a/src/core/index.js
+++ b/src/core/index.js
@@ -2,16 +2,20 @@ import { initMixin } from './init'
 import { routeMixin } from './route'
 import { renderMixin } from './render'
 import { fetchMixin } from './fetch'
+import { eventMixin } from './event'
 import initGlobalAPI from './global-api'
 
 function Docsify () {
   this._init()
 }
 
-initMixin(Docsify)
-routeMixin(Docsify)
-renderMixin(Docsify)
-fetchMixin(Docsify)
+const proto = Docsify.prototype
+
+initMixin(proto)
+routeMixin(proto)
+renderMixin(proto)
+fetchMixin(proto)
+eventMixin(proto)
 
 /**
  * Global API
diff --git a/src/core/init/index.js b/src/core/init/index.js
index 826e6efb3..064704fa7 100644
--- a/src/core/init/index.js
+++ b/src/core/init/index.js
@@ -6,8 +6,8 @@ import { initEvent } from '../event'
 import { initFetch } from '../fetch'
 import { isFn } from '../util/core'
 
-export function initMixin (Docsify) {
-  Docsify.prototype._init = function () {
+export function initMixin (proto) {
+  proto._init = function () {
     const vm = this
     vm.config = config || {}
 
diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
index 06c046c49..c4abe6a12 100644
--- a/src/core/render/compiler.js
+++ b/src/core/render/compiler.js
@@ -4,12 +4,15 @@ import { helper as helperTpl, tree as treeTpl } from './tpl'
 import { genTree } from './gen-tree'
 import { slugify, clearSlugCache } from './slugify'
 import { emojify } from './emojify'
-import { toURL } from '../route/hash'
-import { isFn, merge, cached, noop } from '../util/core'
+import { toURL, parse } from '../route/hash'
+import { getBasePath, getPath } from '../route/util'
+import { isFn, merge, cached } from '../util/core'
 
 let markdownCompiler = marked
 let contentBase = ''
+let currentPath = ''
 let renderer = new marked.Renderer()
+const TOC = {}
 let toc = []
 
 /**
@@ -30,7 +33,8 @@ export const markdown = cached(text => {
 markdown.renderer = renderer
 
 markdown.init = function (config = {}, base = window.location.pathname) {
-  contentBase = base
+  contentBase = getBasePath(base)
+  currentPath = parse().path
 
   if (isFn(config)) {
     markdownCompiler = config(marked, renderer)
@@ -40,13 +44,17 @@ markdown.init = function (config = {}, base = window.location.pathname) {
   }
 }
 
+markdown.update = function () {
+  currentPath = parse().path
+}
+
 /**
  * render anchor tag
  * @link https://github.com/chjj/marked#overriding-renderer-methods
  */
 renderer.heading = function (text, level) {
   const slug = slugify(text)
-  const url = toURL(contentBase, { id: slug })
+  const url = toURL(currentPath, { id: slug })
 
   toc.push({ level, slug: url, title: text })
 
@@ -60,8 +68,7 @@ renderer.code = function (code, lang = '') {
 }
 renderer.link = function (href, title, text) {
   if (!/:|(\/{2})/.test(href)) {
-    // TODO
-    href = `#/${href}`.replace(/\/+/g, '/')
+    href = toURL(href)
   }
   return `<a href="${href}" title="${title || ''}">${text}</a>`
 }
@@ -74,12 +81,10 @@ renderer.paragraph = function (text) {
   return `<p>${text}</p>`
 }
 renderer.image = function (href, title, text) {
-  // TODO
-  // get base path
-  // const url = /:|(\/{2})/.test(href) ? href : ($docsify.basePath + href).replace(/\/+/g, '/')
-  // const titleHTML = title ? ` title="${title}"` : ''
+  const url = getPath(contentBase, href)
+  const titleHTML = title ? ` title="${title}"` : ''
 
-  // return `<img src="${url}" alt="${text}"${titleHTML} />`
+  return `<img src="${url}" data-origin="${href}" alt="${text}"${titleHTML}>`
 }
 
 /**
@@ -105,8 +110,11 @@ export function sidebar (text, level) {
 export function subSidebar (el, level) {
   if (el) {
     toc[0] && toc[0].level === 1 && toc.shift()
-    const tree = genTree(toc, level)
-    el.parentNode.innerHTML += treeTpl(tree, '<ul>')
+    const tree = genTree(TOC[currentPath] || toc, level)
+    el.parentNode.innerHTML += treeTpl(tree, '<ul class="app-sub-sidebar">')
+  }
+  if (toc.length) {
+    TOC[currentPath] = toc.slice()
   }
   toc = []
 }
diff --git a/src/core/render/index.js b/src/core/render/index.js
index 53cc62dad..5fcaf1d4f 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -1,10 +1,21 @@
 import * as dom from '../util/dom'
 import { getAndActive, sticky } from '../event/sidebar'
-import { scrollActiveSidebar } from '../event/scroll'
+import { scrollActiveSidebar, scroll2Top } from '../event/scroll'
 import cssVars from '../util/polyfill/css-vars'
 import * as tpl from './tpl'
 import { markdown, sidebar, subSidebar, cover } from './compiler'
 import { callHook } from '../init/lifecycle'
+import { getBasePath, getPath } from '../route/util'
+
+function executeScript () {
+  const script = dom.findAll('.markdown-section>script')
+      .filter(s => !/template/.test(s.type))[0]
+  if (!script) return false
+  const code = script.innerText.trim()
+  if (!code) return false
+
+  window.__EXECUTE_RESULT__ = new Function('return ' + code)()
+}
 
 function renderMain (html) {
   if (!html) {
@@ -14,11 +25,21 @@ function renderMain (html) {
   this._renderTo('.markdown-section', html)
   // Render sidebar with the TOC
   !this.config.loadSidebar && this._renderSidebar()
-}
+  // execute script
+  this.config.executeScript && executeScript()
+
+  if (!this.config.executeScript
+      && typeof window.Vue !== 'undefined'
+      && !executeScript()) {
+    window.__EXECUTE_RESULT__ = new window.Vue().$mount('#main')
+  }
 
-export function renderMixin (Docsify) {
-  const proto = Docsify.prototype
+  if (this.config.auto2top) {
+    setTimeout(() => scroll2Top(this.config.auto2top), 0)
+  }
+}
 
+export function renderMixin (proto) {
   proto._renderTo = function (el, content, replace) {
     const node = dom.getNode(el)
     if (node) node[replace ? 'outerHTML' : 'innerHTML'] = content
@@ -54,14 +75,14 @@ export function renderMixin (Docsify) {
     dom.toggleClass(el, 'add', 'show')
 
     let html = cover(text)
-    const m = html.trim().match('<p><img[^s]+src="(.*?)"[^a]+alt="(.*?)">([^<]*?)</p>$')
+    const m = html.trim().match('<p><img.*?data-origin="(.*?)"[^a]+alt="(.*?)">([^<]*?)</p>$')
 
     if (m) {
       if (m[2] === 'color') {
         el.style.background = m[1] + (m[3] || '')
       } else {
         dom.toggleClass(el, 'add', 'has-mask')
-        el.style.backgroundImage = `url(${m[1]})`
+        el.style.backgroundImage = `url(${getPath(getBasePath(this.config.basePath), m[1])})`
       }
       html = html.replace(m[0], '')
     }
@@ -69,13 +90,17 @@ export function renderMixin (Docsify) {
     this._renderTo('.cover-main', html)
     sticky()
   }
+
+  proto._updateRender = function () {
+    markdown.update()
+  }
 }
 
 export function initRender (vm) {
   const config = vm.config
 
   // Init markdown compiler
-  markdown.init(vm.config.markdown)
+  markdown.init(config.markdown, config.basePath)
 
   const id = config.el || '#app'
   const navEl = dom.find('nav') || dom.create('nav')
diff --git a/src/core/render/progressbar.js b/src/core/render/progressbar.js
index c8347e621..420fd6d03 100644
--- a/src/core/render/progressbar.js
+++ b/src/core/render/progressbar.js
@@ -1,5 +1,4 @@
 import * as dom from '../util/dom'
-import { isPrimitive } from '../util/core'
 
 let barEl
 let timeId
@@ -22,11 +21,8 @@ export default function ({ loaded, total, step }) {
 
   !barEl && init()
 
-  if (!isPrimitive(step)) {
-    step = Math.floor(Math.random() * 5 + 1)
-  }
   if (step) {
-    num = parseInt(barEl.style.width, 10) + step
+    num = parseInt(barEl.style.width || 0, 10) + step
     num = num > 80 ? 80 : num
   } else {
     num = Math.floor(loaded / total * 100)
diff --git a/src/core/render/tpl.js b/src/core/render/tpl.js
index cdf870d65..0bd5198c7 100644
--- a/src/core/render/tpl.js
+++ b/src/core/render/tpl.js
@@ -38,7 +38,7 @@ export function main (config) {
 
   return (isMobile ? `${aside}<main>` : `<main>${aside}`) +
       '<section class="content">' +
-        '<article class="markdown-section"></article>' +
+        '<article class="markdown-section" id="main"></article>' +
       '</section>' +
     '</main>'
 }
diff --git a/src/core/route/hash.js b/src/core/route/hash.js
index 7f0129df3..0ca788009 100644
--- a/src/core/route/hash.js
+++ b/src/core/route/hash.js
@@ -1,4 +1,4 @@
-import { merge } from '../util/core'
+import { merge, cached } from '../util/core'
 import { parseQuery, stringifyQuery } from './util'
 
 function replaceHash (path) {
@@ -8,6 +8,11 @@ function replaceHash (path) {
   )
 }
 
+const replaceSlug = cached(path => {
+  return path
+    .replace('#', '?id=')
+    .replace(/\?(\w+)=/g, (_, slug) => slug === 'id' ? '?id=' : `&${slug}=`)
+})
 /**
  * Normalize the current url
  *
@@ -18,9 +23,7 @@ function replaceHash (path) {
 export function normalize () {
   let path = getHash()
 
-  path = path
-    .replace('#', '?id=')
-    .replace(/\?(\w+)=/g, (_, slug) => slug === 'id' ? '?id=' : `&${slug}=`)
+  path = replaceSlug(path)
 
   if (path.charAt(0) === '/') return replaceHash(path)
   replaceHash('/' + path)
@@ -62,7 +65,7 @@ export function parse (path = window.location.href) {
  * @param  {object} qs   query params
  */
 export function toURL (path, params) {
-  const route = parse(path)
+  const route = parse(replaceSlug(path))
 
   route.query = merge({}, route.query, params)
   path = route.path + stringifyQuery(route.query)
diff --git a/src/core/route/index.js b/src/core/route/index.js
index ad29c5747..7e6606d05 100644
--- a/src/core/route/index.js
+++ b/src/core/route/index.js
@@ -1,5 +1,5 @@
 import { normalize, parse } from './hash'
-import { getBasePath, cleanPath } from './util'
+import { getBasePath, getPath } from './util'
 import { on } from '../util/dom'
 
 function getAlias (path, alias) {
@@ -15,16 +15,16 @@ function getFileName (path) {
       : `${path}.md`
 }
 
-export function routeMixin (Docsify) {
-  Docsify.prototype.route = {}
-  Docsify.prototype.$getFile = function (path) {
+export function routeMixin (proto) {
+  proto.route = {}
+  proto.$getFile = function (path) {
     const { config } = this
     const base = getBasePath(config.basePath)
 
     path = getAlias(path, config.alias)
     path = getFileName(path)
     path = path === '/README.md' ? ('/' + config.homepage || path) : path
-    path = cleanPath(base + path)
+    path = getPath(base, path)
 
     return path
   }
@@ -39,14 +39,14 @@ export function initRoute (vm) {
   on('hashchange', _ => {
     normalize()
     vm.route = parse()
+    vm._updateRender()
 
     if (lastRoute.path === vm.route.path) {
-      // TODO: goto xxx
+      vm.$resetEvents()
       return
     }
 
-    vm._fetchCover()
-    vm._fetch()
+    vm.$fetch()
     lastRoute = vm.route
   })
 }
diff --git a/src/core/route/util.js b/src/core/route/util.js
index 635273b32..f49afde47 100644
--- a/src/core/route/util.js
+++ b/src/core/route/util.js
@@ -3,7 +3,7 @@ import { cached } from '../util/core'
 const decode = decodeURIComponent
 const encode = encodeURIComponent
 
-export const parseQuery = cached(query => {
+export function parseQuery (query) {
   const res = {}
 
   query = query.trim().replace(/^(\?|#|&)/, '')
@@ -19,7 +19,7 @@ export const parseQuery = cached(query => {
     res[parts[0]] = decode(parts[1])
   })
   return res
-})
+}
 
 export function stringifyQuery (obj) {
   const qs = []
@@ -37,6 +37,14 @@ export const getBasePath = cached(base => {
     : cleanPath(window.location.pathname + '/' + base)
 })
 
+export function getPath (...args) {
+  const path = args.find(path => /:|(\/{2})/.test(path))
+
+  if (path) return path
+
+  return cleanPath(args.join('/'))
+}
+
 export const getRoot = cached(path => {
   return /\/$/g.test(path) ? path : path.match(/(\S*\/)[^\/]+$/)[1]
 })
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 49dac575c..000000000
--- a/src/index.js
+++ /dev/null
@@ -1,145 +0,0 @@
-import * as utils from './util'
-import { scrollIntoView, activeLink } from './event'
-import * as render from './render'
-import Hook from './hook'
-
-const OPTIONS = utils.merge({
-  el: '#app',
-  repo: '',
-  maxLevel: 6,
-  subMaxLevel: 0,
-  loadSidebar: null,
-  loadNavbar: null,
-  homepage: 'README.md',
-  coverpage: '',
-  basePath: '',
-  auto2top: false,
-  name: '',
-  themeColor: '',
-  nameLink: window.location.pathname,
-  ga: ''
-}, window.$docsify)
-const script = document.currentScript || [].slice.call(document.getElementsByTagName('script')).pop()
-
-// load configuration for script attribute
-if (script) {
-  for (const prop in OPTIONS) {
-    const val = script.getAttribute('data-' + utils.camel2kebab(prop))
-    OPTIONS[prop] = utils.isNil(val) ? OPTIONS[prop] : (val || true)
-  }
-  if (OPTIONS.loadSidebar === true) OPTIONS.loadSidebar = '_sidebar.md'
-  if (OPTIONS.loadNavbar === true) OPTIONS.loadNavbar = '_navbar.md'
-  if (OPTIONS.coverpage === true) OPTIONS.coverpage = '_coverpage.md'
-  if (OPTIONS.repo === true) OPTIONS.repo = ''
-  if (OPTIONS.name === true) OPTIONS.name = ''
-}
-
-const hook = new Hook()
-
-// utils
-window.$docsify = OPTIONS
-window.Docsify = {
-  installed: true,
-  utils: utils.merge({}, utils),
-  hook
-}
-
-// load options
-render.init()
-
-let cacheRoute = null
-let cacheXhr = null
-
-const getAlias = function (route) {
-  if (OPTIONS.alias[route]) {
-    return getAlias(OPTIONS.alias[route])
-  } else {
-    return route
-  }
-}
-
-const mainRender = function (cb) {
-  let page
-  let route = utils.getRoute()
-  if (cacheRoute === route) return cb()
-
-  let basePath = cacheRoute = OPTIONS.basePath + route
-
-  if (!/\//.test(basePath)) {
-    basePath = ''
-  } else if (basePath && !/\/$/.test(basePath)) {
-    basePath = basePath.match(/(\S*\/)[^\/]+$/)[1]
-  }
-
-  // replace route
-  if (OPTIONS.alias && OPTIONS.alias['/' + route]) {
-    route = getAlias('/' + route)
-  } else {
-    route = (OPTIONS.basePath + route).replace(/\/+/, '/')
-  }
-
-  if (!route) {
-    page = OPTIONS.homepage || 'README.md'
-  } else if (/\.md$/.test(route)) {
-    page = route
-  } else if (/\/$/.test(route)) {
-    page = `${route}README.md`
-  } else {
-    page = `${route}.md`
-  }
-
-  // Render Cover page
-  if (OPTIONS.coverpage && page === OPTIONS.homepage) {
-    utils.load(OPTIONS.coverpage).then(render.renderCover)
-  }
-
-  cacheXhr && cacheXhr.abort && cacheXhr.abort()
-  // Render markdown file
-  cacheXhr = utils.load(page, 'GET', render.renderLoading)
-  cacheXhr.then(result => {
-    render.renderArticle(result)
-    // clear cover
-    if (OPTIONS.coverpage && page !== OPTIONS.homepage) render.renderCover()
-    // render sidebar
-    if (OPTIONS.loadSidebar) {
-      const renderSidebar = result => { render.renderSidebar(result); cb() }
-
-      utils.load(basePath + OPTIONS.loadSidebar).then(renderSidebar,
-        _ => utils.load(OPTIONS.loadSidebar).then(renderSidebar))
-    } else {
-      cb()
-    }
-  }, _ => render.renderArticle(null))
-
-  // Render navbar
-  if (OPTIONS.loadNavbar) {
-    utils.load(basePath + OPTIONS.loadNavbar).then(render.renderNavbar,
-      _ => utils.load(OPTIONS.loadNavbar).then(render.renderNavbar))
-  }
-}
-
-const Docsify = function () {
-  setTimeout(_ => {
-    ;[].concat(OPTIONS.plugins).forEach(fn => typeof fn === 'function' && fn(hook))
-    window.Docsify.hook.emit('init')
-
-    const dom = document.querySelector(OPTIONS.el) || document.body
-    const replace = dom !== document.body
-    const main = function () {
-      mainRender(_ => {
-        scrollIntoView()
-        activeLink('nav')
-        window.Docsify.hook.emit('doneEach')
-      })
-    }
-
-    // Render app
-    render.renderApp(dom, replace)
-    main()
-    if (!/^#\//.test(window.location.hash)) window.location.hash = '#/'
-    window.addEventListener('hashchange', main)
-    window.Docsify.hook.emit('ready')
-  }, 0)
-}
-
-export default Docsify()
diff --git a/src/render.js b/src/render.js
deleted file mode 100644
index 412508875..000000000
--- a/src/render.js
+++ /dev/null
@@ -1,237 +0,0 @@
-import marked from 'marked'
-import Prism from 'prismjs'
-import * as tpl from './tpl'
-import * as event from './event'
-import * as polyfill from './polyfill'
-import { genTree, getRoute, isMobile, slugify, merge, emojify } from './util'
-
-let markdown = marked
-let toc = []
-const CACHE = {}
-const originTitle = document.title
-
-const renderTo = function (dom, content) {
-  dom = typeof dom === 'object' ? dom : document.querySelector(dom)
-  dom.innerHTML = content
-  slugify.clear()
-
-  return dom
-}
-
-/**
- * init render
- */
-export function init () {
-  const renderer = new marked.Renderer()
-  /**
-   * render anchor tag
-   * @link https://github.com/chjj/marked#overriding-renderer-methods
-   */
-  renderer.heading = function (text, level) {
-    const slug = slugify(text)
-    let route = ''
-
-    route = `#/${getRoute()}`
-    toc.push({ level, slug: `${route}#${encodeURIComponent(slug)}`, title: text })
-
-    return `<h${level} id="${slug}"><a href="${route}#${slug}" data-id="${slug}" class="anchor"><span>${text}</span></a></h${level}>`
-  }
-  // highlight code
-  renderer.code = function (code, lang = '') {
-    const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
-
-    return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
-  }
-  renderer.link = function (href, title, text) {
-    if (!/:|(\/{2})/.test(href)) {
-      href = `#/${href}`.replace(/\/+/g, '/')
-    }
-    return `<a href="${href}" title="${title || ''}">${text}</a>`
-  }
-  renderer.paragraph = function (text) {
-    if (/^!&gt;/.test(text)) {
-      return tpl.helper('tip', text)
-    } else if (/^\?&gt;/.test(text)) {
-      return tpl.helper('warn', text)
-    }
-    return `<p>${text}</p>`
-  }
-  renderer.image = function (href, title, text) {
-    const url = /:|(\/{2})/.test(href) ? href : ($docsify.basePath + href).replace(/\/+/g, '/')
-    const titleHTML = title ? ` title="${title}"` : ''
-
-    return `<img src="${url}" alt="${text}"${titleHTML} />`
-  }
-
-  if (typeof $docsify.markdown === 'function') {
-    markdown = $docsify.markdown.call(this, markdown, renderer)
-  } else {
-    if ($docsify.markdown && $docsify.markdown.renderer) {
-      $docsify.markdown.renderer = merge(renderer, $docsify.markdown.renderer)
-    }
-    markdown.setOptions(merge({ renderer }, $docsify.markdown))
-  }
-
-  const md = markdown
-
-  markdown = text => emojify(md(text))
-
-  window.Docsify.utils.marked = text => {
-    const result = markdown(text)
-    toc = []
-    return result
-  }
-}
-
-/**
- * App
- */
-export function renderApp (dom, replace) {
-  const nav = document.querySelector('nav') || document.createElement('nav')
-  const body = document.body
-  const head = document.head
-
-  if (!$docsify.repo) nav.classList.add('no-badge')
-
-  dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner($docsify.repo) +
-    ($docsify.coverpage ? tpl.cover() : '') +
-    tpl.main()
-  body.insertBefore(nav, body.children[0])
-
-  // theme color
-  if ($docsify.themeColor) {
-    head.innerHTML += tpl.theme($docsify.themeColor)
-    polyfill.cssVars()
-  }
-
-  // render name
-  if ($docsify.name) {
-    const aside = document.querySelector('.sidebar')
-    aside.innerHTML = `<h1><a href="${$docsify.nameLink}">${$docsify.name}</a></h1>` + aside.innerHTML
-  }
-
-  // bind toggle
-  event.bindToggle('button.sidebar-toggle')
-  // bind sticky effect
-  if ($docsify.coverpage) {
-    !isMobile() && window.addEventListener('scroll', event.sticky)
-  } else {
-    body.classList.add('sticky')
-  }
-}
-
-/**
- * article
- */
-export function renderArticle (content) {
-  const hook = window.Docsify.hook
-  const renderFn = function (data) {
-    renderTo('article', data)
-    if (!$docsify.loadSidebar) renderSidebar()
-
-    if (data && typeof Vue !== 'undefined') {
-      CACHE.vm && CACHE.vm.$destroy()
-
-      const script = [].slice.call(
-        document.body.querySelectorAll('article>script'))
-          .filter(script => !/template/.test(script.type)
-        )[0]
-      const code = script ? script.innerText.trim() : null
-
-      script && script.remove()
-      CACHE.vm = code
-        ? new Function(`return ${code}`)()
-        : new Vue({ el: 'main' }) // eslint-disable-line
-      CACHE.vm && CACHE.vm.$nextTick(_ => event.scrollActiveSidebar())
-    }
-    if ($docsify.auto2top) setTimeout(() => event.scroll2Top($docsify.auto2top), 0)
-  }
-
-  hook.emit('before', content, result => {
-    const html = result ? markdown(result) : ''
-
-    hook.emit('after', html, result => renderFn(result || 'not found'))
-  })
-}
-
-/**
- * navbar
- */
-export function renderNavbar (content) {
-  if (CACHE.navbar && CACHE.navbar === content) return
-  CACHE.navbar = content
-
-  if (content) renderTo('nav', markdown(content))
-  event.activeLink('nav')
-}
-
-/**
- * sidebar
- */
-export function renderSidebar (content) {
-  let html
-
-  if (content) {
-    html = markdown(content)
-    // find url tag
-    html = html.match(/<ul[^>]*>([\s\S]+)<\/ul>/g)[0]
-  } else {
-    html = tpl.tree(genTree(toc, $docsify.maxLevel), '<ul>')
-  }
-
-  renderTo('.sidebar-nav', html)
-
-  if (toc[0] && toc[0].level === 1) {
-    document.title = `${toc[0].title}${originTitle ? ' - ' + originTitle : ''}`
-  }
-
-  const target = event.activeLink('.sidebar-nav', true)
-  if (target) renderSubSidebar(target)
-
-  toc = []
-  event.scrollActiveSidebar()
-}
-
-export function renderSubSidebar (target) {
-  if (!$docsify.subMaxLevel) return
-  toc[0] && toc[0].level === 1 && toc.shift()
-  target.parentNode.innerHTML += tpl.tree(genTree(toc, $docsify.subMaxLevel), '<ul>')
-}
-
-/**
- * Cover Page
- */
-export function renderCover (content) {
-  renderCover.dom = renderCover.dom || document.querySelector('section.cover')
-  if (!content) {
-    renderCover.dom.classList.remove('show')
-    return
-  }
-  renderCover.dom.classList.add('show')
-  if (renderCover.rendered) return event.sticky()
-
-  // render cover
-  const cacheToc = toc.slice()
-  let html = markdown(content)
-  const match = html.trim().match('<p><img[^s]+src="(.*?)"[^a]+alt="(.*?)">([^<]*?)</p>$')
-
-  toc = cacheToc.slice()
-
-  // render background
-  if (match) {
-    const coverEl = document.querySelector('section.cover')
-
-    if (match[2] === 'color') {
-      coverEl.style.background = match[1] + (match[3] || '')
-    } else {
-      coverEl.classList.add('has-mask')
-      coverEl.style.backgroundImage = `url(${match[1]})`
-    }
-    html = html.replace(match[0], '')
-  }
-
-  renderTo('.cover-main', html)
-  renderCover.rendered = true
-
-  event.sticky()
-}
diff --git a/src/themes/vue.css b/src/themes/vue.css
index 70ed86c3a..4c3d03f76 100644
--- a/src/themes/vue.css
+++ b/src/themes/vue.css
@@ -46,6 +46,15 @@ body {
   }
 }
 
+.app-sub-sidebar {
+  .section-link {
+    &::before {
+      content: '-';
+      padding-right: 4px;
+    }
+  }
+}
+
 /* markdown content found on pages */
 .markdown-section h1,
 .markdown-section h2,