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
This commit is contained in:
keelii 2018-08-09 07:36:23 +08:00 committed by cinwell.li
parent a683e5bf2a
commit 100ab01811
6 changed files with 11 additions and 14 deletions

View File

@ -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) {

View File

@ -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) {

View File

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

View File

@ -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

View File

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

View File

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