介绍

请注意: 未标明 Butterfly主题自带样式 的是DIY样式、确保Butterfly主题是最新版、否则部分样式可能没有、DIY样式源码查看选项

部分DIY 外挂标签教程 :https://zykj.js.org/posts/e55bad60/#tag外挂标签

我的魔改css: https://cdn.jsdelivr.net/gh/zykjofficial/zykjresource@master/css/zykjcss.css

标签外挂

原本的标签

注意:这是Butterfly主题自带样式

default 标签外挂

primary 标签外挂

success 标签外挂

danger 标签外挂

info 标签外挂

warning 标签外挂

自定义标签

red 标签外挂

quote 标签外挂

radiation 标签外挂

bug 标签外挂

idea 标签外挂

paperclip 标签外挂

todo 标签外挂

guide 标签外挂

download 标签外挂

message 标签外挂

up 标签外挂

undo 标签外挂

上标式标签

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

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

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

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

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

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

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

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

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

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

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

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

使用方法

原本、自定义标签

官方文档:https://butterfly.js.org/posts/4aa8abbe/#Note-Bootstrap-Callout

1
2
3
{% note 样式参数 %}
文本内容
{% endnote %}

上标式标签

1
2
3
<div class="tip 可加参数">
<p>文本内容</p>
</div>

原本、自定义标签

1
2
3
4
5
6
info	  蓝色叹号
warning 黄色叹号
done 绿色打钩
success 绿色打钩
error 红色禁止
danger 红色打叉

上标式标签

1
2
3
4
不填默认为 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
{% note default %}
default 标签外挂
{% endnote %}

{% note primary %}
primary 标签外挂
{% endnote %}

{% note success %}
success 标签外挂
{% endnote %}

{% note danger %}
danger 标签外挂
{% endnote %}

{% note info %}
info 标签外挂
{% endnote %}

{% note warning %}
warning 标签外挂
{% endnote %}

上标式标签

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
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
div.note.red::before {
content: "\f054";
}

div.note.quote {
background: #e8f4fd;
border-color: #2196f3;
}

div.note.quote::before {
color: #2196f3;
content: "\f10d";
}

div.note.radiation::before {
content: "\f7b9";
}

div.note.bug::before {
content: "\f188";
}

div.note.idea::before {
content: "\f0eb";
}

div.note.link::before {
content: "\f0c1";
}

div.note.paperclip::before {
content: "\f0c6";
}

div.note.todo::before {
content: "\f0ae";
}

div.note.message::before {
content: "\f4ad";
}

div.note.guide::before {
content: "\f277";
}

div.note.download::before {
content: "\f019";
}

div.note.up::before {
content: "\f102";
}

div.note.undo::before {
content: "\f2ea";
}

div.note.play::before {
content: "\f144";
}

div.note.message::before {
content: '\f4ad';
}

div.note.clear {
background: none;
border-color: none;
}

div.note.light {
background: #f6f6f6;
border-color: #aaa;
}

div.note.light::before {
color: #aaa;
}

div.note.gray {
background: #f6f6f6;
border-color: #767676;
}

div.note.gray::before {
color: #767676;
}

div.note.red {
background: #feefee;
border-color: #fe5f58;
}

div.note.red::before {
color: #fe5f58;
}

div.note.yellow {
background: #fff8e9;
border-color: #ffbd2b;
}

div.note.yellow::before {
color: #ffbd2b;
}

div.note.green {
background: #ebf9ed;
border-color: #3dc550;
}

div.note.green::before {
color: #3dc550;
}

div.note.cyan::before {
color: #1bcdfc;
}

div.note.blue::before {
color: #2196f3;
}

div.note.blue {
background: #e8f4fd;
border-color: #2196f3;
}

[data-theme="dark"] .note p{
color: #000;
}

上标式标签

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

文本段落

示例

在一段话中方便插入各种颜色的标签,包括:红色黄色绿色青色蓝色灰色

文档「开始」页面中的标题部分就是超大文字。

A Wonderful Theme for Hexo

使用方法

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

行内文本

1
{% span 样式参数, 文本内容 %}

独立段落

1
{% p 样式参数, 文本内容 %}

样式参数位置可以写颜色、大小和对齐方向,多个样式参数用空格隔开。

字体

1
logo, code

颜色

1
red, yellow, green, cyan, blue, gray

大小

1
small, h4, h3, h2, h1, large, huge, ultra

对齐方向

1
left, center, right

彩色文字

1
在一段话中方便插入各种颜色的标签,包括:{% span red, 红色 %}、{% span yellow, 黄色 %}、{% span green, 绿色 %}、{% span cyan, 青色 %}、{% span blue, 蓝色 %}、{% span gray, 灰色 %}。

超大文字

1
2
3
4
文档「开始」页面中的标题部分就是超大文字。

{% p center logo large, Volantis %}
{% p center small, A Wonderful Theme for Hexo %}
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
[data-theme="dark"] span.p {
filter: brightness(0.7);
}

p.p.subtitle {
font-weight: bold;
color: #2196f3;
padding-top: 1rem;
}

p.p.subtitle:first-child {
padding-top: 0.5rem;
}

