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:
parent
a683e5bf2a
commit
100ab01811
6 changed files with 11 additions and 14 deletions
|
|
@ -302,7 +302,7 @@ export class Compiler {
|
||||||
html = this.compile(text)
|
html = this.compile(text)
|
||||||
} else {
|
} else {
|
||||||
const tree = this.cacheTree[currentPath] || genTree(this.toc, level)
|
const tree = this.cacheTree[currentPath] || genTree(this.toc, level)
|
||||||
html = treeTpl(tree, '<ul>')
|
html = treeTpl(tree, '<ul>{inner}</ul>')
|
||||||
this.cacheTree[currentPath] = tree
|
this.cacheTree[currentPath] = tree
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -331,7 +331,7 @@ export class Compiler {
|
||||||
|
|
||||||
cacheTree[currentPath] = tree
|
cacheTree[currentPath] = tree
|
||||||
this.toc = []
|
this.toc = []
|
||||||
return treeTpl(tree, '<ul class="app-sub-sidebar">')
|
return treeTpl(tree)
|
||||||
}
|
}
|
||||||
|
|
||||||
article(text) {
|
article(text) {
|
||||||
|
|
|
||||||
|
|
@ -78,21 +78,18 @@ export function cover() {
|
||||||
* @param {String} tpl
|
* @param {String} tpl
|
||||||
* @return {String}
|
* @return {String}
|
||||||
*/
|
*/
|
||||||
export function tree(toc, tpl = '') {
|
export function tree(toc, tpl = '<ul class="app-sub-sidebar">{inner}</ul>') {
|
||||||
if (!toc || !toc.length) {
|
if (!toc || !toc.length) {
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
|
let innerHTML = ''
|
||||||
toc.forEach(node => {
|
toc.forEach(node => {
|
||||||
tpl += `<li><a class="section-link" href="${node.slug}">${
|
innerHTML += `<li><a class="section-link" href="${node.slug}">${node.title}</a></li>`
|
||||||
node.title
|
|
||||||
}</a></li>`
|
|
||||||
if (node.children) {
|
if (node.children) {
|
||||||
tpl += `<li><ul class="children">${tree(node.children)}</li></ul>`
|
innerHTML += tree(node.children, tpl)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
return tpl.replace('{inner}', innerHTML)
|
||||||
return tpl
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function helper(className, content) {
|
export function helper(className, content) {
|
||||||
|
|
|
||||||
|
|
@ -236,7 +236,7 @@ main.hidden
|
||||||
display none
|
display none
|
||||||
|
|
||||||
ul
|
ul
|
||||||
margin 0
|
margin 0 0 0 15px
|
||||||
padding 0
|
padding 0
|
||||||
|
|
||||||
li > p
|
li > p
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@ $sidebar-width = 16rem
|
||||||
li
|
li
|
||||||
list-style none
|
list-style none
|
||||||
margin 0
|
margin 0
|
||||||
padding 0.2em 0 0.2em 1rem
|
padding 0.2em 0 0.2em 0
|
||||||
|
|
||||||
ul li ul
|
ul li ul
|
||||||
padding 0
|
padding 0
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ body
|
||||||
color #c8c8c8
|
color #c8c8c8
|
||||||
|
|
||||||
li
|
li
|
||||||
margin 6px 15px
|
margin 6px 15px 6px 0
|
||||||
|
|
||||||
ul li a
|
ul li a
|
||||||
color #c8c8c8
|
color #c8c8c8
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ body
|
||||||
color #364149
|
color #364149
|
||||||
|
|
||||||
li
|
li
|
||||||
margin 6px 0 6px 15px
|
margin 6px 0 6px 0
|
||||||
|
|
||||||
ul li a
|
ul li a
|
||||||
color #505d6b
|
color #505d6b
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue