refactor(core): fix route path

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 = []
 }

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')
+  }
+
+  if (this.config.auto2top) {
+    setTimeout(() => scroll2Top(this.config.auto2top), 0)
+  }
 }
 
-export function renderMixin (Docsify) {
-  const proto = Docsify.prototype
-
+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')

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)

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>'
 }