Fix nested toc style issue on sidebar (#595)

1. Remove recursive toc outer tag li
2. remove .sidebar li marginLeft
3. add .sidebar ul marginLeft

Author: keelii

src/core/render/compiler.js

@@ -302,7 +302,7 @@ export class Compiler {
       html = this.compile(text)
     } else {
       const tree = this.cacheTree[currentPath] || genTree(this.toc, level)
-      html = treeTpl(tree, '<ul>')
+      html = treeTpl(tree, '<ul>{inner}</ul>')
       this.cacheTree[currentPath] = tree
     }
 
@@ -331,7 +331,7 @@ export class Compiler {
 
     cacheTree[currentPath] = tree
     this.toc = []
-    return treeTpl(tree, '<ul class="app-sub-sidebar">')
+    return treeTpl(tree)
   }
 
   article(text) {

src/core/render/tpl.js

@@ -78,21 +78,18 @@ export function cover() {
  * @param  {String} tpl
  * @return {String}
  */
-export function tree(toc, tpl = '') {
+export function tree(toc, tpl = '<ul class="app-sub-sidebar">{inner}</ul>') {
   if (!toc || !toc.length) {
     return ''
   }
-
+  let innerHTML = ''
   toc.forEach(node => {
-    tpl += `<li><a class="section-link" href="${node.slug}">${
-      node.title
-    }</a></li>`
+    innerHTML += `<li><a class="section-link" href="${node.slug}">${node.title}</a></li>`
     if (node.children) {
-      tpl += `<li><ul class="children">${tree(node.children)}</li></ul>`
+      innerHTML += tree(node.children, tpl)
     }
   })
-
-  return tpl
+  return tpl.replace('{inner}', innerHTML)
 }
 
 export function helper(className, content) {

src/themes/basic/_layout.styl

@@ -236,7 +236,7 @@ main.hidden
       display none
 
   ul
-    margin 0
+    margin 0 0 0 15px
     padding 0
 
   li > p

src/themes/buble.styl

@@ -20,7 +20,7 @@ $sidebar-width = 16rem
   li
     list-style none
     margin 0
-    padding 0.2em 0 0.2em 1rem
+    padding 0.2em 0 0.2em 0
 
   ul li ul
     padding 0

src/themes/dark.styl

@@ -17,7 +17,7 @@ body
   color #c8c8c8
 
   li
-    margin 6px 15px
+    margin 6px 15px 6px 0
 
   ul li a
     color #c8c8c8

src/themes/vue.styl

@@ -17,7 +17,7 @@ body
   color #364149
 
   li
-    margin 6px 0 6px 15px
+    margin 6px 0 6px 0
 
   ul li a
     color #505d6b