From 7b6a2ac404110b153b5fc2ee60adf19a0270f22c Mon Sep 17 00:00:00 2001 From: "qingwei.li" Date: Sun, 19 Feb 2017 00:10:38 +0800 Subject: [PATCH] fix(render): support html file --- src/core/event/scroll.js | 2 +- src/core/fetch/index.js | 7 ++++++- src/core/render/compiler.js | 8 ++++++-- src/core/render/index.js | 20 ++++++++++++++------ src/core/render/tpl.js | 2 +- src/core/route/index.js | 2 +- src/core/route/util.js | 12 ++++++------ 7 files changed, 35 insertions(+), 18 deletions(-) diff --git a/src/core/event/scroll.js b/src/core/event/scroll.js index 5cfdb1171..6b4eab7f4 100644 --- a/src/core/event/scroll.js +++ b/src/core/event/scroll.js @@ -9,7 +9,6 @@ export function scrollActiveSidebar () { const anchors = dom.findAll('.anchor') const sidebar = dom.find('.sidebar') const wrap = dom.find(sidebar, '.sidebar-nav') - const height = sidebar.clientHeight const nav = {} const lis = dom.findAll(sidebar, 'li') @@ -54,6 +53,7 @@ export function scrollActiveSidebar () { // scroll into view // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297 if (!hoverOver && dom.body.classList.contains('sticky')) { + const height = sidebar.clientHeight const curOffset = 0 const cur = active.offsetTop + active.clientHeight + 40 const isInView = ( diff --git a/src/core/fetch/index.js b/src/core/fetch/index.js index e3f4c0d77..84654490a 100644 --- a/src/core/fetch/index.js +++ b/src/core/fetch/index.js @@ -15,6 +15,9 @@ export function fetchMixin (proto) { last = get(this.$getFile(path), true) + // Current page is html + this.isHTML = /\.html$/g.test(path) + // Load main content last.then(text => { this._renderMain(text) @@ -42,13 +45,15 @@ export function fetchMixin (proto) { proto._fetchCover = function () { const { coverpage } = this.config const root = getRoot(this.route.path) + const path = this.$getFile(root + coverpage) if (this.route.path !== '/' || !coverpage) { this._renderCover() return } - get(this.$getFile(root + coverpage)) + this.coverIsHTML = /\.html$/g.test(path) + get(path) .then(text => this._renderCover(text)) } diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js index 70e899115..d369c1d1e 100644 --- a/src/core/render/compiler.js +++ b/src/core/render/compiler.js @@ -5,7 +5,7 @@ import { genTree } from './gen-tree' import { slugify, clearSlugCache } from './slugify' import { emojify } from './emojify' import { toURL, parse } from '../route/hash' -import { getBasePath, getPath } from '../route/util' +import { getBasePath, isResolvePath, getPath } from '../route/util' import { isFn, merge, cached } from '../util/core' let markdownCompiler = marked @@ -84,9 +84,13 @@ renderer.paragraph = function (text) { return `

${text}

` } renderer.image = function (href, title, text) { - const url = getPath(contentBase, href) + let url = href const titleHTML = title ? ` title="${title}"` : '' + if (!isResolvePath(href)) { + url = getPath(contentBase, href) + } + return `${text}` } diff --git a/src/core/render/index.js b/src/core/render/index.js index 370a5701d..c8df33749 100644 --- a/src/core/render/index.js +++ b/src/core/render/index.js @@ -5,7 +5,7 @@ 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' +import { getBasePath, getPath, isResolvePath } from '../route/util' function executeScript () { const script = dom.findAll('.markdown-section>script') @@ -22,6 +22,7 @@ function executeScript () { function renderMain (html) { if (!html) { // TODO: Custom 404 page + html = 'not found' } this._renderTo('.markdown-section', html) @@ -56,11 +57,13 @@ export function renderMixin (proto) { const active = getAndActive('.sidebar-nav', true, true) subSidebar(active, subMaxLevel) // bind event + this.activeLink = active scrollActiveSidebar() if (autoHeader && active) { const main = dom.getNode('#main') - if (main.children[0].tagName !== 'H1') { + const firstNode = main.children[0] + if (firstNode && firstNode.tagName !== 'H1') { const h1 = dom.create('h1') h1.innerText = active.innerText dom.before(main, h1) @@ -75,7 +78,7 @@ export function renderMixin (proto) { proto._renderMain = function (text) { callHook(this, 'beforeEach', text, result => { - const html = markdown(result) + const html = this.isHTML ? result : markdown(result) callHook(this, 'afterEach', html, text => renderMain.call(this, text)) }) } @@ -88,15 +91,20 @@ export function renderMixin (proto) { } dom.toggleClass(el, 'add', 'show') - let html = cover(text) + let html = this.coverIsHTML ? text : cover(text) const m = html.trim().match('

([^<]*?)

$') if (m) { if (m[2] === 'color') { el.style.background = m[1] + (m[3] || '') } else { + let path = m[1] + dom.toggleClass(el, 'add', 'has-mask') - el.style.backgroundImage = `url(${getPath(getBasePath(this.config.basePath), m[1])})` + if (isResolvePath(m[1])) { + path = getPath(getBasePath(this.config.basePath), m[1]) + } + el.style.backgroundImage = `url(${path})` } html = html.replace(m[0], '') } @@ -145,7 +153,7 @@ export function initRender (vm) { dom.before(dom.body, navEl) if (config.themeColor) { - dom.$.head += tpl.theme(config.themeColor) + dom.$.head.innerHTML += tpl.theme(config.themeColor) // Polyfll cssVars(config.themeColor) } diff --git a/src/core/render/tpl.js b/src/core/render/tpl.js index 0bd5198c7..ce9cabb44 100644 --- a/src/core/render/tpl.js +++ b/src/core/render/tpl.js @@ -10,7 +10,7 @@ export function corner (data) { data = data.replace(/^git\+/, '') return ( - '' + + `` + '