样式引入

  • 下载源码
  • [BlogRoot]\themes\butterfly\source\css\引入下载的MyStyle\tagStyle.css文件
  • 在主题配置文件引入
1
2
3
4
5
6
7
8
inject:
head:
- <link rel="stylesheet" href="/css/MyStyle/tagStyle.css" media="defer" onload="this.media='all'"/>
- # DOM动画特效
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zykjofficial/zykjresource@master/css/font-awesome-animation.min.css" media="defer" onload="this.media='all'"/>
# Volantis主题标签
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/font-awesome-animation.min.css" media="defer" onload="this.media='all'">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/plugins.min.css" media="defer" onload="this.media='all'">

主题内置

复选列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% tabs t1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

  • 自定义Tab名 + 只有icon + icon和Tab名
1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs t2%}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

<!-- tab @fab fa-apple-pay -->
**只有图标 沒有Tab名字**
<!-- endtab -->

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}

tab名字为第一个Tab

只有图标 沒有Tab名字

名字+icon

Tab block must have unique name! 每个表格都需要定义不同的名称,如t1,t2

Button按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

[url] : 鏈接
[text] : 按鈕文字
[icon] : [可選] 圖標
[color] : [可選] 按鈕背景顔色(默認style時)
按鈕字體和邊框顔色(outline時)
default/blue/pink/red/purple/orange/green
[style] : [可選] 按鈕樣式 默認實心
outline/留空
[layout] : [可選] 按鈕佈局 默認為line
block/留空
[position] : [可選] 按鈕位置 前提是設置了layout為block 默認為左邊
center/right/留空
[size] : [可選] 按鈕大小
larger/留空
1
2
3
4
5
点击按钮{% btn 'https://lzyblog.github.io/',xiaoliblog %}
点击按钮 {% btn 'https://lzyblog.github.io/',xiaoliblog ,far fa-hand-point-right %}
点击按钮 {% btn 'https://lzyblog.github.io/',xiaoliblog ,outline %}
点击按钮 {% btn 'https://lzyblog.github.io/',xiaoliblog ,far fa-hand-point-right,outline %}
点击按钮 {% btn 'https://lzyblog.github.io/',xiaoliblog ,far fa-hand-point-right,larger %}

点击按钮xiaoliblog
点击按钮 xiaoliblog
点击按钮 xiaoliblog
点击按钮 xiaoliblog
点击按钮 xiaoliblog

1
2
3
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,block %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,block center larger %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,block right outline larger %}

xiaoliblog
xiaoliblog
xiaoliblog

1
2
3
4
5
6
7
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,larger %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,blue larger %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,pink larger %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,red larger %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,purple larger %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,orange larger %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,green larger %}

xiaoliblog
xiaoliblog
xiaoliblog
xiaoliblog
xiaoliblog
xiaoliblog
xiaoliblog

1
2
3
4
5
6
7
8
9
<div class="btn-center">
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,outline larger %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,outline blue larger %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,outline pink larger %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,outline red larger %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,outline purple larger %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,outline orange larger %}
{% btn 'https://xiaoliblog.cn/',xiaoliblog,far fa-hand-point-right,outline green larger %}
</div>

内置标签

注意:标签外挂是Hexo独有的功能,並不是标签的Markdown格式。
以下的写法,只适用于Butterfly主题,用在其它主題上不会有效果,甚至可能会报错。使用前请留意

1
2
3
4
5
6
7
8
9
10
11
12
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: modern
icons: true
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0
1
2
3
{% note 样式参数 %}
文本内容
{% endnote %}
1
2
3
4
5
6
info	  蓝色叹号
warning 黄色叹号
done 绿色打钩
success 绿色打钩
error 红色禁止
danger 红色打叉
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %}
default 提示标签符
{% endnote %}

{% note primary %}
primary 提示标签符
{% endnote %}

{% note success %}
success 提示标签符
{% endnote %}

{% note info %}
info 提示标签符
{% endnote %}

{% note warning %}
warning 提示标签符
{% endnote %}

{% note danger %}
danger 提示标签符
{% endnote %}

default 提示标签符

primary 提示标签符

success 提示标签符

info 提示标签符

warning 提示标签符

danger 提示标签符

自定义标签图标

1
2
3
{% note [color] [icon] [style] %}

{% endnote %}
1
2
3
color 	(default / blue / pink / red / purple / orange / green)
icon 只支持 fontawesome 图标(需要引入CDN), 也可以配置 no-icon
style simple/modern/flat/disabled
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% note 'fab fa-cc-visa' flat %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' flat %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' flat %}
小心開車 安全至上
{% endnote %}
{% note red 'fas fa-fan' flat%}
這是三片呢?還是四片?
{% endnote %}
{% note orange 'fas fa-battery-half' flat %}
你是刷 Visa 還是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' flat %}
剪刀石頭布
{% endnote %}
{% note green 'fab fa-internet-explorer' flat %}
前端最討厭的瀏覽器
{% endnote %}

你是刷 Visa 還是 UnionPay

2021年快到了….

小心開車 安全至上

這是三片呢?還是四片?

你是刷 Visa 還是 UnionPay

剪刀石頭布

前端最討厭的瀏覽器

隐藏标签

inline在文本里面添加按钮隐藏内容,只限文字
(content不能包含英文逗号,可用&sbquo;)

1
{% hideInline content,display,bg,color %}
  • content: 文本內容

  • display: 按钮显示示的文字(可选)

  • bg: 按钮的背景颜色(可选)

  • color: 按钮文字的颜色(可选)

1
2
3
哪个英文字母最酷? {% hideInline 因为西装裤(C装酷),查看答案,#FF7242,#fff %}

门里站着一个人?打一字 {% hideInline 闪 %}

哪个英文字母最酷? 因为西装裤(C装酷)

门里站着一个人?打一字

block独立的block隐藏内容,可用隐藏很多内容,包括图片,代码块等待
(display不能包含英文逗号,可用&sbquo;)

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}
  • content: 文本內容

  • display: 按钮显示示的文字(可选)

  • bg: 按钮的背景颜色(可选)

  • color: 按钮文字的颜色(可选)

1
2
3
4
查看答案
{% hideBlock 查看答案 %}
傻子,怎麼可能有答案
{% endhideBlock %}

查看答案

傻子,怎麼可能有答案

当你需要展示的内容太多,可用把它隐藏在收缩框里,需要时再把它展开
(display不能包含英文逗号,可用&sbquo;)

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}
1
2
3
4
5
6
7
8
9
10
{% hideToggle Butterfly安裝方法 %}
在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安裝比較新的dev分支,可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

{% endhideToggle %}
Butterfly安裝方法

在你的博客根目录里

git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

如果想要安裝比較新的dev分支,可以

git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

标签扩展

复选/单选按钮

  • 此项修改需要在源文件中添加新的文件,当然了并不会修改作者源文件。升级时只需要重新把这几个文件放入相应文件即可。
  • 文件下载地址
  • 添加的位置为:主题目录下的 scripts 中的 tags 文件夹中。
1
2
3
inject:
head:
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/plugins.min.css">

官方文档:https://volantis.js.org/v2/tag-plugins/

  • Markdown用法
1
{% checkbox 样式参数(可选), 文本(支持简单md) %}
  • HTML页面用法
1
<div class="checkbox yellow checked"><input type="checkbox" checked="checked"><p>黄色+默认选中</p></div>
  • 颜色
1
red, yellow, green, cyan, blue
  • 样式
1
plus, minus, times
  • 选中状态
1
checked
  • Markdown用法
1
2
3
4
5
6
7
8
9
10
{% checkbox 纯文本测试 %}
{% checkbox checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% checkbox red, 支持自定义颜色 %}
{% checkbox green checked, 绿色 + 默认选中 %}
{% checkbox yellow checked, 黄色 + 默认选中 %}
{% checkbox cyan checked, 青色 + 默认选中 %}
{% checkbox blue checked, 蓝色 + 默认选中 %}
{% checkbox plus green checked, 增加 %}
{% checkbox minus yellow checked, 减少 %}
{% checkbox times red checked, 叉 %}
1
2
3
4
5
6
7
{% radio 纯文本测试 %}
{% radio checked, 支持简单的 [markdown](https://guides.github.com/features/mastering-markdown/) 语法 %}
{% radio red, 支持自定义颜色 %}
{% radio green, 绿色 %}
{% radio yellow, 黄色 %}
{% radio cyan, 青色 %}
{% radio blue, 蓝色 %}
  • HTML页面用法
1
2
3
4
5
6
7
<div class="checkbox yellow checked"><input type="checkbox" checked="checked"><p>黄色+默认选中</p></div>
<div class="checkbox red checked"><input type="checkbox" checked="checked"><p>红色+默认选中</p></div>
<div class="checkbox cyan checked"><input type="checkbox" checked="checked"><p>青色+默认选中</p></div>
<div class="checkbox blue checked"><input type="checkbox" checked="checked"><p>蓝色+默认选中</p></div>
<div class="checkbox plus grenn checked"><input type="checkbox" checked="checked"><p>增加</p></div>
<div class="checkbox minus yellow checked"><input type="checkbox" checked="checked"><p>减少</p></div>
<div class="checkbox times red checked"><input type="checkbox" checked="checked"><p></p></div>
1
2
3
4
<div class="checkbox yellow checked"><input type="radio" checked="checked"><p>黄色+默认选中</p></div>
<div class="checkbox red checked"><input type="radio" checked="checked"><p>红色+默认选中</p></div>
<div class="checkbox cyan checked"><input type="radio" checked="checked"><p>青色+默认选中</p></div>
<div class="checkbox blue checked"><input type="radio" checked="checked"><p>蓝色+默认选中</p></div>

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
[data-theme="dark"] .checkbox {
filter: brightness(0.7);
}

.checkbox {
display: flex;
align-items: center;
}

.checkbox input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
position: relative;
height: 16px;
width: 16px;
transition: all 0.15s ease-out 0s;
cursor: pointer;
display: inline-block;
outline: none;
border-radius: 2px;
flex-shrink: 0;
margin-right: 8px;
}

.checkbox input[type="checkbox"]:before,
.checkbox input[type="checkbox"]:after {
position: absolute;
content: "";
background: #fff;
}

.checkbox input[type="checkbox"]:before {
left: 1px;
top: 5px;
width: 0;
height: 2px;
transition: all 0.2s ease-in;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

.checkbox input[type="checkbox"]:after {
right: 7px;
bottom: 3px;
width: 2px;
height: 0;
transition: all 0.2s ease-out;
transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transition-delay: 0.25s;
}

.checkbox input[type="checkbox"]:checked:before {
left: 0;
top: 7px;
width: 6px;
height: 2px;
}

.checkbox input[type="checkbox"]:checked:after {
right: 3px;
bottom: 1px;
width: 2px;
height: 10px;
}

.checkbox.minus input[type="checkbox"]:before {
transform: rotate(0);
left: 1px;
top: 5px;
width: 0;
height: 2px;
}

.checkbox.minus input[type="checkbox"]:after {
transform: rotate(0);
left: 1px;
top: 5px;
width: 0;
height: 2px;
}

.checkbox.minus input[type="checkbox"]:checked:before {
left: 1px;
top: 5px;
width: 10px;
height: 2px;
}

.checkbox.minus input[type="checkbox"]:checked:after {
left: 1px;
top: 5px;
width: 10px;
height: 2px;
}

.checkbox.plus input[type="checkbox"]:before {
transform: rotate(0);
left: 1px;
top: 5px;
width: 0;
height: 2px;
}

.checkbox.plus input[type="checkbox"]:after {
transform: rotate(0);
left: 5px;
top: 1px;
width: 2px;
height: 0;
}

.checkbox.plus input[type="checkbox"]:checked:before {
left: 1px;
top: 5px;
width: 10px;
height: 2px;
}

.checkbox.plus input[type="checkbox"]:checked:after {
left: 5px;
top: 1px;
width: 2px;
height: 10px;
}

.checkbox.times input[type="checkbox"]:before {
transform: rotate(45deg);
left: 3px;
top: 1px;
width: 0;
height: 2px;
}

.checkbox.times input[type="checkbox"]:after {
transform: rotate(135deg);
right: 3px;
top: 1px;
width: 0;
height: 2px;
}

.checkbox.times input[type="checkbox"]:checked:before {
left: 1px;
top: 5px;
width: 10px;
height: 2px;
}

.checkbox.times input[type="checkbox"]:checked:after {
right: 1px;
top: 5px;
width: 10px;
height: 2px;
}

.checkbox input[type="radio"] {
border-radius: 50%;
}

.checkbox input[type="radio"]:before {
content: "";
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
margin: 2px;
transform: scale(0);
transition: all 0.25s ease-out;
}

.checkbox input[type="radio"]:checked:before {
transform: scale(1);
}

.checkbox input {
border: 2px solid #2196f3;
}

.checkbox input[type="checkbox"]:checked {
background: #2196f3;
}

.checkbox input[type="radio"]:checked:before {
background: #2196f3;
}

.checkbox.red input {
border-color: #fe5f58;
}

.checkbox.red input[type="checkbox"]:checked {
background: #fe5f58;
}

.checkbox.red input[type="radio"]:checked:before {
background: #fe5f58;
}

.checkbox.green input {
border-color: #3dc550;
}

.checkbox.green input[type="checkbox"]:checked {
background: #3dc550;
}

.checkbox.green input[type="radio"]:checked:before {
background: #3dc550;
}

.checkbox.yellow input {
border-color: #ffbd2b;
}

.checkbox.yellow input[type="checkbox"]:checked {
background: #ffbd2b;
}

.checkbox.yellow input[type="radio"]:checked:before {
background: #ffbd2b;
}

.checkbox.cyan input {
border-color: #1bcdfc;
}

.checkbox.cyan input[type="checkbox"]:checked {
background: #1bcdfc;
}

.checkbox.cyan input[type="radio"]:checked:before {
background: #1bcdfc;
}

.checkbox.blue input {
border-color: #2196f3;
}

.checkbox.blue input[type="checkbox"]:checked {
background: #2196f3;
}

.checkbox.blue input[type="radio"]:checked:before {
background: #2196f3;
}

.checkbox p {
display: inline-block;
margin-top: 2px !important;
margin-bottom: 0 !important;
}

小标签设置

1
<p class='div-border [颜色|方向加粗]'>你的文字</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- note语法示例 -->
<p class='div-border green'>绿色</p>
<p class='div-border red'>红色</p>
<p class='div-border yellow'>黄色</p>
<p class='div-border grey'>灰色</p>
<p class='div-border blue'>蓝色</p>

<!-- 小tag标签语法示例 -->
<span class="inline-tag red">红色小标签</span>
<span class="inline-tag green">绿色小标签</span>
<span class="inline-tag blue">蓝色小标签</span>
<span class="inline-tag yellow">黄色小标签</span>
<span class="inline-tag grey">灰色小标签</span>

<!-- 加粗案例 -->
<p class='div-border green left right'>绿色</p>

绿色

红色

黄色

灰色

蓝色

红色小标签
绿色小标签
蓝色小标签
黄色小标签
灰色小标签

绿色

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
[data-theme="dark"] span.inline-tag {
color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] span.inline-tag {
filter: brightness(0.7);
}

span.inline-tag {
display: inline;
padding: 0.2em 0.6em 0.3em;
font-size: 90%;
font-weight: 400;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.1rem;
border-radius: 6px;
background-color: var(--Color);
}

.font5 {
display: block;
width: 100%;
text-align: left;
font-weight: 500;
line-height: 32px;
border-left-color: #767676;
background: #f6f6f6;
}

p.red,
span.red {
--Color: rgb(233, 30, 100);
--ColorA: rgba(233, 30, 100, 0.2);
}

p.green,
span.green {
--Color: rgb(139, 195, 74);
--ColorA: rgba(139, 195, 74, 0.2);
}

p.blue,
span.blue {
--Color: rgb(3, 169, 244);
--ColorA: rgba(3, 169, 244, 0.2);
}

p.yellow,
span.yellow {
--Color: rgb(255, 193, 7);
--ColorA: rgba(255, 193, 7, 0.2);
}

p.grey,
span.grey {
--Color: rgb(76, 76, 76);
--ColorA: rgba(76, 76, 76, 0.2);
}

p.div-border {
padding: 10px;
border: 1px solid var(--Color, #333);
border-radius: 0.4rem;
background-color: var(--ColorA, transparent);
}

p.left {
border-left-width: 5px;
border-left-color: var(--Color);
}

p.bottom {
border-bottom-width: 5px;
border-bottom-color: var(--Color);
}

p.right {
border-right-width: 5px;
border-right-color: var(--Color);
}

p.top {
border-top-width: 5px;
border-top-color: var(--Color);
}

上标式标签

为简单的一句话提供的简便写法。

  • 配合font-awesome-animation 的 css 样式,直接中类名中添加即可,相关动画可以查看动画特效
1
2
3
<div class="tip [参数] [动画]">
<p>文本内容</p>
</div>
1
2
3
{% textTips [参数] [动画] %}

{% endtextTips %}
1
2
3
4
5
6
7
[参数]
不填默认为 info
warning 黄色叹号
success 绿色打钩
error 红色禁止
[动画]
参考动画特效
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
<div class="tip">
<p>为简单的一句话提供的简便写法。</p>
</div>

<div class="tip success">
<p>为简单的一句话提供的简便写法。</p>
</div>

<div class="tip error">
<p>为简单的一句话提供的简便写法。</p>
</div>

<div class="tip warning">
<p>为简单的一句话提供的简便写法。</p>
</div>

<div class="tip wtgo">
<p>为简单的一句话提供的简便写法。</p>
</div>

<div class="tip ban">
<p>为简单的一句话提供的简便写法。</p>
</div>

<div class="tip home">
<p>为简单的一句话提供的简便写法。</p>
</div>

<div class="tip important">
<p>为简单的一句话提供的简便写法。</p>
</div>

<div class="tip ref">
<p>为简单的一句话提供的简便写法。</p>
</div>
<div class="tip ffa">
<p>为简单的一句话提供的简便写法。</p>
</div>

<div class="tip key">
<p>为简单的一句话提供的简便写法。</p>
</div>

<div class="tip socd">
<p>为简单的一句话提供的简便写法。</p>
</div>

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- On DOM load(当页面加载时显示动画)-->

<div class="tip faa-horizontal animated">
<p>为简单的一句话提供的简便写法。</p>
</div>

<div class="tip success faa-flash animated">
<p>为简单的一句话提供的简便写法。</p>
</div>

<!-- On hover(当鼠标悬停时显示动画)-->


<div class="tip faa-horizontal animated-hover">
<p>为简单的一句话提供的简便写法。</p>
</div>

<div class="tip success faa-flash animated-hover">
<p>为简单的一句话提供的简便写法。</p>
</div>
  • On DOM load(当页面加载时显示动画)

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

  • On hover(当鼠标悬停时显示动画)

为简单的一句话提供的简便写法。

为简单的一句话提供的简便写法。

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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
.tip {
position: relative;
color: #fff;
background: #20a0ff;
background: -webkit-gradient(
linear,
left top,
right top,
from(#20a0ff),
to(#20b8ff)
);
background: -webkit-linear-gradient(left, #20a0ff, #20b8ff);
background: linear-gradient(90deg, #20a0ff, #20b8ff);
padding: 6px 20px;
border-radius: 10px;
-webkit-box-shadow: 0 3px 5px rgba(32, 160, 255, 0.5);
box-shadow: 0 3px 5px rgba(32, 160, 255, 0.5);
margin-bottom: 20px;
}

.tip p {
margin: 5px 0 !important;
}

.tip:before {
background: #20a0ff;
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#0092ff),
to(#20b8ff)
);
background: -webkit-linear-gradient(bottom, #0092ff, #20b8ff);
background: linear-gradient(0deg, #0092ff, #20b8ff);
border-radius: 50%;
color: #fff;
content: "\f129";
font-size: 12px;
position: absolute;
width: 24px;
height: 24px;
line-height: 24.5px;
left: -12px;
top: -12px;
-webkit-box-shadow: 0 0 0 2.5px #fff;
box-shadow: 0 0 0 2.5px #fff;
font-weight: 600;
font-family: "Font Awesome 5 Free";
text-align: center;
}

.btn,
.getit a {
position: relative;
}

.well .tip:before {
-webkit-box-shadow: 0 0 0 2.5px #f7f8f9;
box-shadow: 0 0 0 2.5px #f7f8f9;
}

.tip ol {
margin: 0;
}

.tip.success {
background: #61be33;
background: -webkit-gradient(
linear,
left top,
right top,
from(#61be33),
to(#8fce44)
);
background: -webkit-linear-gradient(left, #61be33, #8fce44);
background: linear-gradient(90deg, #61be33, #8fce44);
text-shadow: 0 -1px #61be33;
-webkit-box-shadow: 0 3px 5px rgba(104, 195, 59, 0.5);
box-shadow: 0 3px 5px rgba(104, 195, 59, 0.5);
}

.tip.success:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#52bb1d),
to(#95d34b)
);
background: -webkit-linear-gradient(bottom, #52bb1d, #95d34b);
background: linear-gradient(0deg, #52bb1d, #95d34b);
content: "\f00c";
text-shadow: 0 -1px #61be33;
}

.tip.warning {
background: #ff953f;
background: -webkit-gradient(
linear,
left top,
right top,
from(#ff953f),
to(#ffb449)
);
background: -webkit-linear-gradient(left, #ff953f, #ffb449);
background: linear-gradient(90deg, #ff953f, #ffb449);
text-shadow: 0 -1px #ff953f;
-webkit-box-shadow: 0 3px 5px rgba(255, 154, 73, 0.5);
box-shadow: 0 3px 5px rgba(255, 154, 73, 0.5);
}

.tip.warning:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#ff8f35),
to(#ffc149)
);
background: -webkit-linear-gradient(bottom, #ff8f35, #ffc149);
background: linear-gradient(0deg, #ff8f35, #ffc149);
content: "\f12a";
text-shadow: 0 -1px #ff953f;
}

.tip.error {
background: #ff4949;
background: -webkit-gradient(
linear,
left top,
right top,
from(#ff4949),
to(#ff7849)
);
background: -webkit-linear-gradient(left, #ff4949, #ff7849);
background: linear-gradient(90deg, #ff4949, #ff7849);
text-shadow: 0 -1px #ff4949;
-webkit-box-shadow: 0 3px 5px rgba(255, 73, 73, 0.5);
box-shadow: 0 3px 5px rgba(255, 73, 73, 0.5);
}

.tip.error:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#ff3838),
to(#ff7849)
);
background: -webkit-linear-gradient(bottom, #ff3838, #ff7849);
background: linear-gradient(0deg, #ff3838, #ff7849);
content: "\f00d";
text-shadow: 0 -1px #ff4949;
}

.tip.wtgo {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#3d8b48),
to(#477837)
);
background: -webkit-linear-gradient(bottom, #3c3, #459431);
background: linear-gradient(530deg, #78ca33, #25822c);
content: "\f00d";
text-shadow: 0 -1px #4cf706;
}
.tip.wtgo:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#3c0),
to(#3c0)
);
background: -webkit-linear-gradient(bottom, #3c3, #459431);
background: linear-gradient(776deg, #78ca33, #25822c);
content: "\f0e7";
text-shadow: 0 -1px #4cf706;
}
.tip.ban {
background: #ff4949;
background: -webkit-gradient(
linear,
left top,
right top,
from(#ff4949),
to(#ff3443)
);
background: -webkit-linear-gradient(left, #ff4949, #ff1022);
background: linear-gradient(90deg, #ff4949, #f03b49);
text-shadow: 0 -1px #ff4949;
-webkit-box-shadow: 0 3px 5px rgba(255, 73, 73, 0.5);
box-shadow: 0 3px 5px rgba(255, 73, 73, 0.5);
}
.tip.ban:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#ff3838),
to(#ce4617)
);
background: -webkit-linear-gradient(bottom, #ff3838, #d23e49);
background: linear-gradient(0deg, #ff3838, #ff1022);
content: "\f05e";
text-shadow: 0 -1px #ff4949;
}
.tip.home {
background: #15e5ff;
background: -webkit-gradient(
linear,
left top,
right top,
from(#5bc6d4) to(#0ec0ef)
);
background: -webkit-linear-gradient(left, #0ec0ef, #80e0f9);
background: linear-gradient(90deg, #0ec0ef, #80e0f7);
text-shadow: 0 -1px #0ec0ef;
-webkit-box-shadow: 0 3px 5px #01caff;
box-shadow: 0 3px 5px #01caff;
}
.tip.home:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
form(#0ec0ee) to(#0ee0cc)
);
background: -webkit-linear-gradient(bottom, #0ec0ee, #0ec2ee);
background: linear-gradient(0deg, #0ec0ee, #0ec0ea);
content: "\f015";
text-shadow: 0 -1px #0ec0ea;
}
.tip.important {
background: #f3a700;
background: -webkit-gradient(
linear,
left top,
right top,
from(#ffbd2b),
to(#ffbd2b)
);
background: -webkit-linear-gradient(left, #ffbd2b, #ffd26f);
background: linear-gradient(290deg, #ef6e6e, #ffb000);
text-shadow: 0 -1px #a97a12;
-webkit-box-shadow: 0 3px 5px #ffb000;
box-shadow: 0 3px 5px #ffb000;
}
.tip.important:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#ff3838),
to(#ffbd2b)
);
background: -webkit-linear-gradient(bottom, #ff3838, #ffbd2b);
background: linear-gradient(270deg, #ffbd2b, #f5626d);
content: "\f129";
text-shadow: 0 -1px #ffbd2b;
}
.tip.ref {
background: #00a9ff;
background: -webkit-gradient(
linear,
left top,
right top,
from(#51a7bd33),
to(#c7eef9)
);
background: -webkit-linear-gradient(left, #53cff1, #2e9fbd);
background: linear-gradient(230deg, #47c0e0, #2dc342);
text-shadow: 0 -1px #1bcdfc;
-webkit-box-shadow: 0 3px 5px #1bcdfc;
box-shadow: 0 3px 5px #20b1ad;
}
.tip.ref:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#00c3f7),
to(#88d3e6)
);
background: -webkit-linear-gradient(bottom, #83e5ff, #0aa8d2);
background: linear-gradient(270deg, #40c0e2, #3dc550);
content: "\f021";
text-shadow: 0 -1px #17cfff;
}
.tip.ffa {
background: #1502ff;
background: -webkit-gradient(
linear,
left top,
right top,
from(#51a7bd33),
to(#8379ff)
);
background: -webkit-linear-gradient(left, #5246e2, #5246e2);
background: linear-gradient(230deg, #40c0e2, #5247e2);
text-shadow: 0 -1px #8278fd;
-webkit-box-shadow: 0 3px 5px #4037a7;
box-shadow: 1 3px 5px #5e52ec;
}
.tip.ffa:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#3020f3),
to(#b1abf5)
);
background: -webkit-linear-gradient(bottom, #5246e2, #5246e2);
background: linear-gradient(560deg, #40c0e2, #5246e2);
content: "\f085";
text-shadow: 0 -1px #098cf5;
}
.tip.key {
background: #25c33b;
background: -webkit-gradient(
linear,
left top,
right top,
from(#51a7bd33),
to(#8379ff)
);
background: -webkit-linear-gradient(left, #648798, #90a4ae);
background: linear-gradient(230deg, #90a4ae, #b7a7a7);
text-shadow: 0 -1px #c1c0d4;
-webkit-box-shadow: 0 3px 5px #d3d2de;
box-shadow: 1 3px 5px #d5d4de;
}
.tip.key:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#dddce8),
to(#b1abf5)
);
background: -webkit-linear-gradient(bottom, #5246e2, #5246e2);
background: linear-gradient(560deg, #bccdd2, #cfced4);
content: "\f084";
text-shadow: 0 -1px #a9b2b9;
}
.tip.socd {
background: #25c33b;
background: -webkit-gradient(
linear,
left top,
right top,
from(#51a7bd33),
to(#8379ff)
);
background: -webkit-linear-gradient(left, #648798, #90a4ae);
background: linear-gradient(230deg, #ffaa0d, #deb455);
text-shadow: 0 -1px #c1c0d4;
-webkit-box-shadow: 0 3px 5px #d3d2de;
box-shadow: 1 3px 5px #d5d4de;
}
.tip.socd:before {
background: -webkit-gradient(
linear,
left bottom,
left top,
from(#dddce8),
to(#b1abf5)
);
background: -webkit-linear-gradient(bottom, #5246e2, #5246e2);
background: linear-gradient(560deg, #f9ae07, #ffb615);
content: "\f0f3";
text-shadow: 0 -1px #ffb81b;
}

[data-theme="dark"] .tip {
filter: brightness(0.7);
}

富文本按钮

官方文档:https://volantis.js.org/v4/tag-plugins/

1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}
  • 样式参数位置可以写图片样式、布局方式,多个样式参数用空格隔开
  • 布局方式默认为自动宽度,适合视野内只有一两个的情况
参数 含义
wide 宽一点的按钮
fill 填充布局,自动铺满至少一行,多了会换行。
center 居中,按钮之间是固定间距。
around 居中分散
grid2 等宽最多 2 列,屏幕变窄会适当减少列数。
grid3 等宽最多 3 列,屏幕变窄会适当减少列数。
grid4 等宽最多 4 列,屏幕变窄会适当减少列数。
grid5 等宽最多 5 列,屏幕变窄会适当减少列数。
  • 增加文字样式,可以在容器内增加 <b>标题</b><p>描述文字</p>
  • 如果需要显示类似「团队成员」之类的一组含有头像的链接:
1
2
3
4
5
6
7
{% btns circle grid5 %}
{% cell 小李博客, https://xiaoliblog.cn, https://cdn.jsdelivr.net/gh/xiaoliblog/image@6b5e7ef72be1c8973d94e5a9c49accbf775ad820/2021/02/01/c485da031fe0e464d04eaba8a66c4a8f.png %}
{% cell 小李博客, https://xiaoliblog.cn, https://cdn.jsdelivr.net/gh/xiaoliblog/image@6b5e7ef72be1c8973d94e5a9c49accbf775ad820/2021/02/01/c485da031fe0e464d04eaba8a66c4a8f.png %}
{% cell 小李博客, https://xiaoliblog.cn, https://cdn.jsdelivr.net/gh/xiaoliblog/image@6b5e7ef72be1c8973d94e5a9c49accbf775ad820/2021/02/01/c485da031fe0e464d04eaba8a66c4a8f.png %}
{% cell 小李博客, https://xiaoliblog.cn, https://cdn.jsdelivr.net/gh/xiaoliblog/image@6b5e7ef72be1c8973d94e5a9c49accbf775ad820/2021/02/01/c485da031fe0e464d04eaba8a66c4a8f.png %}
{% cell 小李博客, https://xiaoliblog.cn, https://cdn.jsdelivr.net/gh/xiaoliblog/image@6b5e7ef72be1c8973d94e5a9c49accbf775ad820/2021/02/01/c485da031fe0e464d04eaba8a66c4a8f.png %}
{% endbtns %}
  • 或者含有图标的按钮:
1
2
3
4
{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}
  • 圆形图标 + 标题 + 描述 + 图片 + 网格 5 列 + 居中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% btns circle center grid5 %}
<a href='https://apps.apple.com/cn/app/heart-mate-pro-hrm-utility/id1463348922?ls=1'>
<i class='fab fa-apple'></i>
<b>心率管家</b>
{% p red, 专业版 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_pro.png'>
</a>
<a href='https://apps.apple.com/cn/app/heart-mate-lite-hrm-utility/id1475747930?ls=1'>
<i class='fab fa-apple'></i>
<b>心率管家</b>
{% p green, 免费版 %}
<img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/qrcode/heartmate_lite.png'>
</a>
{% endbtns %}
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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
[data-theme="dark"] div.btns {
filter: brightness(0.7);
}

[data-theme="dark"] div.btns a {
background: 0 0;
}

div.btns {
margin: 0 -8px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
overflow: visible;
line-height: 1.8;
}

div.btns,
div.btns p,
div.btns a {
font-size: 0.8125rem;
color: #555;
}

div.btns b {
font-size: 0.875rem;
}

div.btns.wide > a {
padding-left: 32px;
padding-right: 32px;
}

div.btns.fill > a {
flex-grow: 1;
width: auto;
}

div.btns.around {
justify-content: space-around;
}

div.btns.center {
justify-content: center;
}

div.btns.grid2 > a {
width: calc(100% / 2 - 16px);
}

@media screen and (max-width: 1024px) {
div.btns.grid2 > a {
width: calc(100% / 2 - 16px);
}
}

@media screen and (max-width: 768px) {
div.btns.grid2 > a {
width: calc(100% / 2 - 16px);
}
}

@media screen and (max-width: 500px) {
div.btns.grid2 > a {
width: calc(100% / 1 - 16px);
}
}

div.btns.grid3 > a {
width: calc(100% / 3 - 16px);
}

@media screen and (max-width: 1024px) {
div.btns.grid3 > a {
width: calc(100% / 3 - 16px);
}
}

@media screen and (max-width: 768px) {
div.btns.grid3 > a {
width: calc(100% / 3 - 16px);
}
}

@media screen and (max-width: 500px) {
div.btns.grid3 > a {
width: calc(100% / 1 - 16px);
}
}

div.btns.grid4 > a {
width: calc(100% / 4 - 16px);
}

@media screen and (max-width: 1024px) {
div.btns.grid4 > a {
width: calc(100% / 3 - 16px);
}
}

@media screen and (max-width: 768px) {
div.btns.grid4 > a {
width: calc(100% / 3 - 16px);
}
}

@media screen and (max-width: 500px) {
div.btns.grid4 > a {
width: calc(100% / 2 - 16px);
}
}

div.btns.grid5 > a {
width: calc(100% / 5 - 16px);
}

@media screen and (max-width: 1024px) {
div.btns.grid5 > a {
width: calc(100% / 4 - 16px);
}
}

@media screen and (max-width: 768px) {
div.btns.grid5 > a {
width: calc(100% / 3 - 16px);
}
}

@media screen and (max-width: 500px) {
div.btns.grid5 > a {
width: calc(100% / 2 - 16px);
}
}

div.btns a {
transition: all 0.28s ease;
-moz-transition: all 0.28s ease;
-webkit-transition: all 0.28s ease;
-o-transition: all 0.28s ease;
margin: 8px;
margin-top: calc(1.25 * 16px + 32px);
min-width: 120px;
font-weight: bold;
display: flex;
justify-content: flex-start;
align-content: center;
align-items: center;
flex-direction: column;
padding: 8px;
text-align: center;
background: #f6f6f6;
border-radius: 4px;
}

div.btns a > img:first-child,
div.btns a > i:first-child {
transition: all 0.28s ease;
-moz-transition: all 0.28s ease;
-webkit-transition: all 0.28s ease;
-o-transition: all 0.28s ease;
height: 64px;
width: 64px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
margin: 16px 8px 4px 8px;
margin-top: calc(-1.25 * 16px - 32px);
border: 2px solid #fff;
background: #fff;
line-height: 60px;
font-size: 28px;
}

div.btns a > img:first-child.auto,
div.btns a > i:first-child.auto {
width: auto;
}

div.btns a > i:first-child {
color: #fff;
background: #2196f3;
}

div.btns a p,
div.btns a b {
margin: 0.25em;
font-weight: normal;
line-height: 1.25;
word-wrap: break-word;
}

div.btns a b {
font-weight: bold;
line-height: 1.3;
}

div.btns a img {
margin: 0.4em auto;
}

div.btns a:not([href]) {
cursor: default;
color: inherit;
}

div.btns a[href]:hover {
background: rgba(255, 87, 34, 0.15);
}

div.btns a[href]:hover,
div.btns a[href]:hover b {
color: #ff5722;
}

div.btns a[href]:hover > img:first-child,
div.btns a[href]:hover > i:first-child {
transform: scale(1.1) translateY(-8px);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}

div.btns a[href]:hover > i:first-child {
background: #ff5722;
}

div.btns.circle a > img:first-child,
div.btns.circle a > i:first-child {
border-radius: 32px;
}

div.btns.rounded a > img:first-child,
div.btns.rounded a > i:first-child {
border-radius: 16px;
}

Folding

查看图片测试

查看默认打开的折叠框

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

查看代码测试

查看列表测试

  • haha
  • hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

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

![](https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% 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/xiaoliblog/image@e72b6ce51e3fd88307f7f12e487747020bfb921c/2021/04/22/c02b2a29dd05fac30303d16e44d39c65.png)

{% endfolding %}

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

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

{% endfolding %}

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

{% endfolding %}

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

- haha
- hehe

{% endfolding %}

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

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

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

hahaha <span><img src='hhttps://cdn.jsdelivr.net/gh/xiaoliblog/image@e72b6ce51e3fd88307f7f12e487747020bfb921c/2021/04/22/c02b2a29dd05fac30303d16e44d39c65.png' style='height:24px'></span>

{% endfolding %}

{% endfolding %}

{% endfolding %}
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
[data-theme="dark"] details {
filter: brightness(0.7);
}

details {
display: block;
padding: 16px;
margin: 0.5rem 0;
border-radius: 4px;
font-size: 0.7375rem;
transition: all 0.28s ease;
-moz-transition: all 0.28s ease;
-webkit-transition: all 0.28s ease;
-o-transition: all 0.28s ease;
border: 1px solid #f6f6f6;
}

details summary {
cursor: pointer;
padding: 16px;
margin: -16px;
border-radius: 4px;
color: rgba(85, 85, 85, 0.7);
font-size: 0.7375rem;
font-weight: bold;
position: relative;
line-height: normal;
}

details summary > p,
details summary > h1,
details summary > h2,
details summary > h3,
details summary > h4,
details summary > h5,
details summary > h6 {
display: inline;
border-bottom: none !important;
}

details summary:hover {
color: #555;
}

details summary:hover:after {
position: absolute;
content: "+";
text-align: center;
top: 50%;
transform: translateY(-50%);
right: 16px;
}

details > summary {
background: #f6f6f6;
}

details[blue] {
border-color: #e8f4fd;
}

details[blue] > summary {
background: #e8f4fd;
}

details[cyan] {
border-color: #e8fafe;
}

details[cyan] > summary {
background: #e8fafe;
}

details[green] {
border-color: #ebf9ed;
}

details[green] > summary {
background: #ebf9ed;
}

details[yellow] {
border-color: #fff8e9;
}

details[yellow] > summary {
background: #fff8e9;
}

details[red] {
border-color: #feefee;
}

details[red] > summary {
background: #feefee;
}

details[open] {
border-color: rgba(85, 85, 85, 0.2);
}

details[open] > summary {
border-bottom: 1px solid rgba(85, 85, 85, 0.2);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

details[open][blue] {
border-color: rgba(33, 150, 243, 0.3);
}

details[open][blue] > summary {
border-bottom-color: rgba(33, 150, 243, 0.3);
}

details[open][cyan] {
border-color: rgba(27, 205, 252, 0.3);
}

details[open][cyan] > summary {
border-bottom-color: rgba(27, 205, 252, 0.3);
}

details[open][green] {
border-color: rgba(61, 197, 80, 0.3);
}

details[open][green] > summary {
border-bottom-color: rgba(61, 197, 80, 0.3);
}

details[open][yellow] {
border-color: rgba(255, 189, 43, 0.3);
}

details[open][yellow] > summary {
border-bottom-color: rgba(255, 189, 43, 0.3);
}

details[open][red] {
border-color: rgba(254, 95, 88, 0.3);
}

details[open][red] > summary {
border-bottom-color: rgba(254, 95, 88, 0.3);
}

details[open] > summary {
color: #555;
margin-bottom: 0;
}

details[open] > summary:hover:after {
content: "-";
}

details[open] > div.content {
padding: 16px;
margin: -16px;
margin-top: 0;
}

details[open] > div.content p > a:hover {
text-decoration: underline;
}

ElementUI

  • 先引入样式
1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zykjofficial/zykjresource@master/css/elementui.css">

密码样式的文本

1
<psw>你要隐藏的内容</psw>
1
<psw>你能看见我吗?</psw>

你能看见我吗?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#article-container psw:hover {
color: #333;
background: none;
}

#article-container psw {
color: transparent;
background: #666;
border-radius: 2px;
transition: all 0.28s ease;
-moz-transition: all 0.28s ease;
-webkit-transition: all 0.28s ease;
-o-transition: all 0.28s ease;
}

[data-theme="dark"] #article-container psw:hover {
color: #fff;
filter: brightness(0.7);
}

扩展功能

BiliBili 视频播放器

  • 安装 hexo-tag-bilibili插件
1
npm install --save hexo-tag-bilibili

安装插件后可能需要hexo clean清除一下缓存才有效果

  • 只能写 AID 号 如 78542237,如果为BVID号 如BV1nJ411v7iM,则需要转换一下
  • 哔哩哔哩 BVID、AID 互转工具互转:https://bv-av.cn/get-bv-av
1
2
3
{% bilibili [av_id] %}
or
{% bilibili [av_id] [page] %}
1
{% bilibili 78542237 %}

按键

ctrl+alt+del

1
<kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*键盘样式 来自 https://blog.hclonely.com/ */
kbd {
display: inline-block;
color: #666;
font: bold 9pt arial;
text-decoration: none;
text-align: center;
padding: 2px 5px;
margin: 0 5px;
background: #eff0f2;
-moz-border-radius: 4px;
border-radius: 4px;
border-top: 1px solid #f5f5f5;
-webkit-box-shadow: inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9,
0 1px 2px #333;
-moz-box-shadow: inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9,
0 1px 2px #333;
-webkit-box-shadow: inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9,
0 1px 2px #333;
box-shadow: inset 0 0 20px #e8e8e8, 0 1px 0 #c3c3c3, 0 1px 0 #c9c9c9,
0 1px 2px #333;
text-shadow: 0 1px 0 #f5f5f5;
}

动画特效

1
2
<i class="字体图标 动画名"></i>
<i class="fas fa-rocket faa-rising animated"></i>
On DOM load On hover Icon
faa-wrench animated faa-wrench animated-hover fas fa-wrench
faa-ring animated faa-ring animated-hover fas fa-bell
faa-horizontal animated faa-horizontal animated-hover fas fa-envelope
faa-vertical animated faa-vertical animated-hover fas fa-thumbs-up
faa-flash animated faa-flash animated-hover fas fa-thumbs-up
faa-bounce animated faa-bounce animated-hover fas fa-thumbs-up
faa-spin animated faa-spin animated-hover fas fa-spinner
faa-float animated faa-float animated-hover fas fa-plane
faa-pulse animated faa-pulse animated-hover fas fa-heart
faa-shake animated faa-shake animated-hover fas fa-envelope
faa-tada animated faa-tada animated-hover fas fa-trophy
faa-passing animated faa-passing animated-hover fas fa-space-shuttle
faa-passing-reverse animated faa-passing-reverse animated-hover fas fa-space-shuttle
faa-burst animated faa-burst animated-hover fas fa-circle
faa-falling animated faa-falling animated-hover fas fa-star
faa-rising animated faa-rising animated-hover fas fa-rocket
  • 然后在 DOM 元素的类名添加相应的动画即可
  • 例如网址导航栏可以写为主页: / || fas fa-home faa-wrench animated

时间线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% timeline 时间线标题 %}

{% timenode 时间节点(标题) %}

正文内容

{% endtimenode %}

{% timenode 时间节点(标题) %}

正文内容

{% endtimenode %}

{% endtimeline %}
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
{% timeline 升级小助手 %}

{% timenode 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) %}

1. 如果有 `hexo-lazyload-image` 插件,需要删除并重新安装最新版本,设置 `lazyload.isSPA: true`。
2. 2.x 版本的 css 和 js 不适用于 3.x 版本,如果使用了 `use_cdn: true` 则需要删除。
3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。
4. 2.x 版本的置顶 `top: true` 改为了 `pin: true`,并且同样适用于 `layout: page` 的页面。
5. 如果使用了 `hexo-offline` 插件,建议卸载,3.0 版本默认开启了 pjax 服务。

{% endtimenode %}

{% timenode 2020-05-15 [2.6.3 -> 2.6.6](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6) %}

不需要额外处理。

{% endtimenode %}

{% timenode 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) %}

1. 全局搜索 `seotitle` 并替换为 `seo_title`。
2. group 组件的索引规则有变,使用 group 组件的文章内,`group: group_name` 对应的组件名必须是 `group_name`。
2. group 组件的列表名优先显示文章的 `short_title` 其次是 `title`。

{% endtimenode %}

{% endtimeline %}

升级小助手

2020-07-24 2.6.6 -> 3.0

  1. 如果有 hexo-lazyload-image 插件,需要删除并重新安装最新版本,设置 lazyload.isSPA: true
  2. 2.x 版本的 css 和 js 不适用于 3.x 版本,如果使用了 use_cdn: true 则需要删除。
  3. 2.x 版本的 fancybox 标签在 3.x 版本中被重命名为 gallery 。
  4. 2.x 版本的置顶 top: true 改为了 pin: true,并且同样适用于 layout: page 的页面。
  5. 如果使用了 hexo-offline 插件,建议卸载,3.0 版本默认开启了 pjax 服务。

2020-05-15 2.6.3 -> 2.6.6

不需要额外处理。

2020-04-20 2.6.2 -> 2.6.3

  1. 全局搜索 seotitle 并替换为 seo_title
  2. group 组件的索引规则有变,使用 group 组件的文章内,group: group_name 对应的组件名必须是 group_name
  3. group 组件的列表名优先显示文章的 short_title 其次是 title
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
div.timenode {
position: relative;
}
div.timenode:before,
div.timenode:after {
content: "";
z-index: 1;
position: absolute;
background: rgba(68, 215, 182, 0.5);
width: 2px;
left: 7px;
}
div.timenode:before {
top: 0;
height: 6px;
}
div.timenode:after {
top: 26px;
height: calc(100% - 26px);
}
div.timenode:last-child:after {
height: calc(100% - 26px - 16px);
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
div.timenode .meta,
div.timenode .body {
max-width: calc(100% - 24px);
}
div.timenode .meta {
position: relative;
color: var(--tab-botton-color);
font-size: 0.375rem;
line-height: 32px;
height: 32px;
}
div.timenode .meta:before,
div.timenode .meta:after {
content: "";
position: absolute;
top: 8px;
z-index: 2;
}
div.timenode .meta:before {
background: rgba(68, 215, 182, 0.5);
width: 16px;
height: 16px;
border-radius: 8px;
}
div.timenode .meta:after {
background: #44d7b6;
margin-left: 2px;
margin-top: 2px;
width: 12px;
height: 12px;
border-radius: 6px;
transform: scale(0.5);
}
div.timenode .meta p {
font-weight: bold !important;
margin: 0 0 0 24px !important;
}
div.timenode .body {
margin: 4px 0 10px 24px;
padding: 10px;
border-radius: 12px;
background: #efeded;
display: inline-block;
}
div.timenode .body p:first-child {
margin-top: 0 !important;
}
div.timenode .body p:last-child {
margin-bottom: 0 !important;
}
div.timenode .body .highlight {
background: #fff7ea;
filter: grayscale(0%);
}
div.timenode .body .highlight figcaption {
background: #ffeed2;
}
div.timenode .body .highlight .gutter {
background: #ffedd0;
}
div.timenode:hover .meta {
color: #444;
}
div.timenode:hover .meta:before {
background: rgba(255, 87, 34, 0.5);
}
div.timenode:hover .meta:after {
background: #ff5722;
transform: scale(1);
}

[data-theme="dark"] div.timenode .body {
background: #2c2c2c;
}

[data-theme="dark"] div.timenode:hover .meta {
color: #ccd0d7;
}

[data-theme="dark"] div.timenode .meta {
color: rgba(255, 255, 255, 0.6);
}

[data-theme="dark"] div.timeline p.p.h2 {
color: rgba(255, 255, 255, 0.6);
}

github卡片

1
2
{% ghcard 用户名, 其它参数(可选) %}
{% ghcard 用户名/仓库, 其它参数(可选) %}
  • 更多参数可以参考:

  • 使用,分割各个参数。写法为:参数名=参数值。以下只写几个常用参数值。
参数名 取值 释义
hide stars,commits,prs,issues,contribs 隐藏指定统计
count_private true 将私人项目贡献添加到总提交计数中
show_icons true 显示图标
theme 请查阅Available Themes 主题
  • 用户信息卡片
1
2
3
4
5
| {% ghcard xaoxuu %} | {% ghcard xaoxuu, theme=vue %} |
| -- | -- |
| {% ghcard xaoxuu, theme=buefy %} | {% ghcard xaoxuu, theme=solarized-light %} |
| {% ghcard xaoxuu, theme=onedark %} | {% ghcard xaoxuu, theme=solarized-dark %} |
| {% ghcard xaoxuu, theme=algolia %} | {% ghcard xaoxuu, theme=calm %} |
  • 仓库信息卡片
1
2
3
4
5
| {% ghcard volantis-x/hexo-theme-volantis %} | {% ghcard volantis-x/hexo-theme-volantis, theme=vue %} |
| -- | -- |
| {% ghcard volantis-x/hexo-theme-volantis, theme=buefy %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-light %} |
| {% ghcard volantis-x/hexo-theme-volantis, theme=onedark %} | {% ghcard volantis-x/hexo-theme-volantis, theme=solarized-dark %} |
| {% ghcard volantis-x/hexo-theme-volantis, theme=algolia %} | {% ghcard volantis-x/hexo-theme-volantis, theme=calm %} |
  • 用户信息卡片
  • 仓库信息卡片
  • \source\css\_tags下新建ghcard.styl
1
2
3
4
5
6
7
8
9
10
a.ghcard
display: inline-block
line-height: 0

.md .ghcard-group
column-count: 2
column-gap: 0
margin: 0 0 - 16px * 0.5
.ghcard
margin: 16px * 0.5
  • \scripts\tag下新建ghcard.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
/**
* https://github.com/anuraghazra/github-readme-stats
*/

'use strict';

// {% ghcard volantis-x %}
// {% ghcard volantis-x/hexo-theme-volantis %}
hexo.extend.tag.register('ghcard', function(args) {
args = args.join(' ').split(', ');
let path = args[0].trim();
let card = '';
card += '<a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/' + path + '">';
let url = '';
if (path.includes('/')) {
// is repo
let ps = path.split('/');
url += 'https://github-readme-stats.vercel.app/api/pin/?username=' + ps[0] + "&repo=" + ps[1];
} else {
// is user
url += 'https://github-readme-stats.vercel.app/api/?username=' + path;
}
if (args.length > 1) {
for (let i = 1; i < args.length; i++) {
let tmp = args[i].trim();
url += "&" + tmp;
}
}
if (!url.includes('&show_owner=')) {
url += '&show_owner=true';
}
card += '<img src="' + url + '"/>';
card += '</a>';
return card;
});

hexo.extend.tag.register('ghcardgroup', function(args, content) {
let ret = '';
// wrap
ret += '<div class="ghcard-group">';
ret += content;
ret += '</div>';
return ret;
}, {ends: true});

注释 notation

1
{% nota [label] , [text] %}
  • label: 注释词汇
  • text:悬停显示的注解内容
1
{% nota 把鼠标移动到我上面试试 ,可以看到注解内容出现在顶栏 %}

把鼠标移动到我上面试试

  • \source\css\_tags下新建notaion.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
.nota
color: $a-link-color
text-decoration: none
word-wrap: break-word
transition: all .2s
overflow-wrap: break-word

&:hover
color: $light-blue

/*标题悬停显示文章描述*/
span.nota
&:hover
&:before
position: fixed
width:fit-content
margin:auto
left:0;
right:0
top:10%
border-radius: 10px
text-align: center
z-index: 100
content: attr(data-nota)
font-size: 20px
color: #fff
padding: 10px
background-color: rgba($theme-color,0.9)
[data-theme=dark]
span.nota
&:hover
&:before
background-color: rgba(#121212,0.8)
  • \scripts\tag下新建notation.js
1
2
3
4
5
6
7
8
9
10
11
'use strict';

function Nota(args) {
args = args.join(' ').split(',')
let p0 = args[0].trim()
let p1 = args[1].trim()
return `<span class='nota' data-nota='${p1}'>${p0}</span>`;
}

hexo.extend.tag.register('nota', Nota);
// {% nota 注释词汇 ,'注释内容,使用逗号间隔开了即可' %}