Xu's Blog

博观而约取，厚积而薄发

0%

Hexo+Next7.8.0 引入 Folding 容器

发表于 更新于 分类于 阅读次数： Valine： 文章字数： 511 所需阅读时间 ≈ 1 分钟
分享一下如何将折叠式容器封装到 Next 主题中。

偶然间看到了html5的 <summary> 标签，可以将内容展开折叠，感觉很棒，就将其封装到 Next 主题中使用。

本文介绍的文件路径及方法都是基于 Next7.8.0 版本实现的，小伙伴采用且考虑兼容性。

🌞 使用方法

1
2
3
4
5
{% folding 参数（可选）, 标题 %}

![](https://cdn.jsdelivr.net/gh/XuxuGood/blogImages/resume/resumeBg.jpg)

{% endfolding %}

参数位置可以填写颜色和状态，多个参数用空格隔开。

颜色

1
blue, cyan, green, yellow, red
状态

状态填写 open 代表默认打开。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{% folding 查看图片测试 %}

![](https://cdn.jsdelivr.net/gh/XuxuGood/blogImages/resume/resumeBg.jpg)

{% endfolding %}

{% folding cyan open, 查看默认打开的折叠框 %}

这是一个默认打开的折叠框。

{% endfolding %}

{% folding green, 查看代码测试 %}

{% endfolding %}

{% folding yellow, 查看列表测试 %}

- haha
- hehe

{% endfolding %}

{% folding red, 查看嵌套测试 %}

{% folding blue, 查看嵌套测试2 %}

{% folding 查看嵌套测试3 %}

hahaha

{% endfolding %}

{% endfolding %}

{% endfolding %}

查看图片测试

查看默认打开的折叠框

这是一个默认打开的折叠框。

查看代码测试

 
1
查看代码测试

查看列表测试
  • haha
  • hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

吼吼 ✌️

🌞 配置

🎉 引入js

在 \next\scripts\tags 目录下新建文件 folding.js，并添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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});

🎉 引入css

在 \next\source\css\_common\scaffolding\tags 目录下新建文件 folding.styl,并添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
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: url(/images/ayuda.cur),auto;
    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: url(/images/ayuda.cur),auto;

    &: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

最后在目录 \next\source\css\_common\scaffolding\tags 下有一个文件 tags.styl，添加以下内容：

1
@import 'folding';

配上完以上内容，素质三连 hexo clean && hexo g && hexo s 就可以在 Markdown 中使用啦！

📚  相关文章
-------------------本文结束 感谢您的阅读-------------------
坚持原创技术分享，感谢您的支持和鼓励！
Valine 来必力