mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
feat: add docsify-updated, close #158
This commit is contained in:
parent
ca0d6182b9
commit
d2be5aecf8
2
app.js
2
app.js
@ -4,7 +4,7 @@ var fs = require('fs')
|
||||
|
||||
http.createServer(function (req, res) {
|
||||
serveStatic('.')(req, res, function () {
|
||||
res.writeHead(404, { 'Content-Type': 'text/html' })
|
||||
res.writeHead(200, { 'Content-Type': 'text/html' })
|
||||
res.end(fs.readFileSync('dev.html'))
|
||||
})
|
||||
}).listen(3000, '0.0.0.0')
|
||||
|
||||
10
dev.html
10
dev.html
@ -30,7 +30,15 @@
|
||||
loadSidebar: true,
|
||||
name: 'docsify',
|
||||
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 src="/lib/docsify.js"></script>
|
||||
|
||||
@ -315,3 +315,18 @@ window.$docsify = {
|
||||
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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -314,4 +314,19 @@ Navbar will be merged with the sidebar on smaller screens.
|
||||
window.$docsify = {
|
||||
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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
loadNavbar: true,
|
||||
mergeNavbar: true,
|
||||
maxLevel: 4,
|
||||
subMaxLevel: 2,
|
||||
name: 'docsify',
|
||||
search: {
|
||||
noData: {
|
||||
@ -48,7 +49,14 @@
|
||||
'/': 'Search'
|
||||
}
|
||||
},
|
||||
subMaxLevel: 2
|
||||
formatUpdated: '{MM}/{DD} {HH}:{mm}',
|
||||
plugins: [
|
||||
function(hook) {
|
||||
hook.beforeEach(function (html) {
|
||||
return html += '> Last modified {docsify-updated}'
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -28,6 +28,7 @@
|
||||
"dependencies": {
|
||||
"marked": "^0.3.6",
|
||||
"prismjs": "^1.6.0",
|
||||
"tinydate": "^1.0.0",
|
||||
"zoom-image": "^0.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -18,7 +18,8 @@ const config = merge({
|
||||
executeScript: null,
|
||||
noEmoji: false,
|
||||
ga: '',
|
||||
mergeNavbar: false
|
||||
mergeNavbar: false,
|
||||
formatUpdated: ''
|
||||
}, window.$docsify)
|
||||
|
||||
const script = document.currentScript ||
|
||||
|
||||
@ -14,9 +14,10 @@ export function get (url, hasBar = false) {
|
||||
const on = function () {
|
||||
xhr.addEventListener.apply(xhr, arguments)
|
||||
}
|
||||
const cached = cache[url]
|
||||
|
||||
if (cache[url]) {
|
||||
return { then: cb => cb(cache[url]), abort: noop }
|
||||
if (cached) {
|
||||
return { then: cb => cb(cached.content, cached.opt), abort: noop }
|
||||
}
|
||||
|
||||
xhr.open('GET', url)
|
||||
@ -41,8 +42,14 @@ export function get (url, hasBar = false) {
|
||||
if (target.status >= 400) {
|
||||
error(target)
|
||||
} else {
|
||||
cache[url] = target.response
|
||||
success(target.response)
|
||||
const result = cache[url] = {
|
||||
content: target.response,
|
||||
opt: {
|
||||
updatedAt: xhr.getResponseHeader('last-modified')
|
||||
}
|
||||
}
|
||||
|
||||
success(result.content, result.opt)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@ -28,8 +28,8 @@ export function fetchMixin (proto) {
|
||||
this.isHTML = /\.html$/g.test(path)
|
||||
|
||||
// Load main content
|
||||
last.then(text => {
|
||||
this._renderMain(text)
|
||||
last.then((text, opt) => {
|
||||
this._renderMain(text, opt)
|
||||
if (!loadSidebar) return cb()
|
||||
|
||||
const fn = result => { this._renderSidebar(result); cb() }
|
||||
|
||||
@ -8,6 +8,7 @@ import { callHook } from '../init/lifecycle'
|
||||
import { getBasePath, getPath, isAbsolutePath } from '../route/util'
|
||||
import { isPrimitive } from '../util/core'
|
||||
import { isMobile } from '../util/env'
|
||||
import tinydate from 'tinydate'
|
||||
|
||||
function executeScript () {
|
||||
const script = dom.findAll('.markdown-section>script')
|
||||
@ -21,6 +22,16 @@ function executeScript () {
|
||||
}, 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) {
|
||||
if (!html) {
|
||||
// TODO: Custom 404 page
|
||||
@ -97,9 +108,11 @@ export function renderMixin (proto) {
|
||||
getAndActive('nav')
|
||||
}
|
||||
|
||||
proto._renderMain = function (text) {
|
||||
proto._renderMain = function (text, opt) {
|
||||
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))
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user