feat(src): dynamic title and fix sidebar style

src/event.js

@@ -19,7 +19,9 @@ export function scrollActiveSidebar () {
 
   for (let i = 0, len = lis.length; i < len; i += 1) {
     const li = lis[i]
-    let href = li.querySelector('a').getAttribute('href')
+    const a = li.querySelector('a')
+    if (!a) continue
+    let href = a.getAttribute('href')
 
     if (href !== '/') {
       const match = href.match('#([^#]+)$')

src/plugins/ga.js

@@ -25,6 +25,9 @@ function collect () {
 }
 
 const install = function () {
+  if (install.installed) return
+  install.installed = true
+
   if (!window.Docsify || !window.Docsify.installed) {
     console.error('[Docsify] Please load docsify.js first.')
     return

src/plugins/search.js

@@ -321,6 +321,9 @@ const searchPlugin = function () {
 }
 
 const install = function () {
+  if (install.installed) return
+  install.installed = true
+
   if (!window.Docsify || !window.Docsify.installed) {
     console.error('[Docsify] Please load docsify.js first.')
     return

src/render.js

@@ -8,6 +8,7 @@ import { genTree, getRoute, isMobile, slugify, merge, emojify } from './util'
 let markdown = marked
 let toc = []
 const CACHE = {}
+const originTitle = document.title
 
 const renderTo = function (dom, content) {
   dom = typeof dom === 'object' ? dom : document.querySelector(dom)
@@ -163,15 +164,21 @@ export function renderSidebar (content) {
   }
 
   renderTo('.sidebar-nav', html)
+
+  if (toc[0] && toc[0].level === 1) {
+    document.title = `${toc[0].title}${originTitle ? ' - ' + originTitle : ''}`
+  }
+
   const target = event.activeLink('.sidebar-nav', true)
   if (target) renderSubSidebar(target)
-  toc = []
 
+  toc = []
   event.scrollActiveSidebar()
 }
 
 export function renderSubSidebar (target) {
   if (!$docsify.subMaxLevel) return
+  toc[0] && toc[0].level === 1 && toc.shift()
   target.parentNode.innerHTML += tpl.tree(genTree(toc, $docsify.subMaxLevel), '<ul>')
 }
 

src/themes/basic/_layout.css

@@ -223,6 +223,11 @@ main {
     padding: 0;
   }
 
+  li>p {
+    font-weight: 700;
+    margin: 0;
+  }
+
   ul, ul li {
     list-style: none;
   }

src/themes/vue.css

@@ -18,7 +18,7 @@ body {
   background-color: $color-bg;
 
   li {
-    margin: 6px 15px;
+    margin: 6px 0 6px 15px;
   }
 
   ul li a {
@@ -28,6 +28,7 @@ body {
     white-space: nowrap;
     text-decoration: none;
     font-size: 14px;
+    font-weight: normal;
 
     &:hover {
       text-decoration: underline;
@@ -41,6 +42,7 @@ body {
   ul li.active>a {
     color: var(--theme-color, $color-primary);
     font-weight: 600;
+    border-right: 2px solid;
   }
 }