span.p.code,
p.p.code {
font-family: Menlo, Monaco, monospace, courier, sans-serif;
}

span.p.left,
p.p.left {
display: block;
text-align: left;
}

span.p.center,
p.p.center {
display: block;
text-align: center;
}

span.p.right,
p.p.right {
display: block;
text-align: right;
}

span.p.small,
p.p.small {
font-size: 0.575rem;
}

span.p.large,
p.p.large {
font-size: 2rem;
line-height: 1.4;
}

span.p.huge,
p.p.huge {
font-size: 4rem;
line-height: 1.4;
}

span.p.ultra,
p.p.ultra {
font-size: 6rem;
line-height: 1.4;
}

span.p.small,
p.p.small,
span.p.large,
p.p.large,
span.p.huge,
p.p.huge,
span.p.ultra,
p.p.ultra {
font-family: UbuntuMono, "PingFang SC", "Microsoft YaHei", Helvetica, Arial,
Menlo, Monaco, monospace, sans-serif;
margin: 0;
padding: 0;
}

span.p.bold,
p.p.bold {
font-weight: bold;
}

span.p.h1,
p.p.h1 {
font-size: 1.625rem;
color: #555;
padding-top: 1rem;
}

span.p.h2,
p.p.h2 {
font-size: 1.375rem;
color: var(--font-color);
padding-top: 1rem;
border-bottom: 1px solid var(--hr-border);
}

span.p.h3,
p.p.h3 {
font-size: 1.25rem;
color: #2196f3;
padding-top: 1rem;
}

span.p.h4,
p.p.h4 {
font-size: 1.125rem;
color: #555;
padding-top: 1rem;
}

span.p.red,
p.p.red {
color: #fe5f58;
}

span.p.yellow,
p.p.yellow {
color: #ffbd2b;
}

span.p.green,
p.p.green {
color: #3dc550;
}

span.p.cyan,
p.p.cyan {
color: #1bcdfc;
}

span.p.blue,
p.p.blue {
color: #2196f3;
}

span.p.gray,
p.p.gray {
color: #666;
}

复选框

示例

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

使用方法

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

1
{% checkbox 样式参数(可选), 文本(支持简单md) %}

颜色

1
red, yellow, green, cyan, blue

样式

1
plus, minus, times

选中状态

1
checked

Checkbox

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, 叉 %}

Radio

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, 蓝色 %}
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;
}

富文本按钮

示例

使用方法

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

1
2
3
4
{% btns 样式参数 %}
{% cell 标题, 链接, 图片或者图标 %}
{% cell 标题, 链接, 图片或者图标 %}
{% endbtns %}

样式参数位置可以写图片样式、布局方式,多个样式参数用空格隔开。

圆角样式

默认为方形

1
rounded, circle

布局方式

默认为自动宽度,适合视野内只有一两个的情况。

参数含义
wide宽一点的按钮
fill填充布局,自动铺满至少一行,多了会换行。
center居中,按钮之间是固定间距。
around居中分散
grid2等宽最多2列,屏幕变窄会适当减少列数。
grid3等宽最多3列,屏幕变窄会适当减少列数。
grid4等宽最多4列,屏幕变窄会适当减少列数。
grid5等宽最多5列,屏幕变窄会适当减少列数。

增加文字样式

可以在容器内增加 <b>标题</b><p>描述文字</p>

如果需要显示类似「团队成员」之类的一组含有头像的链接:

1
2
3
4
5
6
7
8
example.md:
{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}

或者含有图标的按钮:

1
2
3
4
5
example.md:
{% 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
15
example.md:
{% 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
example.md:
{% btns circle grid5 %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% cell xaoxuu, https://xaoxuu.com, https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/avatar/avatar.png %}
{% endbtns %}

或者含有图标的按钮:

1
2
3
4
5
example.md:
{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% 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;
}

容器

Tab

注意:这是Butterfly主题自带样式

示例

This is Tab 1.

This is Tab 2.

This is Tab 3.

This is Tab 1.

This is Tab 2.

This is Tab 3.

This is Tab 1.

This is Tab 2.

This is Tab 3.

tab名字为第一个Tab

只有图标 没有Tab名字

名字+icon

使用方法

文档教程:https://butterfly.js.org/posts/4aa8abbe/#Tabs

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
{% tabs test1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

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

{% tabs test2, 3 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

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

{% tabs test3, -1 %}
<!-- tab -->
**This is Tab 1.**
<!-- endtab -->

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

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

{% tabs test4 %}
<!-- tab 第一个Tab -->
**tab名字为第一个Tab**
<!-- endtab -->

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

<!-- tab 炸弹@fas fa-bomb -->
**名字+icon**
<!-- endtab -->
{% endtabs %}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% tabs Unique name, [index] %}
<!-- tab [Tab caption] [@icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

Unique name : Unique name of tabs block tag without comma.
Will be used in #id's as prefix for each tab with their index numbers.
If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
Only for current url of post/page must be unique!
[index] : Index number of active tab.
If not specified, first tab (1) will be selected.
If index is -1, no tab will be selected. It's will be something like spoiler.
Optional parameter.
[Tab caption] : Caption of current tab.
If not caption specified, unique name with tab index suffix will be used as caption of tab.
If not caption specified, but specified icon, caption will empty.
Optional parameter.
[@icon] : FontAwesome icon name (full-name, look like 'fas fa-font')
Can be specified with or without space; e.g. 'Tab caption @icon' similar to 'Tab caption@icon'.
Optional parameter.

Folding

示例

查看图片测试

查看默认打开的折叠框

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

查看代码测试

查看列表测试

  • haha
  • hehe

查看嵌套测试

查看嵌套测试2

查看嵌套测试3

hahaha

使用方法

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

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

状态

1
状态填写 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/xaoxuu/cdn-wallpaper/abstract/41F215B9-261F-48B4-80B5-4E86E165259E.jpeg)

{% endfolding %}

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

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

{% endfolding %}

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

{% endfolding %}

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

- haha
- hehe

{% endfolding %}

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

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

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

hahaha <span><img src='https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/emoji/tieba/%E6%BB%91%E7%A8%BD.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;
}

Gallery相册图库

注意:这是Butterfly主题自带样式

示例

使用方法

1
2
3
4
5
<div class="gallery-group-main">
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
{% galleryGroup name description link img-url %}
</div>

name:图库名字
description:图库描述
link:连接到对应相册的地址
img-url:图库封面的地址

1
2
3
4
<div class="gallery-group-main">
{% galleryGroup '动漫' '我喜欢的动漫' '/Gallery/anime' https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/img/index.jpg %}
{% galleryGroup '风景' '欣赏美丽的风景' '/Gallery/landscape' https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg %}
</div>

注意:这是Butterfly主题自带样式

示例

使用方法

1
2
3
{% gallery %}
markdown 图片格式
{% endgallery %}
1
2
3
4
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
{% endgallery %}

Button

注意:这是Butterfly主题自带样式

示例

This is my website, click the button 卓越科技-
This is my website, click the button 卓越科技-
This is my website, click the button 卓越科技-
This is my website, click the button 卓越科技-
This is my website, click the 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
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
This is my website, click the button {% btn 'https://zykj.js.org',卓越科技- %}
This is my website, click the button {% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right %}
This is my website, click the button {% btn 'https://zykj.js.org',卓越科技-,,outline %}
This is my website, click the button {% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,larger %}

{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,block %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,block center larger %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,block right outline larger %}

{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,larger %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,blue larger %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,pink larger %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,red larger %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,purple larger %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,orange larger %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,green larger %}


<div class="btn-center">
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,outline larger %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,outline blue larger %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,outline pink larger %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,outline red larger %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,outline purple larger %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,outline orange larger %}
{% btn 'https://zykj.js.org',卓越科技-,far fa-hand-point-right,outline green larger %}
</div>

tag-hide

注意:这是Butterfly主题自带样式

Inline

示例

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

门里站着一个人?

使用方法

1
{% hideInline content,display,bg,color %}

content: 文本内容

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

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

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

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

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

Block

示例

使用方法

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

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

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

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

1
2
3
4
5
6
{% hideBlock 查看答案 %}
{% gallery %}
![](https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg)
![](https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg)
{% endgallery %}
{% endhideBlock %}

Toggle

示例

查看代码
1
print("Hello World")

使用方法

( display 不能包含英文逗号,可用 &sbquo;)

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}
1
2
3
4
5
{% hideToggle 查看代码 %}

print("Hello World")

{% endhideToggle %}

BiliBili视频播放器

安装 hexo-tag-bilibili

1
npm install --save hexo-tag-bilibili

示例

使用方法

( display 不能包含英文逗号,可用 &sbquo;)

只能写AV号 如 av57505556 av_id 写 57505556

哔哩哔哩 AV/BV 互转 https://tool.liumingye.cn/avbv/

1
2
3
{% bilibili [av_id] %}
or
{% bilibili [av_id] [page] %}
1
{% bilibili 57505556 %}

APlayer

安装 hexo-tag-aplayer

1
npm install --save hexo-tag-aplayer

编辑_config.yml

1
2
3
aplayer:
asset_inject: false
meting: true

示例

如果没有显示请刷新一下

使用方法

1
{% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listfolded" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}
选项默认值描述
id必须值歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server必须值音乐平台: netease, tencent, kugou, xiami, baidu
type必须值song, playlist, album, search, artist
fixedfalse开启固定模式
minifalse开启迷你模式
loopall列表循环模式:all, one,none
orderlist列表播放模式: list, random
volume0.7播放器音量
lrctype0歌词格式类型
listfoldedfalse指定音乐播放列表是否折叠
storagenamemetingjsLocalStorage 中存储播放器设定的键名
autoplaytrue自动播放,移动端浏览器暂时不支持此功能
mutextrue该选项开启时,如果同页面有其他 aplayer 播放,该播放器会暂停
listmaxheight340px播放列表的最大长度
preloadauto音乐文件预载入模式,可选项: none, metadata, auto
theme#ad7a86播放器风格色彩设置
1
{% meting "569551651" "netease"  "playlist" "mutex:true" "listfolded:true" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

按键

示例

目前主题最新版已经自带样式

Ctrl+C Ctrl+V

使用方法

代码如下:

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;
}

添加动效动画

On DOM loadOn hoverOn parent hover
 faa-wrench animated faa-wrench animated-hover faa-wrench
 faa-ring animated faa-ring animated-hover faa-ring
 faa-horizontal animated faa-horizontal animated-hover faa-horizontal
 faa-vertical animated faa-vertical animated-hover faa-vertical
 faa-flash animated faa-flash animated-hover faa-flash
 faa-bounce animated faa-bounce animated-hover faa-bounce
 faa-spin animated faa-spin animated-hover faa-spin
 faa-float animated faa-float animated-hover faa-float
 faa-pulse animated faa-pulse animated-hover faa-pulse
 faa-shake animated faa-shake animated-hover faa-shake
 faa-tada animated faa-tada animated-hover faa-tada
 faa-passing animated faa-passing animated-hover faa-passing
 faa-passing-reverse animated faa-passing-reverse animated-hover faa-passing-reverse
 faa-burst animated faa-burst animated-hover faa-burst
 faa-falling animated faa-falling animated-hover faa-falling
 faa-rising animated faa-rising animated-hover faa-rising

然后在 DOM 元素的类名添加相应的动画即可。

例如网址导航栏可以写为 - 网址收藏 || /nav/ || fas fa-infinity faa-shake animated

小标签

示例

绿色

红色

黄色

灰色

蓝色

红色小标签

绿色小标签

蓝色小标签

黄色小标签

灰色小标签

绿色

使用方法

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

ElementUI

按钮样式

示例

使用方法

先引入样式

1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zykjofficial/zykjresource@master/css/elementui.css">

进入ElementUi官网: https://element.eleme.cn/#/zh-CN/component/button 、F12查看,注意:不支持fontawesome图标,请不要使用

密码样式的文本

https://volantis.js.org/v4/tag-plugins/

示例

你能看见我吗?

使用

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

时间线

https://volantis.js.org/v3/tag-plugins/

示例

升级小助手

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
{% 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 %}
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);
}

https://volantis.js.org/v4/tag-plugins/

示例

卓越科技的Blog

https://zykj.js.org/

使用

1
{% link 标题, 链接, 图片 %}
1
{% link 如何参与项目, http://localhost:4000/contributors/, https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/blog/Logo-NavBar@3x.png %}
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
#article-container a.link-card {
margin: 0.25rem auto;
background: #f6f6f6;
display: inline-flex;
align-items: center;
cursor: pointer;
text-align: center;
min-width: 200px;
max-width: 361px;
color: #444;
border-radius: 12px;
text-decoration: none;
}
@media screen and (max-width: 425px) {
#article-container a.link-card {
max-width: 100%;
}
}
@media screen and (max-width: 375px) {
#article-container a.link-card {
width: 100%;
}
}
#article-container a.link-card:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
}
#article-container a.link-card div.left,
#article-container a.link-card div.right {
pointer-events: none;
}
#article-container a.link-card div.left {
width: 48px;
height: 48px;
margin: 12px;
overflow: hidden;
flex-shrink: 0;
position: relative;
}
#article-container a.link-card div.left i {
font-size: 32px;
line-height: 48px;
margin-left: 4px;
}
#article-container a.link-card div.left img {
display: block;
position: absolute;
border-radius: 8px / 4;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#article-container a.link-card div.right {
overflow: hidden;
margin-right: 12px;
}
#article-container a.link-card p {
margin: 0;
}
#article-container a.link-card p.text {
font-weight: bold;
}
#article-container a.link-card p.url {
flex-shrink: 0;
color: rgba(68, 68, 68, 0.65);
font-size: 13px;
}

[data-theme="dark"] #article-container a.link-card img {
filter: brightness(1);
}

[data-theme="dark"] #article-container a.link-card {
filter: brightness(0.7);
}

GitHub Emoji表情查阅

人物

