fix(render): init event in ssr
This commit is contained in:
qingwei.li
cinwell.li
parent
3444884905
commit
eba1c987a8
6 changed files with 68 additions and 12 deletions
36
app.js
36
app.js
|
|
@ -1,12 +1,46 @@
|
|||
var serveStatic = require('serve-static')
|
||||
var http = require('http')
|
||||
var fs = require('fs')
|
||||
var Renderer = require('./packages/docsify-server-renderer/build.js')
|
||||
|
||||
var renderer = new Renderer({
|
||||
template: `
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>docsify</title>
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" href="/themes/vue.css" title="vue">
|
||||
</head>
|
||||
<body>
|
||||
<!--inject-app-->
|
||||
<!--inject-config-->
|
||||
<script src="/lib/docsify.js"></script>
|
||||
</body>
|
||||
</html>`,
|
||||
config: {
|
||||
name: 'docsify',
|
||||
repo: 'qingwei-li/docsify',
|
||||
basePath: '/docs/',
|
||||
loadNavbar: true,
|
||||
loadSidebar: true,
|
||||
subMaxLevel: 3,
|
||||
auto2top: true
|
||||
},
|
||||
path: './'
|
||||
})
|
||||
|
||||
http.createServer(function (req, res) {
|
||||
serveStatic('.')(req, res, function () {
|
||||
res.writeHead(200, { 'Content-Type': 'text/html' })
|
||||
// TEST SSR
|
||||
// const html = renderer.renderToString(req.url)
|
||||
// res.end(html)
|
||||
|
||||
res.writeHead(404, { 'Content-Type': 'text/html' })
|
||||
res.end(fs.readFileSync('dev.html'))
|
||||
})
|
||||
}).listen(3000, '0.0.0.0')
|
||||
|
||||
console.log(`\nListening at http://0.0.0.0:3000\n`)
|
||||
|
||||
|
|
|
|||
1
dev.html
1
dev.html
|
|
@ -32,6 +32,7 @@
|
|||
subMaxLevel: 2,
|
||||
mergeNavbar: true,
|
||||
formatUpdated: '{MM}/{DD} {HH}:{mm}',
|
||||
routerMode: 'history',
|
||||
plugins: [
|
||||
function(hook) {
|
||||
hook.beforeEach(function (html) {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export default class Renderer {
|
|||
config,
|
||||
cache
|
||||
}) {
|
||||
this.html = this.template = template
|
||||
this.html = template
|
||||
this.path = cwd(path)
|
||||
this.config = Object.assign(config, {
|
||||
routerMode: 'history'
|
||||
|
|
@ -43,10 +43,12 @@ export default class Renderer {
|
|||
this.router.getCurrentPath = () => this.url
|
||||
this._renderHtml('inject-config', `<script>window.$docsify = ${JSON.stringify(config)}</script>`)
|
||||
this._renderHtml('inject-app', mainTpl(config))
|
||||
|
||||
this.template = this.html
|
||||
}
|
||||
|
||||
renderToString (url) {
|
||||
this.url = url
|
||||
this.url = url = this.router.parse(url).path
|
||||
// TODO render cover page
|
||||
const { loadSidebar, loadNavbar } = this.config
|
||||
|
||||
|
|
@ -65,19 +67,26 @@ export default class Renderer {
|
|||
this._renderHtml('navbar', this._render(navbarFile, 'navbar'))
|
||||
}
|
||||
|
||||
return this.html
|
||||
const html = this.html
|
||||
this.html = this.template
|
||||
|
||||
return html
|
||||
}
|
||||
|
||||
_renderHtml (match, content) {
|
||||
this.html = this.html.replace(new RegExp(`<!--${match}-->`, 'g'), content)
|
||||
return this.html = this.html.replace(new RegExp(`<!--${match}-->`, 'g'), content)
|
||||
}
|
||||
|
||||
_render (path, type) {
|
||||
let html = this._loadFile(path)
|
||||
const { subMaxLevel, maxLevel } = this.config
|
||||
|
||||
switch (type) {
|
||||
case 'sidebar':
|
||||
html = this.compiler.sidebar(html)
|
||||
html = this.compiler.sidebar(html, maxLevel)
|
||||
+ `<script>window.__SUB_SIDEBAR__ = ${JSON.stringify(
|
||||
this.compiler.subSidebar(html, subMaxLevel)
|
||||
)}</script>`
|
||||
break
|
||||
case 'cover':
|
||||
html = this.compiler.cover(html)
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { get } from './ajax'
|
|||
import { callHook } from '../init/lifecycle'
|
||||
import { getParentPath } from '../router/util'
|
||||
import { noop } from '../util/core'
|
||||
import { getAndActive } from '../event/sidebar'
|
||||
|
||||
function loadNested (path, file, next, vm, first) {
|
||||
path = first ? path : path.replace(/\/$/, '')
|
||||
|
|
@ -70,7 +71,15 @@ export function fetchMixin (proto) {
|
|||
}
|
||||
|
||||
export function initFetch (vm) {
|
||||
const { loadSidebar } = vm.config
|
||||
|
||||
// server-client renderer
|
||||
if (vm.rendered) {
|
||||
const activeEl = getAndActive(vm.router, '.sidebar-nav', true, true)
|
||||
if (loadSidebar && activeEl) {
|
||||
activeEl.parentNode.innerHTML += window.__SUB_SIDEBAR__
|
||||
}
|
||||
vm._bindEventOnRendered(activeEl)
|
||||
vm._fetchCover()
|
||||
vm.$resetEvents()
|
||||
callHook(vm, 'doneEach')
|
||||
|
|
|
|||
|
|
@ -54,10 +54,6 @@ function renderMain (html) {
|
|||
} else {
|
||||
this.config.executeScript && executeScript()
|
||||
}
|
||||
|
||||
if (this.config.auto2top) {
|
||||
scroll2Top(this.config.auto2top)
|
||||
}
|
||||
}
|
||||
|
||||
function renderNameLink (vm) {
|
||||
|
|
@ -91,7 +87,12 @@ export function renderMixin (proto) {
|
|||
activeEl.parentNode.innerHTML += this.compiler.subSidebar(subMaxLevel)
|
||||
}
|
||||
// bind event
|
||||
this.activeLink = activeEl
|
||||
this._bindEventOnRendered()
|
||||
}
|
||||
|
||||
proto._bindEventOnRendered = function (activeEl) {
|
||||
const { autoHeader, auto2top } = this.config
|
||||
|
||||
scrollActiveSidebar(this.router)
|
||||
|
||||
if (autoHeader && activeEl) {
|
||||
|
|
@ -103,6 +104,8 @@ export function renderMixin (proto) {
|
|||
dom.before(main, h1)
|
||||
}
|
||||
}
|
||||
|
||||
auto2top && scroll2Top(auto2top)
|
||||
}
|
||||
|
||||
proto._renderNav = function (text) {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export class HTML5History extends History {
|
|||
}
|
||||
|
||||
getCurrentPath () {
|
||||
const base = this.config.base
|
||||
const base = this.config.basePath
|
||||
let path = window.location.pathname
|
||||
|
||||
if (base && path.indexOf(base) === 0) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue