fix: render name

src/event.js

@@ -9,7 +9,7 @@ export function scrollActiveSidebar () {
 
   let hoveredOverSidebar = false
   const anchors = document.querySelectorAll('.anchor')
-  const sidebar = document.querySelector('aside.sidebar')
+  const sidebar = document.querySelector('.sidebar>div')
   const sidebarHeight = sidebar.clientHeight
 
   const nav = {}
@@ -126,7 +126,7 @@ export function bindToggle (dom) {
   dom.addEventListener('click', () => body.classList.toggle('close'))
 
   if (isMobile()) {
-    const sidebar = document.querySelector('aside.sidebar')
+    const sidebar = document.querySelector('.sidebar div')
     sidebar.addEventListener('click', () => {
       body.classList.toggle('close')
       setTimeout(() => activeLink(sidebar, true), 0)

src/index.js

@@ -1,8 +1,8 @@
-import { load, camel2kebab, isNil, getRoute, merge } from './util'
+import * as utils from './util'
 import { scrollIntoView, activeLink } from './event'
 import * as render from './render'
 
-const OPTIONS = merge({
+const OPTIONS = utils.merge({
   el: '#app',
   repo: '',
   maxLevel: 6,
@@ -22,8 +22,8 @@ const script = document.currentScript || [].slice.call(document.getElementsByTag
 // load configuration for script attribute
 if (script) {
   for (const prop in OPTIONS) {
-    const val = script.getAttribute('data-' + camel2kebab(prop))
-    OPTIONS[prop] = isNil(val) ? OPTIONS[prop] : (val || true)
+    const val = script.getAttribute('data-' + utils.camel2kebab(prop))
+    OPTIONS[prop] = utils.isNil(val) ? OPTIONS[prop] : (val || true)
   }
   if (OPTIONS.loadSidebar === true) OPTIONS.loadSidebar = '_sidebar.md'
   if (OPTIONS.loadNavbar === true) OPTIONS.loadNavbar = '_navbar.md'
@@ -33,16 +33,20 @@ if (script) {
 }
 
 // utils
-window.__docsify__ = OPTIONS
+window.$docsify = OPTIONS
+window.Docsify = {
+  installed: true,
+  utils: utils.merge({}, utils)
+}
 
 // load options
-render.init(OPTIONS)
+render.init()
 
 let cacheRoute = null
 let cacheXhr = null
 
 const mainRender = function (cb) {
-  const route = OPTIONS.basePath + getRoute()
+  const route = OPTIONS.basePath + utils.getRoute()
   if (cacheRoute === route) return cb()
 
   let basePath = cacheRoute = route
@@ -64,12 +68,12 @@ const mainRender = function (cb) {
 
   // Render Cover page
   if (OPTIONS.coverpage && page === OPTIONS.homepage) {
-    load(OPTIONS.coverpage).then(render.renderCover)
+    utils.load(OPTIONS.coverpage).then(render.renderCover)
   }
 
   cacheXhr && cacheXhr.abort && cacheXhr.abort()
   // Render markdown file
-  cacheXhr = load(page, 'GET', render.renderLoading)
+  cacheXhr = utils.load(page, 'GET', render.renderLoading)
   cacheXhr.then(result => {
     render.renderArticle(result)
     // clear cover
@@ -78,17 +82,17 @@ const mainRender = function (cb) {
     if (OPTIONS.loadSidebar) {
       const renderSidebar = result => { render.renderSidebar(result); cb() }
 
-      load(basePath + OPTIONS.loadSidebar).then(renderSidebar,
-        _ => load(OPTIONS.loadSidebar).then(renderSidebar))
+      utils.load(basePath + OPTIONS.loadSidebar).then(renderSidebar,
+        _ => utils.load(OPTIONS.loadSidebar).then(renderSidebar))
     } else {
       cb()
     }
   }, _ => render.renderArticle(null))
 
   // Render navbar
   if (OPTIONS.loadNavbar) {
-    load(basePath + OPTIONS.loadNavbar).then(render.renderNavbar,
-      _ => load(OPTIONS.loadNavbar).then(render.renderNavbar))
+    utils.load(basePath + OPTIONS.loadNavbar).then(render.renderNavbar,
+      _ => utils.load(OPTIONS.loadNavbar).then(render.renderNavbar))
   }
 }
 
@@ -99,6 +103,7 @@ const Docsify = function () {
     mainRender(_ => {
       scrollIntoView()
       activeLink('nav')
+      ;[].concat(window.$docsify.plugins).forEach(fn => fn && fn())
     })
   }
 

src/polyfill.js

@@ -1,7 +1,7 @@
 import { load } from './util'
 
 function replaceVar (block) {
-  block.innerHTML = block.innerHTML.replace(/var\(\s*--theme-color.*?\)/g, __docsify__.themeColor)
+  block.innerHTML = block.innerHTML.replace(/var\(\s*--theme-color.*?\)/g, $docsify.themeColor)
 }
 
 export function cssVars () {

src/render.js

@@ -57,16 +57,18 @@ export function init () {
     return `<p>${text}</p>`
   }
 
-  if (typeof __docsify__.markdown === 'function') {
+  if (typeof $docsify.markdown === 'function') {
     markdown.setOptions({ renderer })
-    markdown = __docsify__.markdown.call(this, markdown)
+    markdown = $docsify.markdown.call(this, markdown)
   } else {
-    markdown.setOptions(merge({ renderer }, __docsify__.markdown))
+    markdown.setOptions(merge({ renderer }, $docsify.markdown))
   }
 
   const md = markdown
 
   markdown = text => emojify(md(text))
+
+  window.Docsify.utils.marked = markdown
 }
 
 /**
@@ -75,23 +77,29 @@ export function init () {
 export function renderApp (dom, replace) {
   const nav = document.querySelector('nav') || document.createElement('nav')
 
-  if (!__docsify__.repo) nav.classList.add('no-badge')
+  if (!$docsify.repo) nav.classList.add('no-badge')
 
-  dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner(__docsify__.repo) +
-    (__docsify__.coverpage ? tpl.cover() : '') +
+  dom[replace ? 'outerHTML' : 'innerHTML'] = tpl.corner($docsify.repo) +
+    ($docsify.coverpage ? tpl.cover() : '') +
     tpl.main()
   document.body.insertBefore(nav, document.body.children[0])
 
   // theme color
-  if (__docsify__.themeColor) {
-    document.head.innerHTML += tpl.theme(__docsify__.themeColor)
+  if ($docsify.themeColor) {
+    document.head.innerHTML += tpl.theme($docsify.themeColor)
     polyfill.cssVars()
   }
 
+  // render name
+  if ($docsify.name) {
+    const aside = document.querySelector('.sidebar')
+    aside.innerHTML = `<h1><a href="${$docsify.nameLink}">${$docsify.name}</a></h1>` + aside.innerHTML
+  }
+
   // bind toggle
   event.bindToggle('button.sidebar-toggle')
   // bind sticky effect
-  if (__docsify__.coverpage) {
+  if ($docsify.coverpage) {
     !isMobile() && window.addEventListener('scroll', event.sticky)
   } else {
     document.body.classList.add('sticky')
@@ -103,7 +111,7 @@ export function renderApp (dom, replace) {
  */
 export function renderArticle (content) {
   renderTo('article', content ? markdown(content) : 'not found')
-  if (!__docsify__.loadSidebar) renderSidebar()
+  if (!$docsify.loadSidebar) renderSidebar()
 
   if (content && typeof Vue !== 'undefined') {
     CACHE.vm && CACHE.vm.$destroy()
@@ -120,7 +128,7 @@ export function renderArticle (content) {
       : new Vue({ el: 'main' }) // eslint-disable-line
     CACHE.vm && CACHE.vm.$nextTick(_ => event.scrollActiveSidebar())
   }
-  if (__docsify__.auto2top) setTimeout(() => event.scroll2Top(__docsify__.auto2top), 0)
+  if ($docsify.auto2top) setTimeout(() => event.scroll2Top($docsify.auto2top), 0)
 }
 
 /**
@@ -145,21 +153,21 @@ export function renderSidebar (content) {
     // find url tag
     html = html.match(/<ul[^>]*>([\s\S]+)<\/ul>/g)[0]
   } else {
-    html = tpl.tree(genTree(toc, __docsify__.maxLevel), '<ul>')
+    html = tpl.tree(genTree(toc, $docsify.maxLevel), '<ul>')
   }
 
-  html = (__docsify__.name ? `<h1><a href="${__docsify__.nameLink}">${__docsify__.name}</a></h1>` : '') + html
-  renderTo('aside.sidebar', html)
-  const target = event.activeLink('aside.sidebar', true)
+  console.log(html)
+  renderTo('.sidebar>div', html)
+  const target = event.activeLink('.sidebar>div', true)
   if (target) renderSubSidebar(target)
   toc = []
 
   event.scrollActiveSidebar()
 }
 
 export function renderSubSidebar (target) {
-  if (!__docsify__.subMaxLevel) return
-  target.parentNode.innerHTML += tpl.tree(genTree(toc, __docsify__.subMaxLevel), '<ul>')
+  if (!$docsify.subMaxLevel) return
+  target.parentNode.innerHTML += tpl.tree(genTree(toc, $docsify.subMaxLevel), '<ul>')
 }
 
 /**

src/tpl.js

@@ -23,7 +23,7 @@ export function corner (data) {
  * Render main content
  */
 export function main () {
-  const aside = `${toggle()}<aside class="sidebar"></aside>`
+  const aside = `${toggle()}<aside class="sidebar"><div></div></aside>`
 
   return (isMobile() ? `${aside}<main>` : `<main>${aside}`) +
     `<section class="content">