:bowtie::bowtie:😄 :smile:😆 :laughing:
😊 :blush:😃 :smiley:☺️ :relaxed:
😏 :smirk:😍 :heart_eyes:😘 :kissing_heart:
😚 :kissing_closed_eyes:😳 :flushed:😌 :relieved:
😆 :satisfied:😁 :grin:😉 :wink:
😜 :stuck_out_tongue_winking_eye:😝 :stuck_out_tongue_closed_eyes:😀 :grinning:
😗 :kissing:😙 :kissing_smiling_eyes:😛 :stuck_out_tongue:
😴 :sleeping:😟 :worried:😦 :frowning:
😧 :anguished:😮 :open_mouth:😬 :grimacing:
😕 :confused:😯 :hushed:😑 :expressionless:
😒 :unamused:😅 :sweat_smile:😓 :sweat:
😥 :disappointed_relieved:😩 :weary:😔 :pensive:
😞 :disappointed:😖 :confounded:😨 :fearful:
😰 :cold_sweat:😣 :persevere:😢 :cry:
😭 :sob:😂 :joy:😲 :astonished:
😱 :scream::neckbeard: :neckbeard:😫 :tired_face:
😠 :angry:😡 :rage:😤 :triumph:
😪 :sleepy:😋 :yum:😷 :mask:
😎 :sunglasses:😵 :dizzy_face:👿 :imp:
😈 :smiling_imp:😐 :neutral_face:😶 :no_mouth:
😇 :innocent:👽 :alien:💛 :yellow_heart:
💙 :blue_heart:💜 :purple_heart:❤️ :heart:
💚 :green_heart:💔 :broken_heart:💓 :heartbeat:
💗 :heartpulse:💕 :two_hearts:💞 :revolving_hearts:
💘 :cupid:💖 :sparkling_heart::sparkles:
⭐️ :star:🌟 :star2:💫 :dizzy:
💥 :boom:💥 :collision:💢 :anger:
❗️ :exclamation::question::grey_exclamation:
:grey_question:💤 :zzz:💨 :dash:
💦 :sweat_drops:🎶 :notes:🎵 :musical_note:
🔥 :fire:💩 :hankey:💩 :poop:
💩 :shit:👍 :+1:👍 :thumbsup:
👎 :-1:👎 :thumbsdown:👌 :ok_hand:
👊 :punch:👊 :facepunch::fist:
✌️ :v:👋 :wave::hand:
:raised_hand:👐 :open_hands:☝️ :point_up:
👇 :point_down:👈 :point_left:👉 :point_right:
🙌 :raised_hands:🙏 :pray:👆 :point_up_2:
👏 :clap:💪 :muscle:🤘 :metal:
🖕 :fu:🚶 :walking:🏃 :runner:
🏃 :running:👫 :couple:👪 :family:
👬 :two_men_holding_hands:👭 :two_women_holding_hands:💃 :dancer:
👯 :dancers:🙆 :ok_woman:🙅 :no_good:
💁 :information_desk_person:🙋 :raising_hand:👰 :bride_with_veil:
🙎 :person_with_pouting_face:🙍 :person_frowning:🙇 :bow:
💏 :couplekiss:💑 :couple_with_heart:💆 :massage:
💇 :haircut:💅 :nail_care:👦 :boy:
👧 :girl:👩 :woman:👨 :man:
👶 :baby:👵 :older_woman:👴 :older_man:
👱 :person_with_blond_hair:👲 :man_with_gua_pi_mao:👳 :man_with_turban:
👷 :construction_worker:👮 :cop:👼 :angel:
👸 :princess:😺 :smiley_cat:😸 :smile_cat:
😻 :heart_eyes_cat:😽 :kissing_cat:😼 :smirk_cat:
🙀 :scream_cat:😿 :crying_cat_face:😹 :joy_cat:
😾 :pouting_cat:👹 :japanese_ogre:👺 :japanese_goblin:
🙈 :see_no_evil:🙉 :hear_no_evil:🙊 :speak_no_evil:
💂 :guardsman:💀 :skull:🐾 :feet:
👄 :lips:💋 :kiss:💧 :droplet:
👂 :ear:👀 :eyes:👃 :nose:
👅 :tongue:💌 :love_letter:👤 :bust_in_silhouette:
👥 :busts_in_silhouette:💬 :speech_balloon:💭 :thought_balloon:
:feelsgood: :feelsgood::finnadie: :finnadie::goberserk: :goberserk:
:godmode: :godmode::hurtrealbad: :hurtrealbad::rage1: :rage1:
:rage2: :rage2::rage3: :rage3::rage4: :rage4:
:suspect::suspect::trollface: :trollface:

自然

☀️ :sunny:☔️ :umbrella:☁️ :cloud:
❄️ :snowflake:⛄️ :snowman:⚡️ :zap:
🌀 :cyclone:🌁 :foggy:🌊 :ocean:
🐱 :cat:🐶 :dog:🐭 :mouse:
🐹 :hamster:🐰 :rabbit:🐺 :wolf:
🐸 :frog:🐯 :tiger:🐨 :koala:
🐻 :bear:🐷 :pig:🐽 :pig_nose:
🐮 :cow:🐗 :boar:🐵 :monkey_face:
🐒 :monkey:🐴 :horse:🐎 :racehorse:
🐫 :camel:🐑 :sheep:🐘 :elephant:
🐼 :panda_face:🐍 :snake:🐦 :bird:
🐤 :baby_chick:🐥 :hatched_chick:🐣 :hatching_chick:
🐔 :chicken:🐧 :penguin:🐢 :turtle:
🐛 :bug:🐝 :honeybee:🐜 :ant:
🐞 :beetle:🐌 :snail:🐙 :octopus:
🐠 :tropical_fish:🐟 :fish:🐳 :whale:
🐋 :whale2:🐬 :dolphin:🐄 :cow2:
🐏 :ram:🐀 :rat:🐃 :water_buffalo:
🐅 :tiger2:🐇 :rabbit2:🐉 :dragon:
🐐 :goat:🐓 :rooster:🐕 :dog2:
🐖 :pig2:🐁 :mouse2:🐂 :ox:
🐲 :dragon_face:🐡 :blowfish:🐊 :crocodile:
🐪 :dromedary_camel:🐆 :leopard:🐈 :cat2:
🐩 :poodle:🐾 :paw_prints:💐 :bouquet:
🌸 :cherry_blossom:🌷 :tulip:🍀 :four_leaf_clover:
🌹 :rose:🌻 :sunflower:🌺 :hibiscus:
🍁 :maple_leaf:🍃 :leaves:🍂 :fallen_leaf:
🌿 :herb:🍄 :mushroom:🌵 :cactus:
🌴 :palm_tree:🌲 :evergreen_tree:🌳 :deciduous_tree:
🌰 :chestnut:🌱 :seedling:🌼 :blossom:
🌾 :ear_of_rice:🐚 :shell:🌐 :globe_with_meridians:
🌞 :sun_with_face:🌝 :full_moon_with_face:🌚 :new_moon_with_face:
🌑 :new_moon:🌒 :waxing_crescent_moon:🌓 :first_quarter_moon:
🌔 :waxing_gibbous_moon:🌕 :full_moon:🌖 :waning_gibbous_moon:
🌗 :last_quarter_moon:🌘 :waning_crescent_moon:🌜 :last_quarter_moon_with_face:
🌛 :first_quarter_moon_with_face:🌔 :moon:🌍 :earth_africa:
🌎 :earth_americas:🌏 :earth_asia:🌋 :volcano:
🌌 :milky_way:⛅️ :partly_sunny::octocat: :octocat:
:squirrel: :squirrel:

