Add folding tag

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 `<details ${style}><summary> ${hexo.render.renderSync({text: title, engine: 'markdown'}).split('\n').join('')} </summary>
+              <div class='content'>
+              ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+              </div>
+            </details>`;
+  } else {
+    return `<details><summary> ${hexo.render.renderSync({text: title, engine: 'markdown'}).split('\n').join('')} </summary>
+              <div class='content'>
+              ${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}
+              </div>
+            </details>`;
+  }
+
+}
+
+hexo.extend.tag.register('folding', postFolding, {ends: true});

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

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');