feat: add docsify-updated, close #158

This commit is contained in:
qingwei.li 2017-05-16 23:03:22 +08:00
parent ca0d6182b9
commit d2be5aecf8
No known key found for this signature in database
GPG Key ID: B6DDC2F7AE80B2F4
11 changed files with 95 additions and 13 deletions

2
app.js
View File

@ -4,7 +4,7 @@ var fs = require('fs')
http.createServer(function (req, res) { http.createServer(function (req, res) {
serveStatic('.')(req, res, function () { serveStatic('.')(req, res, function () {
res.writeHead(404, { 'Content-Type': 'text/html' }) res.writeHead(200, { 'Content-Type': 'text/html' })
res.end(fs.readFileSync('dev.html')) res.end(fs.readFileSync('dev.html'))
}) })
}).listen(3000, '0.0.0.0') }).listen(3000, '0.0.0.0')

View File

@ -30,7 +30,15 @@
loadSidebar: true, loadSidebar: true,
name: 'docsify', name: 'docsify',
subMaxLevel: 2, subMaxLevel: 2,
mergeNavbar: true mergeNavbar: true,
formatUpdated: '{MM}/{DD} {HH}:{mm}',
plugins: [
function(hook) {
hook.beforeEach(function (html) {
return html += '> Last modified {docsify-updated}'
})
}
]
} }
</script> </script>
<script src="/lib/docsify.js"></script> <script src="/lib/docsify.js"></script>

View File

@ -315,3 +315,18 @@ window.$docsify = {
mergeNavbar: true mergeNavbar: true
} }
``` ```
## format-updated
We can display the file update date through **{docsify-updated<span>}</span>** variable. And format it by `formatUpdated`.
See https://github.com/lukeed/tinydate#patterns
```js
window.$docsify = {
formatUpdated: '{MM}/{DD} {HH}:{mm}',
formatUpdated: function (time) {
// ...
return time
}
}
```

View File

@ -314,4 +314,19 @@ Navbar will be merged with the sidebar on smaller screens.
window.$docsify = { window.$docsify = {
mergeNavbar: true mergeNavbar: true
} }
``` ```
## format-updated
We can display the file update date through **{docsify-updated<span>}</span>** variable. And format it by `formatUpdated`.
See https://github.com/lukeed/tinydate#patterns
```js
window.$docsify = {
formatUpdated: '{MM}/{DD} {HH}:{mm}',
formatUpdated: function (time) {
// ...
return time
}
}
```

View File

@ -34,6 +34,7 @@
loadNavbar: true, loadNavbar: true,
mergeNavbar: true, mergeNavbar: true,
maxLevel: 4, maxLevel: 4,
subMaxLevel: 2,
name: 'docsify', name: 'docsify',
search: { search: {
noData: { noData: {
@ -48,7 +49,14 @@
'/': 'Search' '/': 'Search'
} }
}, },
subMaxLevel: 2 formatUpdated: '{MM}/{DD} {HH}:{mm}',
plugins: [
function(hook) {
hook.beforeEach(function (html) {
return html += '> Last modified {docsify-updated}'
})
}
]
} }
</script> </script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script> <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>

View File

@ -326,3 +326,17 @@ window.$docsify = {
} }
``` ```
## format-updated
我们可以显示文档更新日期通过 **{docsify-updated<span>}</span>** 变量. 并且格式化日期通过 `formatUpdated`.
参考 https://github.com/lukeed/tinydate#patterns
```js
window.$docsify = {
formatUpdated: '{MM}/{DD} {HH}:{mm}',
formatUpdated: function (time) {
// ...
return time
}
}
```

View File

@ -28,6 +28,7 @@
"dependencies": { "dependencies": {
"marked": "^0.3.6", "marked": "^0.3.6",
"prismjs": "^1.6.0", "prismjs": "^1.6.0",
"tinydate": "^1.0.0",
"zoom-image": "^0.1.4" "zoom-image": "^0.1.4"
}, },
"devDependencies": { "devDependencies": {

View File

@ -18,7 +18,8 @@ const config = merge({
executeScript: null, executeScript: null,
noEmoji: false, noEmoji: false,
ga: '', ga: '',
mergeNavbar: false mergeNavbar: false,
formatUpdated: ''
}, window.$docsify) }, window.$docsify)
const script = document.currentScript || const script = document.currentScript ||

View File

@ -14,9 +14,10 @@ export function get (url, hasBar = false) {
const on = function () { const on = function () {
xhr.addEventListener.apply(xhr, arguments) xhr.addEventListener.apply(xhr, arguments)
} }
const cached = cache[url]
if (cache[url]) { if (cached) {
return { then: cb => cb(cache[url]), abort: noop } return { then: cb => cb(cached.content, cached.opt), abort: noop }
} }
xhr.open('GET', url) xhr.open('GET', url)
@ -41,8 +42,14 @@ export function get (url, hasBar = false) {
if (target.status >= 400) { if (target.status >= 400) {
error(target) error(target)
} else { } else {
cache[url] = target.response const result = cache[url] = {
success(target.response) content: target.response,
opt: {
updatedAt: xhr.getResponseHeader('last-modified')
}
}
success(result.content, result.opt)
} }
}) })
}, },

View File

@ -28,8 +28,8 @@ export function fetchMixin (proto) {
this.isHTML = /\.html$/g.test(path) this.isHTML = /\.html$/g.test(path)
// Load main content // Load main content
last.then(text => { last.then((text, opt) => {
this._renderMain(text) this._renderMain(text, opt)
if (!loadSidebar) return cb() if (!loadSidebar) return cb()
const fn = result => { this._renderSidebar(result); cb() } const fn = result => { this._renderSidebar(result); cb() }

View File

@ -8,6 +8,7 @@ import { callHook } from '../init/lifecycle'
import { getBasePath, getPath, isAbsolutePath } from '../route/util' import { getBasePath, getPath, isAbsolutePath } from '../route/util'
import { isPrimitive } from '../util/core' import { isPrimitive } from '../util/core'
import { isMobile } from '../util/env' import { isMobile } from '../util/env'
import tinydate from 'tinydate'
function executeScript () { function executeScript () {
const script = dom.findAll('.markdown-section>script') const script = dom.findAll('.markdown-section>script')
@ -21,6 +22,16 @@ function executeScript () {
}, 0) }, 0)
} }
function formatUpdated (html, updated, fn) {
updated = typeof fn === 'function'
? fn(updated)
: typeof fn === 'string'
? tinydate(fn)(new Date(updated))
: updated
return html.replace(/{docsify-updated}/g, updated)
}
function renderMain (html) { function renderMain (html) {
if (!html) { if (!html) {
// TODO: Custom 404 page // TODO: Custom 404 page
@ -97,9 +108,11 @@ export function renderMixin (proto) {
getAndActive('nav') getAndActive('nav')
} }
proto._renderMain = function (text) { proto._renderMain = function (text, opt) {
callHook(this, 'beforeEach', text, result => { callHook(this, 'beforeEach', text, result => {
const html = this.isHTML ? result : markdown(result) let html = this.isHTML ? result : markdown(result)
html = formatUpdated(html, opt.updatedAt, this.config.formatUpdated)
callHook(this, 'afterEach', html, text => renderMain.call(this, text)) callHook(this, 'afterEach', html, text => renderMain.call(this, text))
}) })
} }