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) {
|
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')
|
||||||
|
|||||||
10
dev.html
10
dev.html
@ -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>
|
||||||
|
|||||||
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|||||||
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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": {
|
"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": {
|
||||||
|
|||||||
@ -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 ||
|
||||||
|
|||||||
@ -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)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|||||||
@ -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() }
|
||||||
|
|||||||
@ -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))
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user