Skip to content

Commit eba1c98

Browse files
QingWei-LiQingWei-Li
committed
fix(render): init event in ssr
1 parent 3444884 commit eba1c98

File tree

6 files changed

+68
-12
lines changed

6 files changed

+68
-12
lines changed

‎app.js

+35-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,46 @@
11
var serveStatic = require('serve-static')
22
var http = require('http')
33
var fs = require('fs')
4+
var Renderer = require('./packages/docsify-server-renderer/build.js')
5+
6+
var renderer = new Renderer({
7+
template: `
8+
<!DOCTYPE html>
9+
<html lang="en">
10+
<head>
11+
<meta charset="UTF-8">
12+
<title>docsify</title>
13+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
14+
<link rel="stylesheet" href="/themes/vue.css" title="vue">
15+
</head>
16+
<body>
17+
<!--inject-app-->
18+
<!--inject-config-->
19+
<script src="/lib/docsify.js"></script>
20+
</body>
21+
</html>`,
22+
config: {
23+
name: 'docsify',
24+
repo: 'qingwei-li/docsify',
25+
basePath: '/docs/',
26+
loadNavbar: true,
27+
loadSidebar: true,
28+
subMaxLevel: 3,
29+
auto2top: true
30+
},
31+
path: './'
32+
})
433

534
http.createServer(function (req, res) {
635
serveStatic('.')(req, res, function () {
7-
res.writeHead(200, { 'Content-Type': 'text/html' })
36+
// TEST SSR
37+
// const html = renderer.renderToString(req.url)
38+
// res.end(html)
39+
40+
res.writeHead(404, { 'Content-Type': 'text/html' })
841
res.end(fs.readFileSync('dev.html'))
942
})
1043
}).listen(3000, '0.0.0.0')
1144

1245
console.log(`\nListening at http://0.0.0.0:3000\n`)
46+

‎dev.html

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
subMaxLevel: 2,
3333
mergeNavbar: true,
3434
formatUpdated: '{MM}/{DD} {HH}:{mm}',
35+
routerMode: 'history',
3536
plugins: [
3637
function(hook) {
3738
hook.beforeEach(function (html) {

‎packages/docsify-server-renderer/index.js

+14-5
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default class Renderer {
3030
config,
3131
cache
3232
}) {
33-
this.html = this.template = template
33+
this.html = template
3434
this.path = cwd(path)
3535
this.config = Object.assign(config, {
3636
routerMode: 'history'
@@ -43,10 +43,12 @@ export default class Renderer {
4343
this.router.getCurrentPath = () => this.url
4444
this._renderHtml('inject-config', `<script>window.$docsify = ${JSON.stringify(config)}</script>`)
4545
this._renderHtml('inject-app', mainTpl(config))
46+
47+
this.template = this.html
4648
}
4749

4850
renderToString (url) {
49-
this.url = url
51+
this.url = url = this.router.parse(url).path
5052
// TODO render cover page
5153
const { loadSidebar, loadNavbar } = this.config
5254

@@ -65,19 +67,26 @@ export default class Renderer {
6567
this._renderHtml('navbar', this._render(navbarFile, 'navbar'))
6668
}
6769

68-
return this.html
70+
const html = this.html
71+
this.html = this.template
72+
73+
return html
6974
}
7075

7176
_renderHtml (match, content) {
72-
this.html = this.html.replace(new RegExp(`<!--${match}-->`, 'g'), content)
77+
return this.html = this.html.replace(new RegExp(`<!--${match}-->`, 'g'), content)
7378
}
7479

7580
_render (path, type) {
7681
let html = this._loadFile(path)
82+
const { subMaxLevel, maxLevel } = this.config
7783

7884
switch (type) {
7985
case 'sidebar':
80-
html = this.compiler.sidebar(html)
86+
html = this.compiler.sidebar(html, maxLevel)
87+
+ `<script>window.__SUB_SIDEBAR__ = ${JSON.stringify(
88+
this.compiler.subSidebar(html, subMaxLevel)
89+
)}</script>`
8190
break
8291
case 'cover':
8392
html = this.compiler.cover(html)

‎src/core/fetch/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { get } from './ajax'
22
import { callHook } from '../init/lifecycle'
33
import { getParentPath } from '../router/util'
44
import { noop } from '../util/core'
5+
import { getAndActive } from '../event/sidebar'
56

67
function loadNested (path, file, next, vm, first) {
78
path = first ? path : path.replace(/\/$/, '')
@@ -70,7 +71,15 @@ export function fetchMixin (proto) {
7071
}
7172

7273
export function initFetch (vm) {
74+
const { loadSidebar } = vm.config
75+
76+
// server-client renderer
7377
if (vm.rendered) {
78+
const activeEl = getAndActive(vm.router, '.sidebar-nav', true, true)
79+
if (loadSidebar && activeEl) {
80+
activeEl.parentNode.innerHTML += window.__SUB_SIDEBAR__
81+
}
82+
vm._bindEventOnRendered(activeEl)
7483
vm._fetchCover()
7584
vm.$resetEvents()
7685
callHook(vm, 'doneEach')

‎src/core/render/index.js

+8-5
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,6 @@ function renderMain (html) {
5454
} else {
5555
this.config.executeScript && executeScript()
5656
}
57-
58-
if (this.config.auto2top) {
59-
scroll2Top(this.config.auto2top)
60-
}
6157
}
6258

6359
function renderNameLink (vm) {
@@ -91,7 +87,12 @@ export function renderMixin (proto) {
9187
activeEl.parentNode.innerHTML += this.compiler.subSidebar(subMaxLevel)
9288
}
9389
// bind event
94-
this.activeLink = activeEl
90+
this._bindEventOnRendered()
91+
}
92+
93+
proto._bindEventOnRendered = function (activeEl) {
94+
const { autoHeader, auto2top } = this.config
95+
9596
scrollActiveSidebar(this.router)
9697

9798
if (autoHeader && activeEl) {
@@ -103,6 +104,8 @@ export function renderMixin (proto) {
103104
dom.before(main, h1)
104105
}
105106
}
107+
108+
auto2top && scroll2Top(auto2top)
106109
}
107110

108111
proto._renderNav = function (text) {

‎src/core/router/history/html5.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export class HTML5History extends History {
1010
}
1111

1212
getCurrentPath () {
13-
const base = this.config.base
13+
const base = this.config.basePath
1414
let path = window.location.pathname
1515

1616
if (base && path.indexOf(base) === 0) {

0 commit comments

Comments
 (0)