物体

🎍 :bamboo:💝 :gift_heart:🎎 :dolls:
🎒 :school_satchel:🎓 :mortar_board:🎏 :flags:
🎆 :fireworks:🎇 :sparkler:🎐 :wind_chime:
🎑 :rice_scene:🎃 :jack_o_lantern:👻 :ghost:
🎅 :santa:🎄 :christmas_tree:🎁 :gift:
🔔 :bell:🔕 :no_bell:🎋 :tanabata_tree:
🎉 :tada:🎊 :confetti_ball:🎈 :balloon:
🔮 :crystal_ball:💿 :cd:📀 :dvd:
💾 :floppy_disk:📷 :camera:📹 :video_camera:
🎥 :movie_camera:💻 :computer:📺 :tv:
📱 :iphone:☎️ :phone:☎️ :telephone:
📞 :telephone_receiver:📟 :pager:📠 :fax:
💽 :minidisc:📼 :vhs:🔉 :sound:
🔈 :speaker:🔇 :mute:📢 :loudspeaker:
📣 :mega:⌛️ :hourglass::hourglass_flowing_sand:
:alarm_clock:⌚️ :watch:📻 :radio:
📡 :satellite::loop:🔍 :mag:
🔎 :mag_right:🔓 :unlock:🔒 :lock:
🔏 :lock_with_ink_pen:🔐 :closed_lock_with_key:🔑 :key:
💡 :bulb:🔦 :flashlight:🔆 :high_brightness:
🔅 :low_brightness:🔌 :electric_plug:🔋 :battery:
📲 :calling:✉️ :email:📫 :mailbox:
📮 :postbox:🛀 :bath:🛁 :bathtub:
🚿 :shower:🚽 :toilet:🔧 :wrench:
🔩 :nut_and_bolt:🔨 :hammer:💺 :seat:
💰 :moneybag:💴 :yen:💵 :dollar:
💷 :pound:💶 :euro:💳 :credit_card:
💸 :money_with_wings:📧 :e-mail:📥 :inbox_tray:
📤 :outbox_tray:✉️ :envelope:📨 :incoming_envelope:
📯 :postal_horn:📪 :mailbox_closed:📬 :mailbox_with_mail:
📭 :mailbox_with_no_mail:🚪 :door:🚬 :smoking:
💣 :bomb:🔫 :gun:🔪 :hocho:
💊 :pill:💉 :syringe:📄 :page_facing_up:
📃 :page_with_curl:📑 :bookmark_tabs:📊 :bar_chart:
📈 :chart_with_upwards_trend:📉 :chart_with_downwards_trend:📜 :scroll:
📋 :clipboard:📆 :calendar:📅 :date:
📇 :card_index:📁 :file_folder:📂 :open_file_folder:
✂️ :scissors:📌 :pushpin:📎 :paperclip:
✒️ :black_nib:✏️ :pencil2:📏 :straight_ruler:
📐 :triangular_ruler:📕 :closed_book:📗 :green_book:
📘 :blue_book:📙 :orange_book:📓 :notebook:
📔 :notebook_with_decorative_cover:📒 :ledger:📚 :books:
🔖 :bookmark:📛 :name_badge:🔬 :microscope:
🔭 :telescope:📰 :newspaper:🏈 :football:
🏀 :basketball:⚽️ :soccer:⚾️ :baseball:
🎾 :tennis:🎱 :8ball:🏉 :rugby_football:
🎳 :bowling:⛳️ :golf:🚵 :mountain_bicyclist:
🚴 :bicyclist:🏇 :horse_racing:🏂 :snowboarder:
🏊 :swimmer:🏄 :surfer:🎿 :ski:
♠️ :spades:♥️ :hearts:♣️ :clubs:
♦️ :diamonds:💎 :gem:💍 :ring:
🏆 :trophy:🎼 :musical_score:🎹 :musical_keyboard:
🎻 :violin:👾 :space_invader:🎮 :video_game:
🃏 :black_joker:🎴 :flower_playing_cards:🎲 :game_die:
🎯 :dart:🀄️ :mahjong:🎬 :clapper:
📝 :memo:📝 :pencil:📖 :book:
🎨 :art:🎤 :microphone:🎧 :headphones:
🎺 :trumpet:🎷 :saxophone:🎸 :guitar:
👞 :shoe:👡 :sandal:👠 :high_heel:
💄 :lipstick:👢 :boot:👕 :shirt:
👕 :tshirt:👔 :necktie:👚 :womans_clothes:
👗 :dress:🎽 :running_shirt_with_sash:👖 :jeans:
👘 :kimono:👙 :bikini:🎀 :ribbon:
🎩 :tophat:👑 :crown:👒 :womans_hat:
👞 :mans_shoe:🌂 :closed_umbrella:💼 :briefcase:
👜 :handbag:👝 :pouch:👛 :purse:
👓 :eyeglasses:🎣 :fishing_pole_and_fish:☕️ :coffee:
🍵 :tea:🍶 :sake:🍼 :baby_bottle:
🍺 :beer:🍻 :beers:🍸 :cocktail:
🍹 :tropical_drink:🍷 :wine_glass:🍴 :fork_and_knife:
🍕 :pizza:🍔 :hamburger:🍟 :fries:
🍗 :poultry_leg:🍖 :meat_on_bone:🍝 :spaghetti:
🍛 :curry:🍤 :fried_shrimp:🍱 :bento:
🍣 :sushi:🍥 :fish_cake:🍙 :rice_ball:
🍘 :rice_cracker:🍚 :rice:🍜 :ramen:
🍲 :stew:🍢 :oden:🍡 :dango:
🥚 :egg:🍞 :bread:🍩 :doughnut:
🍮 :custard:🍦 :icecream:🍨 :ice_cream:
🍧 :shaved_ice:🎂 :birthday:🍰 :cake:
🍪 :cookie:🍫 :chocolate_bar:🍬 :candy:
🍭 :lollipop:🍯 :honey_pot:🍎 :apple:
🍏 :green_apple:🍊 :tangerine:🍋 :lemon:
🍒 :cherries:🍇 :grapes:🍉 :watermelon:
🍓 :strawberry:🍑 :peach:🍈 :melon:
🍌 :banana:🍐 :pear:🍍 :pineapple:
🍠 :sweet_potato:🍆 :eggplant:🍅 :tomato:
🌽 :corn:

