介绍

  1. 请注意: 未标明 Butterfly主题自带样式 的是 DIY样式

  2. 确保Butterfly主题是最新版、否则部分样式可能没有、DIY样式有源码查看选项

  3. 部分DIY 外挂标签教程 ：tag外挂标签

  4. 我的魔改CSS: https://cdn.jsdelivr.net/gh/zykjofficial/zykjofficial.github.io@master/css/zykjcss.css

Page Front-matter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
toc:
toc_number:
sticky:
---
写法解释
title【必需】页面标题
date【必需】页面创建日期
type【必需】标签、分类和友情链接三个页面需要配置
updated【可选】页面更新日期
description【可选】页面描述
keywords【可选】页面关键字
comments【可选】显示页面评论模块(默认 true)
top_img【可选】页面顶部图片
mathjax【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false)
katex【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false)
aside【可选】显示侧边栏 (默认 true)
aplayer【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置
highlight_shrink【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置)
toc【可选】 页面是否显示目录
toc_number【可选】 目录是否显示数字
sticky【可选】 文章置顶，数字越大越靠前

text

示例

带 下划线 的文本；带着重号的文本；带波浪线的文本；带 删除线 的文本

键盘样式的文本：⌘ + D

密码样式的文本：这里没有验证码

选中文字显示内容：模糊模糊模糊模糊模糊模糊- 此内容来自：shoka主题 - Step.4 主题特殊功能

使用方法

1
2
3
4
5
6
7
{% u 内容 %}
{% emp 内容 %}
{% wavy 内容 %}
{% del 内容 %}
{% kbd 内容 %} 
{% psw 内容 %}
{% blur 内容 %}
1
2
3
4
5
6
7
带 {% u 下划线 %} 的文本；带 {% emp 着重号 %} 的文本；带 {% wavy 波浪线 %} 的文本；带 {% del 删除线 %} 的文本

键盘样式的文本：{% kbd ⌘ %} + {% kbd D %}

密码样式的文本：{% psw 这里没有验证码 %}

选中文字显示内容：{% blur 模糊模糊模糊模糊模糊模糊 %}
查看CSS
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
del,s {
  color: #8e8e8e;
  text-decoration-color: #8e8e8e
}

u {
  color: #444;
  text-decoration: none;
  border-bottom: 1px solid #fe5f58
}

emp {
  color: #444;
  border-bottom: 4px dotted #fe5f58;
}

wavy {
  color: #444;
  text-decoration-style: wavy;
  text-decoration-line: underline;
  text-decoration-color: #fe5f58
}

psw {
  color: transpanett;
  background: #a1a1a1;
  border-radius: 2px;
  -webkit-transition: all .28s ease;
  -moz-transition: all .28s ease;
  -o-transition: all .28s ease;
  -ms-transition: all .28s ease;
  transition: all .28s ease;
  -moz-transition: all .28s ease;
  -webkit-transition: all .28s ease;
  -o-transition: all .28s ease
}

psw:hover {
  color: #444;
  background: 0 0
}

/* Butterfly主题自带kbd样式，你可以不复制这个内容 */
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;
  -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
}

[data-theme="dark"] u,
[data-theme="dark"] emp,
[data-theme="dark"] wavy,
[data-theme="dark"] del,
[data-theme="dark"] psw:hover {
  color: rgba(238, 238, 238, 0.871);
}

[data-theme="dark"] blur {
  background: #a1a1a1;
}

blur {
  text-shadow: rgba(0,0,0,.7) 0 0 0.625rem;
  color: transpanett;
}
查看JS

需要将inline-labels.js放入themes\butterfly\scripts\tag内

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
'use strict';


hexo.extend.tag.register('u', function(args) {
  return `<u>${args.join(' ')}</u>`;
});
hexo.extend.tag.register('emp', function(args) {
  return `<emp>${args.join(' ')}</emp>`;
});
hexo.extend.tag.register('wavy', function(args) {
  return `<wavy>${args.join(' ')}</wavy>`;
});
hexo.extend.tag.register('del', function(args) {
  return `<del>${args.join(' ')}</del>`;
});
hexo.extend.tag.register('kbd', function(args) {
  return `<kbd>${args.join(' ')}</kbd>`;
});
hexo.extend.tag.register('psw', function(args) {
  return `<psw title="你知道的太多了">${args.join(' ')}</psw>`;
});
hexo.extend.tag.register('blur', function(args) {
  return `<blur title="你知道的太多了">${args.join(' ')}</blur>`;
});

Note

示例

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

simple样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

modern样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

flat样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

disabled样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

no-icon样式

默认 提示块标签

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

自定义标签样式

