diff --git a/src/core/config.js b/src/core/config.js index a1bf9bb8b..230348a2b 100644 --- a/src/core/config.js +++ b/src/core/config.js @@ -14,6 +14,7 @@ const config = merge({ name: '', themeColor: '', nameLink: window.location.pathname, + autoHeader: false, ga: '' }, window.$docsify) diff --git a/src/core/event/sidebar.js b/src/core/event/sidebar.js index aa4475b4a..9bb1d07e5 100644 --- a/src/core/event/sidebar.js +++ b/src/core/event/sidebar.js @@ -1,43 +1,51 @@ import { isMobile } from '../util/env' -import { getNode, on, body, findAll, toggleClass } from '../util/dom' +import * as dom from '../util/dom' import { getHash } from '../route/hash' +const title = dom.$.title /** * Toggle button */ export function btn (el) { - const toggle = () => body.classList.toggle('close') + const toggle = () => dom.body.classList.toggle('close') - el = getNode(el) - on(el, 'click', toggle) + el = dom.getNode(el) + dom.on(el, 'click', toggle) if (isMobile) { - const sidebar = getNode('.sidebar') + const sidebar = dom.getNode('.sidebar') - on(sidebar, 'click', () => { + dom.on(sidebar, 'click', () => { toggle() - setTimeout(() => getAndActive(true), 0) + setTimeout(() => getAndActive(sidebar, true, true), 0) }) } } export function sticky () { - const cover = getNode('section.cover') + const cover = dom.getNode('section.cover') if (!cover) return const coverHeight = cover.getBoundingClientRect().height if (window.pageYOffset >= coverHeight || cover.classList.contains('hidden')) { - toggleClass(body, 'add', 'sticky') + dom.toggleClass(dom.body, 'add', 'sticky') } else { - toggleClass(body, 'remove', 'sticky') + dom.toggleClass(dom.body, 'remove', 'sticky') } } -export function getAndActive (el, isParent) { - const dom = getNode(el) - const links = findAll(dom, 'a') - const hash = '#' + getHash() +/** + * Get and active link + * @param {string|element} el + * @param {Boolean} isParent acitve parent + * @param {Boolean} autoTitle auto set title + * @return {element} + */ +export function getAndActive (el, isParent, autoTitle) { + el = dom.getNode(el) + const links = dom.findAll(el, 'a') + const hash = '#' + getHash() let target links @@ -48,11 +56,15 @@ export function getAndActive (el, isParent) { if (hash.indexOf(href) === 0 && !target) { target = a - toggleClass(node, 'add', 'active') + dom.toggleClass(node, 'add', 'active') } else { - toggleClass(node, 'remove', 'active') + dom.toggleClass(node, 'remove', 'active') } }) + if (autoTitle) { + dom.$.title = target ? `${target.innerText} - ${title}` : title + } + return target } diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js index c4abe6a12..92d27ba07 100644 --- a/src/core/render/compiler.js +++ b/src/core/render/compiler.js @@ -67,10 +67,7 @@ renderer.code = function (code, lang = '') { return `
${hl}
`
}
renderer.link = function (href, title, text) {
- if (!/:|(\/{2})/.test(href)) {
- href = toURL(href)
- }
- return `${text}`
+ return `${text}`
}
renderer.paragraph = function (text) {
if (/^!>/.test(text)) {
diff --git a/src/core/render/index.js b/src/core/render/index.js
index 4a744bd63..746fdf70d 100644
--- a/src/core/render/index.js
+++ b/src/core/render/index.js
@@ -46,12 +46,22 @@ export function renderMixin (proto) {
}
proto._renderSidebar = function (text) {
- const { maxLevel, subMaxLevel } = this.config
+ const { maxLevel, subMaxLevel, autoHeader } = this.config
this._renderTo('.sidebar-nav', sidebar(text, maxLevel))
- subSidebar(getAndActive('.sidebar-nav', true), subMaxLevel)
+ const active = getAndActive('.sidebar-nav', true, true)
+ subSidebar(active, subMaxLevel)
// bind event
scrollActiveSidebar()
+
+ if (autoHeader && active) {
+ const main = dom.getNode('#main')
+ if (main.children[0].tagName !== 'H1') {
+ const h1 = dom.create('h1')
+ h1.innerText = active.innerText
+ dom.before(main, h1)
+ }
+ }
}
proto._renderNav = function (text) {
@@ -128,7 +138,7 @@ export function initRender (vm) {
// Render main app
vm._renderTo(el, html, true)
// Add nav
- dom.body.insertBefore(navEl, dom.body.children[0])
+ dom.before(dom.body, navEl)
if (config.themeColor) {
dom.$.head += tpl.theme(config.themeColor)
diff --git a/src/core/route/hash.js b/src/core/route/hash.js
index 0ca788009..60e0164f4 100644
--- a/src/core/route/hash.js
+++ b/src/core/route/hash.js
@@ -1,5 +1,5 @@
import { merge, cached } from '../util/core'
-import { parseQuery, stringifyQuery } from './util'
+import { parseQuery, stringifyQuery, cleanPath } from './util'
function replaceHash (path) {
const i = window.location.href.indexOf('#')
@@ -70,5 +70,5 @@ export function toURL (path, params) {
route.query = merge({}, route.query, params)
path = route.path + stringifyQuery(route.query)
- return '#' + path
+ return cleanPath('#/' + path)
}
diff --git a/src/core/util/dom.js b/src/core/util/dom.js
index 06016a571..bbd3601ac 100644
--- a/src/core/util/dom.js
+++ b/src/core/util/dom.js
@@ -52,6 +52,10 @@ export function appendTo (target, el) {
return target.appendChild(el)
}
+export function before (target, el) {
+ return target.insertBefore(el, target.children[0])
+}
+
export function on (el, type, handler) {
isFn(type)
? window.addEventListener(el, type)
@@ -72,5 +76,5 @@ export const off = function on (el, type, handler) {
* toggleClass(el, 'add', 'active') => el.classList.add('active')
*/
export function toggleClass (el, type, val) {
- el.classList[val ? type : 'toggle'](val || type)
+ el && el.classList[val ? type : 'toggle'](val || type)
}