地点

🏠 :house:🏡 :house_with_garden:🏫 :school:
🏢 :office:🏣 :post_office:🏥 :hospital:
🏦 :bank:🏪 :convenience_store:🏩 :love_hotel:
🏨 :hotel:💒 :wedding:⛪️ :church:
🏬 :department_store:🏤 :european_post_office:🌇 :city_sunrise:
🌆 :city_sunset:🏯 :japanese_castle:🏰 :european_castle:
⛺️ :tent:🏭 :factory:🗼 :tokyo_tower:
🗾 :japan:🗻 :mount_fuji:🌄 :sunrise_over_mountains:
🌅 :sunrise:🌠 :stars:🗽 :statue_of_liberty:
🌉 :bridge_at_night:🎠 :carousel_horse:🌈 :rainbow:
🎡 :ferris_wheel:⛲️ :fountain:🎢 :roller_coaster:
🚢 :ship:🚤 :speedboat:⛵️ :boat:
⛵️ :sailboat:🚣 :rowboat:⚓️ :anchor:
🚀 :rocket:✈️ :airplane:🚁 :helicopter:
🚂 :steam_locomotive:🚊 :tram:🚞 :mountain_railway:
🚲 :bike:🚡 :aerial_tramway:🚟 :suspension_railway:
🚠 :mountain_cableway:🚜 :tractor:🚙 :blue_car:
🚘 :oncoming_automobile:🚗 :car:🚗 :red_car:
🚕 :taxi:🚖 :oncoming_taxi:🚛 :articulated_lorry:
🚌 :bus:🚍 :oncoming_bus:🚨 :rotating_light:
🚓 :police_car:🚔 :oncoming_police_car:🚒 :fire_engine:
🚑 :ambulance:🚐 :minibus:🚚 :truck:
🚋 :train:🚉 :station:🚆 :train2:
🚅 :bullettrain_front:🚄 :bullettrain_side:🚈 :light_rail:
🚝 :monorail:🚃 :railway_car:🚎 :trolleybus:
🎫 :ticket:⛽️ :fuelpump:🚦 :vertical_traffic_light:
🚥 :traffic_light:⚠️ :warning:🚧 :construction:
🔰 :beginner:🏧 :atm:🎰 :slot_machine:
🚏 :busstop:💈 :barber:♨️ :hotsprings:
🏁 :checkered_flag:🎌 :crossed_flags:🏮 :izakaya_lantern:
🗿 :moyai:🎪 :circus_tent:🎭 :performing_arts:
📍 :round_pushpin:🚩 :triangular_flag_on_post:🇯🇵 :jp:
🇰🇷 :kr:🇨🇳 :cn:🇺🇸 :us:
🇫🇷 :fr:🇪🇸 :es:🇮🇹 :it:
🇷🇺 :ru:🇬🇧 :gb:🇬🇧 :uk:
🇩🇪 :de:

符号

1️⃣ :one:2️⃣ :two:3️⃣ :three:
4️⃣ :four:5️⃣ :five:6️⃣ :six:
7️⃣ :seven:8️⃣ :eight:9️⃣ :nine:
🔟 :keycap_ten:🔢 :1234:0️⃣ :zero:
#️⃣ :hash:🔣 :symbols:◀️ :arrow_backward:
⬇️ :arrow_down:▶️ :arrow_forward:⬅️ :arrow_left:
🔠 :capital_abcd:🔡 :abcd:🔤 :abc:
↙️ :arrow_lower_left:↘️ :arrow_lower_right:➡️ :arrow_right:
⬆️ :arrow_up:↖️ :arrow_upper_left:↗️ :arrow_upper_right:
:arrow_double_down::arrow_double_up:🔽 :arrow_down_small:
⤵️ :arrow_heading_down:⤴️ :arrow_heading_up:↩️ :leftwards_arrow_with_hook:
↪️ :arrow_right_hook:↔️ :left_right_arrow:↕️ :arrow_up_down:
🔼 :arrow_up_small:🔃 :arrows_clockwise:🔄 :arrows_counterclockwise:
:rewind::fast_forward:ℹ️ :information_source:
🆗 :ok:🔀 :twisted_rightwards_arrows:🔁 :repeat:
🔂 :repeat_one:🆕 :new:🔝 :top:
🆙 :up:🆒 :cool:🆓 :free:
🆖 :ng:🎦 :cinema:🈁 :koko:
📶 :signal_strength:🈹 :u5272:🈴 :u5408:
🈺 :u55b6:🈯 :u6307:🈷️ :u6708:
🈶 :u6709:🈵 :u6e80:🈚 :u7121:
🈸 :u7533:🈳 :u7a7a:🈲 :u7981:
🈂️ :sa:🚻 :restroom:🚹 :mens:
🚺 :womens:🚼 :baby_symbol:🚭 :no_smoking:
🅿️ :parking:♿️ :wheelchair:🚇 :metro:
🛄 :baggage_claim:🉑 :accept:🚾 :wc:
🚰 :potable_water:🚮 :put_litter_in_its_place:㊙️ :secret:
㊗️ :congratulations:Ⓜ️ :m:🛂 :passport_control:
🛅 :left_luggage:🛃 :customs:🉐 :ideograph_advantage:
🆑 :cl:🆘 :sos:🆔 :id:
🚫 :no_entry_sign:🔞 :underage:📵 :no_mobile_phones:
🚯 :do_not_litter:🚱 :non-potable_water:🚳 :no_bicycles:
🚷 :no_pedestrians:🚸 :children_crossing:⛔️ :no_entry:
✳️ :eight_spoked_asterisk:✴️ :eight_pointed_black_star:💟 :heart_decoration:
🆚 :vs:📳 :vibration_mode:📴 :mobile_phone_off:
💹 :chart:💱 :currency_exchange:♈️ :aries:
♉️ :taurus:♊️ :gemini:♋️ :cancer:
♌️ :leo:♍️ :virgo:♎️ :libra:
♏️ :scorpius:♐️ :sagittarius:♑️ :capricorn:
♒️ :aquarius:♓️ :pisces::ophiuchus:
🔯 :six_pointed_star::negative_squared_cross_mark:🅰️ :a:
🅱️ :b:🆎 :ab:🅾️ :o2:
💠 :diamond_shape_with_a_dot_inside:♻️ :recycle:🔚 :end:
🔛 :on:🔜 :soon:🕐 :clock1:
🕜 :clock130:🕙 :clock10:🕥 :clock1030:
🕚 :clock11:🕦 :clock1130:🕛 :clock12:
🕧 :clock1230:🕑 :clock2:🕝 :clock230:
🕒 :clock3:🕞 :clock330:🕓 :clock4:
🕟 :clock430:🕔 :clock5:🕠 :clock530:
🕕 :clock6:🕡 :clock630:🕖 :clock7:
🕢 :clock730:🕗 :clock8:🕣 :clock830:
🕘 :clock9:🕤 :clock930:💲 :heavy_dollar_sign:
©️ :copyright:®️ :registered:™️ :tm:
:x:❗️ :heavy_exclamation_mark:‼️ :bangbang:
⁉️ :interrobang:⭕️ :o:✖️ :heavy_multiplication_x:
:heavy_plus_sign::heavy_minus_sign::heavy_division_sign:
💮 :white_flower:💯 :100:✔️ :heavy_check_mark:
☑️ :ballot_box_with_check:🔘 :radio_button:🔗 :link:
:curly_loop:〰️ :wavy_dash:〽️ :part_alternation_mark:
🔱 :trident::black_square: :black_square::white_square: :white_square:
:white_check_mark:🔲 :black_square_button:🔳 :white_square_button:
⚫️ :black_circle:⚪️ :white_circle:🔴 :red_circle:
🔵 :large_blue_circle:🔷 :large_blue_diamond:🔶 :large_orange_diamond:
🔹 :small_blue_diamond:🔸 :small_orange_diamond:🔺 :small_red_triangle:
🔻 :small_red_triangle_down::shipit::shipit: