mirror of
https://github.com/zhigang1992/docsify.git
synced 2026-04-01 22:38:23 +08:00
148 lines
3.6 KiB
JavaScript
148 lines
3.6 KiB
JavaScript
import marked from 'marked'
|
|
import Prism from 'prismjs'
|
|
import * as tpl from './tpl'
|
|
import { activeLink, scrollActiveSidebar, bindToggle, scroll2Top } from './event'
|
|
import { genTree, getRoute } from './util'
|
|
|
|
let OPTIONS = {}
|
|
const CACHE = {}
|
|
|
|
const renderTo = function (dom, content) {
|
|
dom = typeof dom === 'object' ? dom : document.querySelector(dom)
|
|
dom.innerHTML = content
|
|
|
|
return dom
|
|
}
|
|
let toc = []
|
|
const renderer = new marked.Renderer()
|
|
|
|
/**
|
|
* render anchor tag
|
|
* @link https://github.com/chjj/marked#overriding-renderer-methods
|
|
*/
|
|
renderer.heading = function (text, level) {
|
|
const slug = text.toLowerCase()
|
|
.replace(/<(?:.|\n)*?>/gm, '')
|
|
.replace(/[^\w|\u4e00-\u9fa5]+/g, '-')
|
|
let route = ''
|
|
|
|
if (OPTIONS.router) {
|
|
route = `#/${getRoute()}`
|
|
}
|
|
|
|
toc.push({ level, slug: `${route}#${encodeURIComponent(slug)}`, title: text })
|
|
|
|
return `<h${level} id="${slug}"><a href="${route}#${slug}" class="anchor"></a>${text}</h${level}>`
|
|
}
|
|
// highlight code
|
|
renderer.code = function (code, lang = '') {
|
|
const hl = Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup)
|
|
|
|
return `<pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
|
|
}
|
|
renderer.link = function (href, title, text) {
|
|
if (OPTIONS.router && !/^(?:\w+:)?\/\/([^\s\.]+\.\S{2}|localhost[\:?\d]*)\S*$/.test(href)) {
|
|
href = !/^\/#/.test(href) ? `#${href}` : href
|
|
}
|
|
|
|
return `<a href="${href}" title="${title || ''}">${text}</a>`
|
|
}
|
|
marked.setOptions({ renderer })
|
|
|
|
/**
|
|
* App
|
|
*/
|
|
export function renderApp (dom, replace) {
|
|
const nav = document.querySelector('nav') || document.createElement('nav')
|
|
|
|
dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.toggle(OPTIONS.sidebarToggle) + tpl.corner(OPTIONS.repo) + tpl.main()
|
|
document.body.insertBefore(nav, document.body.children[0])
|
|
|
|
// bind toggle
|
|
bindToggle('button.sidebar-toggle')
|
|
}
|
|
|
|
/**
|
|
* article
|
|
*/
|
|
export function renderArticle (content) {
|
|
renderTo('article', content ? marked(content) : 'not found')
|
|
if (!renderSidebar.rendered) renderSidebar(null, OPTIONS)
|
|
if (!renderNavbar.rendered) renderNavbar(null, OPTIONS)
|
|
renderSidebar.rendered = false
|
|
renderNavbar.rendered = false
|
|
|
|
if (OPTIONS.auto2top) scroll2Top()
|
|
}
|
|
|
|
/**
|
|
* navbar
|
|
*/
|
|
export function renderNavbar (content) {
|
|
if (CACHE.navbar && CACHE.navbar === content) return
|
|
CACHE.navbar = content
|
|
renderNavbar.rendered = true
|
|
|
|
if (content) renderTo('nav', marked(content))
|
|
activeLink('nav')
|
|
}
|
|
|
|
/**
|
|
* sidebar
|
|
*/
|
|
export function renderSidebar (content) {
|
|
let isToc = false
|
|
|
|
if (content) {
|
|
content = marked(content)
|
|
} else if (OPTIONS.sidebar) {
|
|
content = tpl.tree(OPTIONS.sidebar, '<ul>')
|
|
} else {
|
|
content = tpl.tree(genTree(toc, OPTIONS.maxLevel), '<ul>')
|
|
isToc = true
|
|
}
|
|
|
|
renderSidebar.rendered = true
|
|
if (CACHE.sidebar && CACHE.sidebar === content) return
|
|
CACHE.sidebar = content
|
|
renderTo('aside.sidebar', content)
|
|
if (isToc) scrollActiveSidebar()
|
|
toc = []
|
|
}
|
|
|
|
/**
|
|
* render loading bar
|
|
* @return {[type]} [description]
|
|
*/
|
|
export function renderLoading ({ loaded, total }) {
|
|
const num = Math.floor(loaded / total * 100)
|
|
|
|
if (!CACHE.loading) {
|
|
const div = document.createElement('div')
|
|
|
|
div.classList.add('progress')
|
|
document.body.appendChild(div)
|
|
CACHE.loading = div
|
|
}
|
|
|
|
CACHE.loading.style.opacity = 1
|
|
CACHE.loading.style.width = num >= 95 ? '100%' : num + '%'
|
|
|
|
if (num >= 95) {
|
|
clearTimeout(renderLoading.cacheTImeout)
|
|
renderLoading.cacheTImeout = setTimeout(_ => {
|
|
CACHE.loading.style.opacity = 0
|
|
CACHE.loading.style.width = '0%'
|
|
}, 200)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Load Config
|
|
* @param {Object} options
|
|
*/
|
|
export function config (options) {
|
|
OPTIONS = options
|
|
}
|
|
|