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

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

🌞 使用方法

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

![](https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/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/cdn@master/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: 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

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

1
@import 'folding';

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

用户交流区

温馨提示: 遵纪守法, 友善评论!





京ICP备2020040230号

WordCount83.6k