From 100ab018113145807106066caa5bc0a7364ad7cd Mon Sep 17 00:00:00 2001
From: keelii <keeliizhou@gmail.com>
Date: Thu, 9 Aug 2018 07:36:23 +0800
Subject: [PATCH] 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
---
 src/core/render/compiler.js   |  4 ++--
 src/core/render/tpl.js        | 13 +++++--------
 src/themes/basic/_layout.styl |  2 +-
 src/themes/buble.styl         |  2 +-
 src/themes/dark.styl          |  2 +-
 src/themes/vue.styl           |  2 +-
 6 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
index 35a5bb5e..ed36429d 100644
--- a/src/core/render/compiler.js
+++ b/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) {
diff --git a/src/core/render/tpl.js b/src/core/render/tpl.js
index 51bd9e94..c1bfd4f9 100644
--- a/src/core/render/tpl.js
+++ b/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) {
diff --git a/src/themes/basic/_layout.styl b/src/themes/basic/_layout.styl
index 747c7e5f..1e1e9cc3 100644
--- a/src/themes/basic/_layout.styl
+++ b/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
diff --git a/src/themes/buble.styl b/src/themes/buble.styl
index 2b071195..53fbc152 100644
--- a/src/themes/buble.styl
+++ b/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
diff --git a/src/themes/dark.styl b/src/themes/dark.styl
index 2dc479d5..02ca6301 100644
--- a/src/themes/dark.styl
+++ b/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
diff --git a/src/themes/vue.styl b/src/themes/vue.styl
index fc0bf271..267538e3 100644
--- a/src/themes/vue.styl
+++ b/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