feat(render): add auto header

src/core/config.js

@@ -14,6 +14,7 @@ const config = merge({
   name: '',
   themeColor: '',
   nameLink: window.location.pathname,
+  autoHeader: false,
   ga: ''
 }, window.$docsify)
 

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
 }

src/core/render/compiler.js

@@ -67,10 +67,7 @@ renderer.code = function (code, lang = '') {
   return `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${hl}</code></pre>`
 }
 renderer.link = function (href, title, text) {
-  if (!/:|(\/{2})/.test(href)) {
-    href = toURL(href)
-  }
-  return `<a href="${href}" title="${title || ''}">${text}</a>`
+  return `<a href="${toURL(href)}" title="${title || text}">${text}</a>`
 }
 renderer.paragraph = function (text) {
   if (/^!&gt;/.test(text)) {

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)

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)
 }

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)
 }