red

quote

radiation

bug

idea

link

paperclip

todo

guide

download

message

up

undo

自定义icon样式

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

你是刷 Visa 还是 UnionPay

2021年快到了….

小心开车 安全至上

这是三片呢？还是四片？

你是刷 Visa 还是 UnionPay

剪刀石头布

前端最讨厌的浏览器

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

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

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

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

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

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

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

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

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

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

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

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

使用方法

标签、自定义标签

更多内容查看：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
{% note [class] [no-icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称用法
class【可选】标识，不同的标识有不同的配色（ default / primary / success / info / warning / danger ）
no-icon【可选】不显示 icon
style【可选】可以覆盖配置中的 style（simple/modern/flat/disabled）

自定义icon

1
2
3
{% note [color] [icon] [style] %}
Any content (support inline tags too.io).
{% endnote %}
名称用法
color【可选】颜色 (default / blue / pink / red / purple / orange / green)
icon【可选】可配置自定义 icon (只支持 fontawesome 图标, 也可以配置 no-icon )
style【可选】可以覆盖配置中的 style （simple/modern/flat/disabled）

上标式标签

1
2
3
4
不填默认为 info
warning   黄色叹号
success   绿色打钩
error     红色禁止

标签、自定义标签

simple样式

1
2
3
4
5
6
7
8
9
10
11
12
13
{% note simple %}默认 提示块标签{% endnote %}

{% note default simple %}default 提示块标签{% endnote %}

{% note primary simple %}primary 提示块标签{% endnote %}

{% note success simple %}success 提示块标签{% endnote %}

{% note info simple %}info 提示块标签{% endnote %}

{% note warning simple %}warning 提示块标签{% endnote %}

{% note danger simple %}danger 提示块标签{% endnote %}

modern样式

1
2
3
4
5
6
7
8
9
10
11
12
13
{% note modern %}默认 提示块标签{% endnote %}

{% note default modern %}default 提示块标签{% endnote %}

{% note primary modern %}primary 提示块标签{% endnote %}

{% note success modern %}success 提示块标签{% endnote %}

{% note info modern %}info 提示块标签{% endnote %}

{% note warning modern %}warning 提示块标签{% endnote %}

{% note danger modern %}danger 提示块标签{% endnote %}

flat样式

1
2
3
4
5
6
7
8
9
10
11
12
13
{% note flat %}默认 提示块标签{% endnote %}

{% note default flat %}default 提示块标签{% endnote %}

{% note primary flat %}primary 提示块标签{% endnote %}

{% note success flat %}success 提示块标签{% endnote %}

{% note info flat %}info 提示块标签{% endnote %}

{% note warning flat %}warning 提示块标签{% endnote %}

{% note danger flat %}danger 提示块标签{% endnote %}

disabled样式

1
2
3
4
5
6
7
8
9
10
11
12
13
{% note disabled %}默认 提示块标签{% endnote %}

{% note default disabled %}default 提示块标签{% endnote %}

{% note primary disabled %}primary 提示块标签{% endnote %}

{% note success disabled %}success 提示块标签{% endnote %}

{% note info disabled %}info 提示块标签{% endnote %}

{% note warning disabled %}warning 提示块标签{% endnote %}

{% note danger disabled %}danger 提示块标签{% endnote %}

no-icon样式

1
2
3
4
5
6
7
8
9
10
11
12
13
{% note no-icon %}默认 提示块标签{% endnote %}

{% note default no-icon %}default 提示块标签{% endnote %}

{% note primary no-icon %}primary 提示块标签{% endnote %}

{% note success no-icon %}success 提示块标签{% endnote %}

{% note info no-icon %}info 提示块标签{% endnote %}

{% note warning no-icon %}warning 提示块标签{% endnote %}

{% note danger no-icon %}danger 提示块标签{% 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
47
48
49
50
51
{% note red %}
red
{% endnote %}

{% note quote %}
quote
{% endnote %}

{% note radiation yellow %}
radiation
{% endnote %}

{% note bug red %}
bug
{% endnote %}

{% note idea blue %}
idea
{% endnote %}

{% note link green %}
link
{% endnote %}

{% note paperclip blue %}
paperclip
{% endnote %}

{% note todo green %}
todo
{% endnote %}

{% note guide green %}
guide
{% endnote %}

{% note download green %}
download
{% endnote %}

{% note message gray %}
message
{% endnote %}

{% note up green %}
up
{% endnote %}

{% note undo light %}
undo
{% endnote %}

自定义icon

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' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note blue 'fas fa-bullhorn' simple %}
2021年快到了....
{% endnote %}
{% note pink 'fas fa-car-crash' simple %}
小心开车 安全至上
{% endnote %}
{% note red 'fas fa-fan' simple%}
这是三片呢？还是四片？
{% endnote %}
{% note orange 'fas fa-battery-half' simple %}
你是刷 Visa 还是 UnionPay
{% endnote %}
{% note purple 'far fa-hand-scissors' simple %}
剪刀石头布
{% endnote %}
{% note green 'fab fa-internet-explorer' simple %}
前端最讨厌的浏览器
{% 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>
查看自定义标签CSS
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;
}
查看上标式标签CSS
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);
}

Label

示例

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

臣亮言：先帝创业未半，而中道崩殂。今天下三分，益州疲敝，此诚危急存亡之秋也！然侍衞之臣，不懈于内；忠志之士，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有作奸、犯科，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

以下内容来自 小康博客 - Hexo 博客之 butterfly 主题优雅魔改系列

绿色

红色

黄色

灰色

蓝色

红色小标签

绿色小标签

蓝色小标签

黄色小标签

灰色小标签

绿色

各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。

超大号文字：

A Wonderful Theme for Hexo

使用方法

标签

1
2
3
4
{% label text color %}

text:	文字
color:	【可选】背景颜色，默认为 default (default/blue/pink/red/purple/orange/green)

小标签

1
<p class='div-border [颜色|方向加粗]'>你的文字</p>

span

官方文档：https://volantis.js.org/v5/tag-plugins/#span

1
{% span 样式参数::文本内容 %}
属性可选值
字体logo, code
颜色red, yellow, green, cyan, blue, gray
大小small, h4, h3, h2, h1, large, huge, ultra
对齐方向left, center, right

标签

1
2
臣亮言：{% label 先帝 %}创业未半，而{% label 中道崩殂 blue %}。今天下三分，{% label 益州疲敝 pink %}，此诚{% label 危急存亡之秋 red %}也！然侍衞之臣，不懈于内；{% label 忠志之士 purple %}，忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气；不宜妄自菲薄，引喻失义，以塞忠谏之路也。
宫中、府中，俱为一体；陟罚臧否，不宜异同。若有{% label 作奸 orange %}、{% label 犯科 green %}，及为忠善者，宜付有司，论其刑赏，以昭陛下平明之治；不宜偏私，使内外异法也。

小标签

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>

span

1
2
3
4
5
6
<!-- tab span -->
各种颜色的标签，包括：{% span red::红色 %}、{% span yellow::黄色 %}、{% span green::绿色 %}、{% span cyan::青色 %}、{% span blue::蓝色 %}、{% span gray::灰色 %}。

超大号文字：

{% span center logo large::Volantis %} {% span center small::A Wonderful Theme for Hexo %}
查看小标签和span的CSS
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, transpanett);
}

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);
}
查看span的js

