fix(static): file path

src/core/render/compiler.js

@@ -1,6 +1,6 @@
 import marked from 'marked'
 import Prism from 'prismjs'
-import {helper as helperTpl, tree as treeTpl} from './tpl'
+import {helper as helperTpl, tree as treeTpl, cover as coverTpl} from './tpl'
 import {genTree} from './gen-tree'
 import {slugify} from './slugify'
 import {emojify} from './emojify'
@@ -303,19 +303,25 @@ export class Compiler {
       return `<img src="${url}"data-origin="${href}" alt="${text}"${attrs}>`
     }
     origin.list = renderer.list = function (body, ordered, start) {
-      const isTaskList = /<li class="task-list-item">/.test(body.split('class="task-list"')[0])
+      const isTaskList = /<li class="task-list-item">/.test(
+        body.split('class="task-list"')[0]
+      )
       const isStartReq = start && start > 1
       const tag = ordered ? 'ol' : 'ul'
       const tagAttrs = [
-        (isTaskList ? 'class="task-list"' : ''),
-        (isStartReq ? `start="${start}"` : '')
-      ].join(' ').trim()
+        isTaskList ? 'class="task-list"' : '',
+        isStartReq ? `start="${start}"` : ''
+      ]
+        .join(' ')
+        .trim()
 
       return `<${tag} ${tagAttrs}>${body}</${tag}>`
     }
     origin.listitem = renderer.listitem = function (text) {
       const isTaskItem = /^(<input.*type="checkbox"[^>]*>)/.test(text)
-      const html = isTaskItem ? `<li class="task-list-item"><label>${text}</label></li>` : `<li>${text}</li>`
+      const html = isTaskItem ?
+        `<li class="task-list-item"><label>${text}</label></li>` :
+        `<li>${text}</li>`
 
       return html
     }
@@ -375,12 +381,37 @@ export class Compiler {
   /**
    * Compile cover page
    */
-  cover(text) {
-    const cacheToc = this.toc.slice()
-    const html = this.compile(text)
+  cover(text, isHTML = false) {
+    let html = text
+    if (!isHTML) {
+      const cacheToc = this.toc.slice()
+      html = this.compile(text) || ''
+      this.toc = cacheToc.slice()
+    }
 
-    this.toc = cacheToc.slice()
+    const m = html
+      .trim()
+      .match('<p><img.*?data-origin="(.*?)"[^a]+alt="(.*?)">([^<]*?)</p>$')
+    let style = ''
+    let hasMask = false
+    if (m) {
+      if (m[2] === 'color') {
+        style = `background: ${m[1] + (m[3] || '')}`
+      } else {
+        let path = m[1]
+        hasMask = true
+        if (!isAbsolutePath(m[1])) {
+          path = getPath(this.router.getBasePath(), m[1])
+        }
+        style = `background-image: url(${path}); background-size: cover; background-position: center center;`
+      }
+      html = html.replace(m[0], '')
+    }
 
-    return html
+    return coverTpl({
+      style,
+      hasMask,
+      text: html
+    })
   }
 }

src/core/render/index.js

@@ -175,30 +175,10 @@ export function renderMixin(proto) {
     }
     dom.toggleClass(el, 'add', 'show')
 
-    let html = this.coverIsHTML ? text : this.compiler.cover(text)
+    let html = this.compiler.cover(text, this.coverIsHTML)
 
-    const m = html
-      .trim()
-      .match('<p><img.*?data-origin="(.*?)"[^a]+alt="(.*?)">([^<]*?)</p>$')
+    this._renderTo('.cover-placeholder', html, true)
 
-    if (m) {
-      if (m[2] === 'color') {
-        el.style.background = m[1] + (m[3] || '')
-      } else {
-        let path = m[1]
-
-        dom.toggleClass(el, 'add', 'has-mask')
-        if (!isAbsolutePath(m[1])) {
-          path = getPath(this.router.getBasePath(), m[1])
-        }
-        el.style.backgroundImage = `url(${path})`
-        el.style.backgroundSize = 'cover'
-        el.style.backgroundPosition = 'center center'
-      }
-      html = html.replace(m[0], '')
-    }
-
-    this._renderTo('.cover-main', html)
     sticky()
   }
 
@@ -228,8 +208,9 @@ export function initRender(vm) {
     if (config.repo) {
       html += tpl.corner(config.repo)
     }
+
     if (config.coverpage) {
-      html += tpl.cover()
+      html += '<div class=cover-placeholder></div>'
     }
 
     if (config.logo) {

src/core/render/tpl.js

@@ -57,16 +57,19 @@ export function main(config) {
 /**
  * Cover Page
  */
-export function cover() {
+export function cover({style, text, hasMask}) {
   const SL = ', 100%, 85%'
-  const bgc =
-    'linear-gradient(to left bottom, ' +
-    `hsl(${Math.floor(Math.random() * 255) + SL}) 0%,` +
-    `hsl(${Math.floor(Math.random() * 255) + SL}) 100%)`
+  style =
+    style ||
+    'background: linear-gradient(to left bottom, ' +
+      `hsl(${Math.floor(Math.random() * 255) + SL}) 0%,` +
+      `hsl(${Math.floor(Math.random() * 255) + SL}) 100%)`
 
   return (
-    `<section class="cover show" style="background: ${bgc}">` +
-    '<div class="cover-main"><!--cover--></div>' +
+    `<section class="cover show ${
+      hasMask ? ' has-mask' : ''
+    }" style="${style}">` +
+    `<div class="cover-main">${text}</div>` +
     '<div class="mask"></div>' +
     '</section>'
   )
@@ -84,7 +87,9 @@ export function tree(toc, tpl = '<ul class="app-sub-sidebar">{inner}</ul>') {
   }
   let innerHTML = ''
   toc.forEach(node => {
-    innerHTML += `<li><a class="section-link" href="${node.slug}">${node.title}</a></li>`
+    innerHTML += `<li><a class="section-link" href="${node.slug}">${
+      node.title
+    }</a></li>`
     if (node.children) {
       innerHTML += tree(node.children, tpl)
     }

src/core/router/util.js

@@ -46,7 +46,9 @@ export const isAbsolutePath = cached(path => {
 export const getParentPath = cached(path => {
   return /\/$/g.test(path) ?
     path :
-    (path = path.match(/(\S*\/)[^/]+$/)) ? path[1] : ''
+    (path = path.match(/(\S*\/)[^/]+$/)) ?
+      path[1] :
+      ''
 })
 
 export const cleanPath = cached(path => {