diff --git a/scripts/tags/folding.js b/scripts/tags/folding.js new file mode 100644 index 0000000000..37ce6811c5 --- /dev/null +++ b/scripts/tags/folding.js @@ -0,0 +1,44 @@ +'use strict'; + +/** + * Usage: + * {% folding [args], title %} + * content + * {% endfolding %} + * + * args: + * - color: blue, cyan, green, yellow, red + * - status: open # means open by default + * + * example: + * {% folding cyan open, view the default folding box %} + * This is a folding box that opens by default + * {% endfolding %} + */ +function postFolding(args, content) { + args = args.join(' ').split(','); + let style = '' + let title = '' + if (args.length > 1) { + style = args[0].trim() + title = args[1].trim() + } else if (args.length > 0) { + title = args[0].trim() + } + if (style != undefined) { + return `
${hexo.render.renderSync({text: title, engine: 'markdown'}).split('\n').join('')} +
+ ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')} +
+
`; + } else { + return `
${hexo.render.renderSync({text: title, engine: 'markdown'}).split('\n').join('')} +
+ ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')} +
+
`; + } + +} + +hexo.extend.tag.register('folding', postFolding, {ends: true}); diff --git a/source/css/_common/scaffolding/tags/folding.styl b/source/css/_common/scaffolding/tags/folding.styl new file mode 100644 index 0000000000..d803a80072 --- /dev/null +++ b/source/css/_common/scaffolding/tags/folding.styl @@ -0,0 +1,166 @@ +// gap +$fd-gap = 16px // base gap +$fd-gap-paragraph = 1rem // block spacing +$fd-gap-row = .5rem // line spacing +$fd-gap-card = $fd-gap +// border radius +$fd-border-codeblock = 4px +// common +$fd-color-card = white +$fd-color-block = #f6f6f6 +// font size +$fd-fontsize-meta = .875rem // 14px +$fd-fontsize-list = .9375rem // 15px +//color +$fd-color-p = #555 +$fd-color-md-blue = #e8f4fd +$fd-color-md-blue1 = rgba(33,150,243,0.3) + +$fd-color-mac-cyan = #e8fafe +$fd-color-mac-cyan1 = rgba(27,205,252,0.3) +$fd-color-mac-green = #ebf9ed +$fd-color-mac-green1 =rgba(61,197,80,.3) +$fd-color-mac-yellow = #fff8e9 +$fd-color-mac-yellow1 = rgba(255,189,43,0.3) +$fd-color-mac-red = #feefee +$fd-color-mac-red1 = rgba(254,95,88,0.3) +// transition time +$fd-time = 0.28s + +details + display: block + padding: $fd-gap + margin: $fd-gap-row 0 + border-radius: $fd-border-codeblock + background: $fd-color-card + font-size: $fd-fontsize-list + transition: all $fd-time ease + -moz-transition: all $fd-time ease + -webkit-transition: all $fd-time ease + -o-transition: all $fd-time ease + + summary + cursor: pointer; + padding: $fd-gap + outline:none; + margin: 0 - $fd-gap + border-radius: $fd-border-codeblock + color: alpha($fd-color-p, .7) + font-size: $fd-fontsize-meta + font-weight: bold + position: relative + line-height: normal + + + >p, h1, h2, h3, h4, h5, h6 + display: inline !important + border-bottom: none !important + cursor: pointer; + + &:hover + color: $fd-color-p + + &:after + position: absolute + content: '+' + text-align: center + top: 50% + transform: translateY(-50%) + right: $fd-gap + + border: 1px solid $fd-color-block + + > summary + background: $fd-color-block + + &[blue] + border-color: $fd-color-md-blue + + > summary + background:$fd-color-md-blue + + &[cyan] + border-color:$fd-color-mac-cyan + + > summary + background:$fd-color-mac-cyan + + &[green] + border-color:$fd-color-mac-green + + > summary + background:$fd-color-mac-green + + &[yellow] + border-color:$fd-color-mac-yellow + + > summary + background:$fd-color-mac-yellow + + &[red] + border-color:$fd-color-mac-red + + > summary + background:$fd-color-mac-red + +details[open] + border-color: alpha($fd-color-p, .2) + + > summary + border-bottom: 1px solid alpha($fd-color-p, .2) + border-bottom-left-radius: 0 + border-bottom-right-radius: 0 + + &[blue] + border-color: alpha($fd-color-md-blue1, .3) + + > summary + border-bottom-color: alpha($fd-color-md-blue1, .3) + + &[cyan] + border-color: alpha($fd-color-mac-cyan1, .3) + + > summary + border-bottom-color: alpha($fd-color-mac-cyan1, .3) + + &[green] + border-color: alpha($fd-color-mac-green1, .3) + + > summary + border-bottom-color: alpha($fd-color-mac-green1, .3) + + &[yellow] + border-color: alpha($fd-color-mac-yellow1, .3) + + > summary + border-bottom-color: alpha($fd-color-mac-yellow1, .3) + + &[red] + border-color: alpha($fd-color-mac-red1, .3) + + > summary + border-bottom-color: alpha($fd-color-mac-red1, .3) + + > summary + color: $fd-color-p + margin-bottom: 0 + + &:hover + &:after + content: '-' + + > div.content + padding: $fd-gap + margin: 0 - $fd-gap + margin-top: 0 + + p > a:hover + text-decoration: underline + + > + p, .tabs, ul, ol, .highlight, .note, .fancybox, details + &:first-child + margin-top: 0 + + &:last-child + margin-bottom: 0 diff --git a/source/css/_common/scaffolding/tags/tags.styl b/source/css/_common/scaffolding/tags/tags.styl index 56cc2c9728..49a66001b4 100644 --- a/source/css/_common/scaffolding/tags/tags.styl +++ b/source/css/_common/scaffolding/tags/tags.styl @@ -2,6 +2,7 @@ @import 'group-pictures'; @import 'label'; @import 'tabs'; +@import 'folding'; @import 'note' if (hexo-config('note.style') != 'disabled');