需要将span.js放入themes\butterfly\scripts\tag内

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
'use strict';

function postP(args) {
  if(/::/g.test(args)){
    args = args.join(' ').split('::');
  }
  else{
    args = args.join(' ').split(',');
  }
  const p0 = args[0].trim();
  const p1 = args[1].trim();
  return `<p class='p ${p0}'>${p1}</p>`;
}
function postSpan(args) {
  if(/::/g.test(args)){
    args = args.join(' ').split('::');
  }
  else{
    args = args.join(' ').split(',');
  }
  const p0 = args[0].trim();
  const p1 = args[1].trim();
  return `<span class='p ${p0}'>${p1}</span>`;
}

hexo.extend.tag.register('p', postP);
hexo.extend.tag.register('span', postSpan);

tag-hide

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

示例

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

门里站着一个人? 闪

[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""}]
查看代码
1
print("Hello World")

使用方法

Inline

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

Block

1
2
3
{% hideBlock display,bg,color %}
content
{% endhideBlock %}

Toggle

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

1
2
3
{% hideToggle display,bg,color %}
content
{% endhideToggle %}

Inline

  • content: 文本内容

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

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

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

Block

  • content: 文本内容
  • display: 按钮显示的文字 (可选)
  • bg: 按钮的背景颜色 (可选)
  • color: 按钮文字的颜色 (可选)

Inline

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

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

Block

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
2
3
4
5
{% hideToggle 查看代码 %}

print("Hello World")

{% endhideToggle %}

复选框

示例

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

使用方法

官方文档: https://volantis.js.org/v5/tag-plugins/#checkbox

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, 蓝色 %}
查看CSS
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;
}
查看JS

需要将checkbox.js放入themes\butterfly\scripts\tag内

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
'use strict';

function postCheckbox(args) {
  args = args.join(' ').split(',')
  var cls = ''
  var text = ''
  var checked = false
  if (args.length > 1) {
    cls = (args[0] || '').trim()
    if (cls.length > 0) {
      cls = ' ' + cls
    }
    if (cls.indexOf('checked') > -1) {
      checked = true
    }
    text = (args[1] || '').trim()
  } else if (args.length > 0) {
    text = (args[0] || '').trim()
  }
  if (text.length > 0) {
    return `<div class='checkbox${cls}'><input type="checkbox" ${ checked ? 'checked="checked"' : '' }/>
            ${hexo.netder.netderSync({text: text, engine: 'markdown'}).split('\n').join('')}
            </div>`
  }
}
function postRadio(args) {
  args = args.join(' ').split(',')
  var cls = ''
  var text = ''
  var checked = false
  if (args.length > 1) {
    cls = (args[0] || '').trim()
    if (cls.length > 0) {
      cls = ' ' + cls
    }
    if (cls.indexOf('checked') > -1) {
      checked = true
    }
    text = (args[1] || '').trim()
  } else if (args.length > 0) {
    text = (args[0] || '').trim()
  }
  if (text.length > 0) {
    return `<div class='checkbox${cls}'><input type="radio" ${ checked ? 'checked="checked"' : '' }/>
            ${hexo.netder.netderSync({text: text, engine: 'markdown'}).split('\n').join('')}
            </div>`
  }
}
// {% checkbox text %}
// {% checkbox checked, text %}
// {% checkbox color checked, text %}
hexo.extend.tag.register('checkbox', postCheckbox);
hexo.extend.tag.register('radio', postRadio);

Button

示例

注意:这是Butterfly主题自带样式
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly
This is my website, click the button Butterfly

Butterfly
Butterfly
Butterfly

Butterfly
Butterfly
Butterfly
Butterfly
Butterfly
Butterfly
Butterfly

Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly Butterfly

官方文档： https://volantis.js.org/v5/tag-plugins/#富文本按钮

xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu
下载源码 查看文档
心率管家

专业版

` 心率管家

免费版

`

使用方法

Button

1
{% btn [url],[text],[icon],[color] [style] [layout] [position] [size] %}

富文本按钮

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

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/留空

富文本按钮

官方文档: https://volantis.js.org/v5/tag-plugins/#button

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

圆角样式

默认为方形

1
rounded, circle

布局方式

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

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

增加文字样式

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

Button

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
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,,outline %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,outline %}
This is my website, click the button {% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}

{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block center larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,block right outline larger %}

{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,blue larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,pink larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,red larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,purple larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,orange larger %}
{% btn 'https://butterfly.js.org/',Butterfly,far fa-hand-point-right,green larger %}

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

富文本按钮

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

1
2
3
4
5
6
7
{% 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
{% 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
{% 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
{% btns rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbtns %}
查看富文本按钮的CSS
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
[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);
  text-decoration: none !important;
}

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;
}
查看富文本按钮的JS

需要将btn.js放入themes\butterfly\scripts\tag内

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
'use strict';

function postBtns(args, content) {
  return `<div class="btns ${args.join(' ')}">
            ${content}
          </div>`;
}

function postCell(args, content) {
  args = args.join(' ').split(',')
  let text = args[0] || ''
  let url = args[1] || ''
  text = text.trim()
  url = url.trim()
  if (url.length > 0) {
    url = "href='" + url + "'"
  }
  let icon = ''
  let img = 'https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/placeholder/d570170f4f12e1ee829ca0e85a7dffeb77343a.svg'
  if (args.length > 2) {
    if (args[2].indexOf(' fa-') > -1) {
      icon = args[2].trim()
    } else {
      img = args[2].trim()
    }
  }
  if (icon.length > 0) {
    return `<a ${url} title='${text}'><i class='${icon}'></i>${text}</a>`
  } else {
    return `<a ${url} title='${text}'><img src='${img}'>${text}</a>`
  }
}

hexo.extend.tag.register('btns', postBtns, {ends: true});
hexo.extend.tag.register('cell', postCell);

tabs

注意:这是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

使用方法

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 curnett 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 curnett 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.

文档教程：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 %}

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

示例

Group Image Gallery
动漫

我喜欢的动漫

Group Image Gallery
明日方舟

我喜欢的手游

[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""}]

使用方法

Gallery相册图库

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：图库封面的地址

Gallery相册

1
2
3
{% gallery %}
markdown 图片格式
{% endgallery %}

Gallery相册图库

1
2
3
4
<div class="gallery-group-main">
{% galleryGroup '动漫' '我喜欢的动漫' '/Gallery/anime' https://api.paugram.com/wallpaper/?source=sina&category=us %}
{% galleryGroup '明日方舟' '我喜欢的手游' '/game/arknights/' https://cdn.jsdelivr.net/gh/zykjofficial/zykjimg/game/arknights.jpg %}
</div>

Gallery相册

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

inlineImg

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

https://butterfly.js.org/posts/4aa8abbe/#inlineImg

示例

你看我长得漂亮不

我觉得很漂亮

使用方法

主题中的图片都是默认以块级元素显示，如果你想以内联元素显示，可以使用这个标签外挂。

1
2
3
4
{% inlineImg [src] [height] %}

[src]      :    图片链接
[height]   ：   图片高度限制【可选】
1
2
3
4
5
你看我长得漂亮不

![](https://i.loli.net/2021/03/19/2P6ivUGsdaEXSFI.png)

我觉得很漂亮 {% inlineImg https://i.loli.net/2021/03/19/5M4jUB3ynq7ePgw.png 50px %}

timeline

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

https://butterfly.js.org/posts/4aa8abbe/#timeline

示例

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

2022

01-02

这是测试页面

使用方法

1
2
3
4
5
6
7
8
{% timeline title,color %}
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
<!-- timeline title -->
xxxxx
<!-- endtimeline -->
{% endtimeline %}
名称用法
title标题/时间线
colortimeline 颜色
default(留空) / blue / pink / red / purple / orange / green
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
{% timeline 2022 %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,blue %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,pink %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,red %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,purple %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,orange %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

{% timeline 2022,green %}
<!-- timeline 01-02 -->
这是测试页面
<!-- endtimeline -->
{% endtimeline %}

https://volantis.js.org/v5/tag-plugins/#link

示例

ZYKJ's Blog

https://zykj.js.org/

使用方法

1
{% link 标题, 链接, 图片 %}
1
{% link 如何参与项目, http://localhost:4000/contributors/, https://cdn.jsdelivr.net/gh/volantis-x/gcore-org/blog/Logo-NavBar@3x.png %}
查看CSS
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);
}
查看JS

需要将link.js放入themes\butterfly\scripts\tag内

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
'use strict';

// {% link title, url %}
// {% link title, url, img %}
hexo.extend.tag.register('link', function(args) {
  args = args.join(' ').split(',')
  let text = ''
  let url = ''
  let img = ''
  if (args.length > 1) {
    text = args[0].trim()
    url = args[1].trim()
  } else {
    return
  }
  if (args.length > 2) {
    img = args[2].trim()
    return `<div><a class='link-card' title='${url}' href='${url}'><div class='left'><img src=${img}></div><div class='right'><p class='text'>${text}</p><p class='url'>${url}</p></div></a></div>`;
  } else {
    return `<div><a class='link-card' title='${url}' href='${url}'><div class='left'><i class='fas fa-link'></i></div><div class='right'><p class='text'>${text}</p><p class='url'>${url}</p></div></a></div>`;
  }
});

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

https://butterfly.js.org/posts/4aa8abbe/#flink

示例

友情链接
那些人，那些事
ZYKJ's Blog
ZYKJ's Blog
做个普普通通的人.
Hexo
Hexo
快速、简单且强大的网誌框架
网站
值得推荐的网站
Youtube
Youtube
视频网站
Weibo
Weibo
中国最大社交分享平台
Twitter
Twitter
社交分享平台

使用方法

可在任何界面插入类似友情链接列表效果

内容格式与友情链接界面一样，支持 yml 格式

1
2
3
{% flink %}
xxxxxx
{% endflink %}
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
{% flink %}
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: ZYKJ's Blog
      link: https://zykj.js.org
      avatar: https://cdn.jsdelivr.net/gh/zykjofficial/zykjofficial.github.io@master/img/avatar.png
      descr: 做个普普通通的人.
    - name: Hexo
      link: https://hexo.io/zh-cn/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网誌框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台
{% endflink %}

github-badge

示例

PoweredHexo HostedVercel CDNjsDelivr ThemeButterfly 4.5.0-b1 BY-NC-SA 4.0

使用方法

方法一:直接添加Html、注意修改文字内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="github-badge">
  <a style="color: #fff"  href="https://hexo.io/" target="_blank" title="由 Hexo 强力驱动">
    <span class="badge-subject">Powered</span><span class="badge-value bg-blue">Hexo</span>
  </a>
  <a style="color: #fff" href="https://vercel.com/" target="_blank" title="静态网页托管于 Vercel" >
    <span class="badge-subject">Hosted</span><span class="badge-value bg-brightgreen">Vercel</span>
  </a>
  <a style="color: #fff" href="https://www.jsdelivr.com/" target="_blank" title="jsDelivr 提供 cdn 加速服务" >
    <span class="badge-subject">CDN</span><span class="badge-value bg-orange">jsDelivr</span></a><a style="color: #fff" href="https://github.com/jerryc127/hexo-theme-butterfly" target="_blank" title="站点使用 Butterfly 4.5.0-b1版本 主题" >
    <span class="badge-subject">Theme</span><span class="badge-value bg-blue">Butterfly 4.5.0-b1</span>
  </a>
  <a style="color: #fff" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" title="本站点采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可">
    <span class="badge-subject"><i class="fa fa-copyright"></i></span><span class="badge-value bg-lightgrey">BY-NC-SA 4.0</span>
  </a>
</div>

方法二: 通过 shields这个网站生成，速度可能比较慢

1
2
3
4
5
6
7
https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>

https://img.shields.io/static/v1?label=<LABEL>&message=<MESSAGE>&color=<COLOR>

https://img.shields.io/endpoint?url=<URL>&style<STYLE>

...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="github-badge">
  <a style="color: #fff"  href="https://hexo.io/" target="_blank" title="由 Hexo 强力驱动">
    <span class="badge-subject">Powered</span><span class="badge-value bg-blue">Hexo</span>
  </a>
  <a style="color: #fff" href="https://vercel.com/" target="_blank" title="静态网页托管于 Vercel" >
    <span class="badge-subject">Hosted</span><span class="badge-value bg-brightgreen">Vercel</span>
  </a>
  <a style="color: #fff" href="https://www.jsdelivr.com/" target="_blank" title="jsDelivr 提供 gcore 加速服务" >
    <span class="badge-subject">CDN</span><span class="badge-value bg-orange">jsDelivr</span></a><a style="color: #fff" href="https://github.com/jerryc127/hexo-theme-butterfly" target="_blank" title="站点使用 Butterfly 4.5.0-b1版本 主题" >
    <span class="badge-subject">Theme</span><span class="badge-value bg-blue">Butterfly 4.5.0-b1</span>
  </a>
  <a style="color: #fff" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" title="本站点采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可">
    <span class="badge-subject"><i class="fa fa-copyright"></i></span><span class="badge-value bg-lightgrey">BY-NC-SA 4.0</span>
  </a>
</div>

<img src="https://img.shields.io/badge/Hexo-6.0.0-blue">
<img src="https://img.shields.io/badge/Hosted-Vercel-brightgreen">
<img src="https://img.shields.io/badge/Butterfly-4.5.0-green">
查看github-badge的CSS
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
[data-theme="dark"] .github-badge {
  filter: brightness(0.7);
}

.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 13px;
  color: #fff;
  line-height: 15px;
  margin-bottom: 5px;
}

.github-badge a {
  display: inline-block;
  margin: 0 1px 5px;
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.github-badge .bg-brightgreen {
  background-color: #4dc820 !important;
}

.github-badge .bg-orange {
  background-color: #ffa500 !important;
}

.github-badge .bg-yellow {
  background-color: #d8b024 !important;
}

.github-badge .bg-blueviolet {
  background-color: #8833d7 !important;
}

.github-badge .bg-pink {
  background-color: #f26bae !important;
}

.github-badge .bg-red {
  background-color: #e05d44 !important;
}

.github-badge .bg-blue {
  background-color: #007ec6 !important;
}

.github-badge .bg-lightgrey {
  background-color: #9f9f9f !important;
}

.github-badge .bg-grey,
.github-badge .bg-gray {
  background-color: #555 !important;
}

.github-badge .bg-lightgrey,
.github-badge .bg-lightgray {
  background-color: #9f9f9f !important;
}

bubble

https://akilar.top/posts/615e2dec/

示例

最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的兄弟相邻选择器例如 h1 + p {margin-top:50px;}，flex布局Flex 是 Flexible Box 的缩写，意为弹性布局"，用来为盒状模型提供最大的灵活性"，transform变换transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。，animation的贝塞尔速度曲线贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋写法，还有今天刚看到的clip-pathclip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。

使用方法

内容来自：Akilarの糖果屋 - Tag Plugins Plus

目前发现移动端存在部分BUG

1
{% bubble [content] , [notation] ,[background-color] %}

content: 注释词汇
notation: 悬停显示的注解内容
background-color: 可选，气泡背景色。默认为“#71a4e3”

1
最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的{% bubble 兄弟相邻选择器,"例如 h1 + p {margin-top:50px;}" %}，{% bubble flex布局,"Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性","#ec5830" %}，{% bubble transform变换,"transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。","#1db675" %}，animation的{% bubble 贝塞尔速度曲线,"贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋","#de4489" %}写法，还有今天刚看到的{% bubble clip-path,"clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。","#868fd7" %}属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。
查看CSS
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
.bubble-content {
  display: inline-block;
  color: #e9a218;
  font-weight: 700;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  text-shadow: rgba(35,35,35,0.5)
}

.bubble-content:hover {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  color: #2c7fe7
}

.bubble-content:hover+.bubble-notation .bubble-item {
  -webkit-transform: translate(-40px,10px) rotateX(0);
  -moz-transform: translate(-40px,10px) rotateX(0);
  -o-transform: translate(-40px,10px) rotateX(0);
  -ms-transform: translate(-40px,10px) rotateX(0);
  transform: translate(-40px,10px) rotateX(0);
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  opacity: 1;
  -ms-filter: none;
  filter: none
}

.bubble-notation {
  display: inline-block
}

.bubble-item {
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  opacity: 0;
  color: #fff;
  z-index: 99;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  position: absolute;
  -webkit-transform: translate(-40px,10px) rotateX(90deg);
  -moz-transform: translate(-40px,10px) rotateX(90deg);
  -o-transform: translate(-40px,10px) rotateX(90deg);
  -ms-transform: translate(-40px,10px) rotateX(90deg);
  transform: translate(-40px,10px) rotateX(90deg);
  width: auto;
  height: auto;
  max-width: 400px;
  overflow: hidden;
  padding: 20px 10px 10px 10px;
  clip-path: polygon(5px 10px,20px 10px,30px 0,40px 10px,calc(100% - 5px) 10px,100% 15px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 15px,5px 10px)
}

[data-theme=dark] .bubble-content {
  color:#f2b94b;
}
查看JS

需要将bubble.js放入themes\butterfly\scripts\tag内

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * notation
 * {% bubble content,notation[,background-color] %}
 */

'use strict'

const urlFor = require('hexo-util').url_for.bind(hexo)

function bubble (args) {
  args = args.join(' ').split(',')
  const content = args[0]
  const notation = args[1]
  const color = args[2] ? args[2] : '#71a4e3'

  return `<span class="bubble-content">${content}</span><span class="bubble-notation"><span class="bubble-item" style="background-color:${color};">${notation}</span></span>`
}

hexo.extend.tag.register('bubble', bubble, { ends: false })

添加动效动画

示例

On DOM load
当页面加载时
显示动画		On hover
当鼠标悬停时
显示动画		On panett hover
当鼠标悬停
在父级元素时
显示动画
faa-wnetch animated faa-wnetch animated-hover faa-wnetch
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-tada animated faa-tada animated-hover faa-tada
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

使用方法

原文：Hexo 博客之 butterfly 主题优雅魔改系列

引入: https://cdn.jsdelivr.net/gh/zykjofficial/zykjresource@master/css/font-awesome-animation.min.css CSS样式

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

例如网址导航栏可以写为 - 主页 || / || fa-fw fas fa-house-user faa-shake animated

主页

看上面表格！

BiliBili视频播放器

示例

使用方法

方法1:

安装 hexo-tag-bilibili

1
npm install --save hexo-tag-bilibili

方法2: 我的 Blog 美化日记 ——Hexo+Butterfly

1
2
3
4
5
6
7
8
9
10
11
<div align=center class="aspect-ratio">
    <iframe src="https://player.bilibili.com/player.html?aid=57505556&&page=1&as_wide=1&high_quality=1&danmaku=0" 
    scrolling="no" 
    border="0" 
    frameborder="no" 
    framespacing="0" 
    high_quality=1
    danmaku=1 
    allowfullscreen="true"> 
    </iframe>
</div>

然后搭配这个CSS样式

1
2
3
4
5
6
7
8
9
/*哔哩哔哩视频适配*/
.aspect-ratio {position: relative;width: 100%;height: 0;padding-bottom: 75%;margin: 3% auto;text-align: center;}      
.aspect-ratio iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

方法1:

( 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] %}

方法2:

引入前面的HTML代码，注意将aid=57505556的数字改成你要展示的视频av号

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

示例

如果不显示可以强制刷新(Ctrl+F5)一下本页面

使用方法

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 "60198" "netease"  "playlist" "mutex:true" "listfolded:true" "listmaxheight:340px" "preload:none" "theme:#ad7a86"%}

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图标,请不要使用

Emoji表情查阅

常用Emoji

表情来自：https://www.zfuhao.com/emoji

😀😁😂😃😄😅😆😉😊😋😎😍😘😗😙😚😇😐😑😶😏😣😥😮😯😪😫😴😌😛😜😝😒😓😔😕😲😷😖😞😟😤😢😭😦😧😨😬😰😱😳😵😡😠😈

👹👺💀👻👽👦👧👨👩👴👵👶👱👮👲👳👷👸💂🎅👰👼💆💇🙍🙎🙅🙆💁🙋🙇🙌🙏👤👥🚶🏃👯💃👫👬👭💏💑👪💪👈👉☝👆👇✌✋👌👍👎✊👊👋👏👐✍

♈♉♊♋♌♍♎♏♐♑♒♓

💝💞💟❣❤🧡💛💚💙💜🤎🖤🤍

🙈🙉🙊🐵🐒🐶🐕🐩🐺🐱😺😸😹😻😼😽🙀😿😾🐈🐯🐅🐆🐴🐎🐮🐂🐃🐄🐷🐖🐗🐽🐏🐑🐐🐪🐫🐘🐭🐁🐀🐹🐰🐇🐻🐨🐼🐾🐔🐓🐣🐤🐥🐦🐧🐸🐊🐢🐍🐲🐉🐳🐋🐬🐟🐠🐡🐙🐚🐌🐛🐜🐝🐞�🐚🌎🌍🌏🌕🌖🌗🌘🌑🌒🌓🌔🌙🍀🌿☘🌱🌴🌳⭐🌟💫✨☄🪐🌞☀🌤⛅🌥🌦☁🌧⛈🌩⚡⚡💥❄🌨☃⛄🌬💨🌪🌫☔🖋

🎪🎭🎨🎰🚣🛀🎫🏆⚽⚾🏀🏈🏉🎾🎱🎳⛳🎣🎽🎿🏂🏄🏇🏊🚴🚵🎯🎮🎲🎷🎸🎺🎻🎬👾🌋🗻🏠🏡🏢🏣🏤🏥🏦🏨🏩🏪🏫🏬🏭🏯🏰💒🗼🗽⛪⛲🌁🌃🌆🌇🌉🌌🎠🎡🎢🚂🚃🚄🚅🚆🚇🚈🚉🚊🚝🚞🚋🚌🚍🚎🚏🚐🚑🚒🚓🚔🚕🚖🚗🚘🚚🚛🚜🚲⛽🚨🚥🚦🚧⚓⛵🚤🚢✈

🚁🚟🚠🚡🚀🎑🗿🛂🛃🛄🛅💌💎🔪💈🚪🚽🚿🛁⌛⏳⌚⏰🎈🎉🎊🎎🎏🎐🎀🎁📯📻📱📲☎📞📟📠🔋🔌💻💽💾💿📀🎥📺📷📹📼🔍🔎🔬🔭📡💡🔦🏮📔📕📖📗📘📙📚📓📃📜📄📰📑🔖💰💴💵💶💷💸💳✉📧📨📩📤📥📦📫📪📬📭📮✏✒📝📁📂📅📆📇📈📉📊📋📌📍📎📏📐✂🔒🔓🔏🔐🔑🔨🔫🔧🔩🔗💉💊🚬🔮🚩🎌💦💨💣☠♠♥♦♣🀄🎴🔇🔈🔉🔊📢📣💤💢💬💭♨🌀🔔🔕✡✝

🍏🍎🍐🍊🍋🍌🍉🍇🍓🍈🍒🍑🥭🍍🥥🥝🍅🥑🍆🌶🥒🥬🥦🧄🌽🧅🥕🥗🥔🍠🥜🍯🍞🥐🥖🥨🥯🧇🥞🧀🍗🍖🥩🍤🥚🥚🍳🥓🍔🍟🌭🍕🍝🥪🌮🌯🥙🧆🍜🍲🥘🧂🧈🍥🍱🍣🍙🍛🍘🍚🥟🍢🍡🍧🍨🍦🍰🎂🧁🥧🍮🍭🍬🍫🍿🍩🍪🥮🥠☕🍵🥣🍼🥤🧃🧉🥛🍺🍻🍷🥂🥃🍸🍹🍾🍶🧊🥄🍴🍽🥢

GitHub Emoji

表情来自：https://github.com/SmallOyster/emoji 、或者在 https://emojipedia.org/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:🔧:wnetch:
🔩: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_tnetd:📉:chart_with_downwards_tnetd:📜: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_stnetgth:🈹: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:🚸:childnet_crossing:⛔️:no_entry:
✳️:eight_spoked_asterisk:✴️:eight_pointed_black_star:💟:heart_decoration:
🆚:vs:📳:vibration_mode:📴:mobile_phone_off:
💹:chart:💱:curnetcy_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: