add toc tag
This commit is contained in:
parent
b9f3766833
commit
400254dcfa
|
@ -0,0 +1,72 @@
|
||||||
|
/**
|
||||||
|
* toc.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
|
||||||
|
* 格式与官方标签插件一致使用空格分隔,中括号内的是可选参数(中括号不需要写出来)
|
||||||
|
*
|
||||||
|
* {% toc wiki:xxx [open:true] [display:mobile] title %}
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function layoutDocTree(pages) {
|
||||||
|
var el = '';
|
||||||
|
el += '<ul class="toc">';
|
||||||
|
pages.forEach((p, i) => {
|
||||||
|
el += '<li>';
|
||||||
|
el += '<a class="list-link" href="' + p.permalink + '">';
|
||||||
|
el += '<span>' + (p.title || p.seo_title) + '</span>';
|
||||||
|
el += '</a>';
|
||||||
|
el += '</li>';
|
||||||
|
});
|
||||||
|
el += '</ul>';
|
||||||
|
return el;
|
||||||
|
}
|
||||||
|
|
||||||
|
hexo.extend.tag.register('toc', function(args) {
|
||||||
|
args = hexo.args.map(args, ['wiki', 'open', 'display'], ['title']);
|
||||||
|
|
||||||
|
var el = '';
|
||||||
|
el += '<div class="tag-plugin toc"';
|
||||||
|
el += ' ' + hexo.args.joinTags(args, ['display']).join(' ');
|
||||||
|
if (args.display === 'mobile') {
|
||||||
|
el += ' style="display:none"';
|
||||||
|
}
|
||||||
|
el += '>';
|
||||||
|
|
||||||
|
el += '<details class="toc"';
|
||||||
|
if (args.open !== false) {
|
||||||
|
el += ' open';
|
||||||
|
}
|
||||||
|
el += '>';
|
||||||
|
el += '<summary>';
|
||||||
|
el += args.title || 'TOC';
|
||||||
|
el += '</summary>';
|
||||||
|
|
||||||
|
if (args.wiki) {
|
||||||
|
const proj = hexo.theme.config.wiki.projects[args.wiki];
|
||||||
|
if (proj === undefined) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
if (proj.sections && proj.sections.length > 1) {
|
||||||
|
el += '<div class="body fs14 multi">';
|
||||||
|
proj.sections.forEach((sec, i) => {
|
||||||
|
el += '<section>';
|
||||||
|
el += '<div class="header">';
|
||||||
|
el += sec.title;
|
||||||
|
el += '</div>';
|
||||||
|
el += layoutDocTree(sec.pages);
|
||||||
|
el += '</section>';
|
||||||
|
});
|
||||||
|
el += '</div>';
|
||||||
|
} else {
|
||||||
|
el += '<div class="body fs14">';
|
||||||
|
el += '<div class="body">';
|
||||||
|
el += layoutDocTree(proj.pages);
|
||||||
|
el += '</div>';
|
||||||
|
el += '</div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
el += '</details>';
|
||||||
|
// end
|
||||||
|
el += '</div>';
|
||||||
|
return el;
|
||||||
|
});
|
|
@ -1,4 +1,4 @@
|
||||||
details
|
details.folding
|
||||||
display: block
|
display: block
|
||||||
padding: 1rem
|
padding: 1rem
|
||||||
margin: 1rem 0
|
margin: 1rem 0
|
||||||
|
@ -31,7 +31,7 @@ details
|
||||||
right: 1rem
|
right: 1rem
|
||||||
|
|
||||||
|
|
||||||
details[open]
|
details.folding[open]
|
||||||
>summary
|
>summary
|
||||||
border-bottom: 1px solid var(--theme)
|
border-bottom: 1px solid var(--theme)
|
||||||
border-bottom-left-radius: 0
|
border-bottom-left-radius: 0
|
||||||
|
@ -54,7 +54,7 @@ details[open]
|
||||||
>:last-child
|
>:last-child
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
|
|
||||||
details[child=codeblock]>div.body
|
details.folding[child=codeblock]>div.body
|
||||||
padding: 0
|
padding: 0
|
||||||
background: transparent
|
background: transparent
|
||||||
.highlight
|
.highlight
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
.sites-wrap
|
.sites-wrap
|
||||||
.group-header
|
.group-header
|
||||||
margin: 0 0 1rem
|
margin: 1rem 0
|
||||||
p
|
p
|
||||||
margin: 0
|
margin: 0
|
||||||
font-size: $fs-14
|
font-size: $fs-14
|
||||||
|
|
|
@ -0,0 +1,38 @@
|
||||||
|
details.toc
|
||||||
|
background: var(--block)
|
||||||
|
border: 1px solid var(--block-border)
|
||||||
|
border-radius: $border-block
|
||||||
|
overflow: hidden
|
||||||
|
color: var(--text-p2)
|
||||||
|
summary
|
||||||
|
cursor: pointer
|
||||||
|
padding: 0 .5rem
|
||||||
|
line-height: 2
|
||||||
|
color: var(--text-p2)
|
||||||
|
font-size: $fs-13
|
||||||
|
font-weight: 500
|
||||||
|
&:hover
|
||||||
|
background: var(--block-hover)
|
||||||
|
|
||||||
|
>div.body
|
||||||
|
margin: var(--gap-p) 1rem 1rem
|
||||||
|
|
||||||
|
details.toc[open] >summary
|
||||||
|
border-bottom: 1px solid transparent
|
||||||
|
&:hover
|
||||||
|
border-bottom-color: var(--block-border)
|
||||||
|
|
||||||
|
details.toc[open] >div.body
|
||||||
|
section+section
|
||||||
|
margin-top: 1rem
|
||||||
|
section
|
||||||
|
.header
|
||||||
|
line-height: 2
|
||||||
|
font-weight: 500
|
||||||
|
.header+.doc_tree
|
||||||
|
margin-top: 0
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: $device-tablet)
|
||||||
|
.tag-plugin.toc[display=mobile]
|
||||||
|
display: block !important
|
Loading…
Reference in New Issue