介绍

  1. 本篇文章主要是针对Butterfly主题魔改样式，自带样式查看：Butterfly主题魔改样式查阅(自带篇)

  2. 确保Butterfly主题与我相同、否则部分样式可能没有、DIY样式有源码查看选项

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

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

  5. 魔改CSS样式放入themes\butterfly\source\css并且在_config.butterfly.yml中inject->head引入 , tag样式放入themes\butterfly\scripts\tag

text

Volantis 标签外挂

示例

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

键盘样式的文本：⌘ + 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>`;
});

上标式标签

示例

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

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

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

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

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

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

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

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

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

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

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

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

使用方法

1
{% tip [icon] %}文本内容{% endtip %}
名称用法
icon颜色 (info / success / error / warning / wtgo / ban / home / important / ref / ffa / key / socd)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% tip info %}为简单的一句话提供的简便写法。{% endtip %}

{% tip success %}为简单的一句话提供的简便写法。{% endtip %}

{% tip error %}为简单的一句话提供的简便写法。{% endtip %}

{% tip warning %}为简单的一句话提供的简便写法。{% endtip %}

{% tip wtgo %}为简单的一句话提供的简便写法。{% endtip %}

{% tip ban %}为简单的一句话提供的简便写法。{% endtip %}

{% tip home %}为简单的一句话提供的简便写法。{% endtip %}

{% tip important %}为简单的一句话提供的简便写法。{% endtip %}

{% tip ref %}为简单的一句话提供的简便写法。{% endtip %}

{% tip ffa %}为简单的一句话提供的简便写法。{% endtip %}

{% tip key %}为简单的一句话提供的简便写法。{% endtip %}

{% tip socd %}为简单的一句话提供的简便写法。{% endtip %}
查看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);
}
查看JS

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

1
2
3
4
5
6
7
8
9
10
11
12
/**
 * tip
 * {% tip icon %}{% endtip %}
 */

'use strict'

function tip (args, content) {
  return `<div class="tip ${args.join(' ')}">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div>`
}

hexo.extend.tag.register('tip',tip, { ends: true })

小标签

小康博客 - Hexo 博客之 butterfly 主题优雅魔改系列

示例

绿色

红色

黄色

灰色

蓝色

红色小标签

绿色小标签

蓝色小标签

黄色小标签

灰色小标签

绿色

使用方法

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>
查看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
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

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

示例

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

超大号文字：

A Wonderful Theme for Hexo

使用方法

官方文档：https://volantis.js.org/v7/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
3
4
5
各种颜色的标签，包括：{% 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 %}
查看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
[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;
}
查看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);

复选框

Volantis 标签外挂

示例

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色 + 默认选中

黄色 + 默认选中

青色 + 默认选中

蓝色 + 默认选中

增加

减少

叉

纯文本测试

支持简单的 markdown 语法

支持自定义颜色

绿色

黄色

青色

蓝色

使用方法

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

Volantis 标签外挂

示例

ZYKJ

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

github-badge

示例

PoweredHexo HostedVercel CDNjsDelivr ThemeButterfly 5.5.5 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 5.5.5版本 主题" >
    <span class="badge-subject">Theme</span><span class="badge-value bg-blue">Butterfly 5.5.5</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
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 5.5.5版本 主题" >
    <span class="badge-subject">Theme</span><span class="badge-value bg-blue">Butterfly 5.5.5</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-8.1.2-blue">
<img src="https://img.shields.io/badge/Hosted-Vercel-brightgreen">
<img src="https://img.shields.io/badge/Butterfly-5.5.5-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

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

示例

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

使用方法

目前发现移动端存在部分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 })

card

card 标签，用于显示卡片。

内容来自：外挂标签使用

示例

第一次接触这种西方文学小说，刚开始感觉看不懂，断断续续看了很多次。后来越看越觉好看，每次看甚至都需要查“文档”查看详情
小说
诡秘之主
评分 4.5

使用方法

1
{% card 'title','url','cover','score','desc','icon','tag','width','height' %}
参数说明默认值
title标题无
url链接无
cover封面无
score评分无
desc评价无
icon图标无
tag标签无
width宽度无
height高度无
1
{% card '诡秘之主','https://book.qidian.com/info/1010868264/','https://bookcover.yuewen.com/qdbimg/349573/1010868264/300','4.5','第一次接触这种西方文学小说，刚开始感觉看不懂，断断续续看了很多次。后来越看越觉好看，每次看甚至都需要查“文档”','fa-solid fa-book-open','小说' %}
查看styl

需要将card.styl放入themes\butterfly\source\css\_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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
.card_box
  display: flex
  justify-content: space-between
  flex-direction: column
  background-position: center
  background-size: cover
  border-radius: 12px
  position: relative
  overflow: hidden
  padding: 10px
  color: #fff !important
  margin: 10px auto
  &::after
    content: ''
    position: absolute
    height: 100%
    width: 100%
    left: 0
    top: 0
    background: rgba(0,0,0,0.1)
    transition: .5s
    z-index: 0
  &:hover
    .card_mask
      opacity: 1
      pointer-events: auto
  .card_top
    display: flex
    z-index: 1
    align-items: center
    justify-content: space-between
  .card_mask
    position: absolute
    pointer-events: none
    z-index: 2
    transition: .5s
    opacity: 0
    width: 100%
    height: 100%
    left: 0
    top: 0
    padding: 20px
    background: #333
    span
      display: block
      height: calc(100% - 40px)
      overflow: auto
    a
      text-align: center
      background: #fff
      color: #333 !important
      border-radius: 5px
      border-bottom none !important
      position: absolute
      width: calc(100% - 40px)
      bottom: 20px
      left: 20px
      &:hover
        text-decoration: none !important
        color: white !important
        background: #49b1f5

  .card_content
    z-index: 1
    span
      font-size: 18px
      font-weight: bold

[data-theme='dark']
  .card_box
    color: #ddd !important
    &::after
      background: rgba(0,0,0,0.4)
查看JS

需要将card.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
/**
 * solitude
 * card
 * https://everfu.github.io/solitude-demo/posts/8f9926b7.html
 * {% card 'title','url','cover','score','desc','icon','tag','width','height' %}
 */
'use strict'

const { htmlTag } = require('hexo-util')

let _card = false;

function cardTag(args) {

    console.log(args)
    _card = true;
    // 分数转成星星
    function toStar(num) {
        const fullStars = Math.floor(num);
        const halfStar = num - fullStars !== 0 ? '<i class="fa-solid fa-star-half-alt"></i>' : '';
        const emptyStars = 5 - Math.ceil(num);
        return '<i class="fa-solid fa-star"></i>'.repeat(fullStars) + halfStar + '<i class="fa-regular fa-star"></i>'.repeat(emptyStars);
    }
    const [name = '未知', url = '', bg = '', star = '0', text = '此作品博主暂未作出评价', icon = '', tag = '', w = '200px', h = '275px'] = args.join(' ').split(',').map(arg => arg.trim());
    const backgroundStyle = bg ? `background-image: url(${bg});` : 'background-color: #333;';
    const starHtml = toStar(Number(star));
    return htmlTag('div', {
        title: name,
        referrerPolicy: 'no-referrer',
        class: 'card_box',
        style: `${backgroundStyle} width:${w}; height:${h};`
    }, htmlTag('div', { class: 'card_mask' }, htmlTag('span', {}, text, false)
        + (url ? htmlTag('a', { href: url }, '查看详情', false) : ''), false)
    + htmlTag('div', { class: 'card_top' }, htmlTag('i', { class: icon }, '', false)
        + htmlTag('span', {}, tag, false), false)
    + htmlTag('div', { class: 'card_content' }, htmlTag('span', {}, name, false)
        + htmlTag('div', {}, starHtml, false), false), false);
}

hexo.extend.tag.register('card', cardTag);

魔改版：

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
/**
 * solitude
 * card
 * https://everfu.github.io/solitude-demo/posts/8f9926b7.html
 * {% card 'title','url','cover','score','desc','icon','tag','width','height' %}
 */
'use strict'

const { htmlTag } = require('hexo-util')

let _card = false;

function cardTag(args) {
    _card = true;
    function toStar(num) {
        return '<div class="card_rating"><span>评分 ' + num + '</span></div>';
    }
    const [name = '未知', url = '', bg = '', star = '0', text = '此作品博主暂未作出评价', icon = '', tag = '', w = '200px', h = '275px'] = args.join(' ').split(',').map(arg => arg.trim());
    const backgroundStyle = bg ? `background-image: url(${bg});` : 'background-color: #333;';
    const starHtml = toStar(star);
    return htmlTag('div', {
        title: name,
        referrerPolicy: 'no-referrer',
        class: 'card_box',
        style: `${backgroundStyle} width:${w}; height:${h};`
    }, htmlTag('div', { class: 'card_mask' }, htmlTag('span', {}, text, false)
        + (url ? htmlTag('a', { href: url }, '查看详情', false) : ''), false)
    + htmlTag('div', { class: 'card_top' }, htmlTag('i', { class: icon }, '', false)
        + htmlTag('span', {}, tag, false), false)
    + htmlTag('div', { class: 'card_content' }, htmlTag('span', {}, name, false)
        + htmlTag('div', {}, starHtml, false), false), false);
}

hexo.extend.tag.register('card', cardTag);

诗歌

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

示例

水调歌头
苏轼

丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。

使用方法

1
2
3
{% poem [title],[author] %}
诗词内容
{% endpoem %}
参数说明
title诗词标题
author作者，可以不写
1
2
3
4
5
6
7
8
9
10
11
12
{% poem 水调歌头,苏轼 %}
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？

转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
{% endpoem %}
查看CSS

请注意：src: url("../font/Poem.ttf"); 的Poem.ttf可以在 Poem.ttf 下载

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
@media (min-width: 1200px) {
  .poem {
    margin: 0 auto;
    height: auto;
    writing-mode: vertical-rl;
    writing-mode: tb-rl;
  }
  .poem p {
    text-decoration: underline;
    text-decoration-color: rgba(193,11,11,0.72);
    text-decoration-style: dashed;
  }
}
@font-face {
  font-family: 'Poem';
  src: url("../font/Poem.ttf");
  font-display: swap;
}
.poem p {
  font-family: 'Poem', 'KaiTi', sans-serif !important;
  font-size: 25px;
  text-align: center;
}
.poem-title {
  font-family: 'Poem', 'KaiTi', sans-serif !important;
  font-size: 2.5em;
  text-align: center;
}
.poem-author {
  text-align: center !important;
  font-family: 'Poem', 'KaiTi', sans-serif !important;
  font-size: 16px;
  color: #424242;
}
查看JS

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * poem
 * {% poem [title],[author] %}text{% endpoem %}
 */

'use strict'

function poem (args, content) {
  args = args.join(' ').split(',')
  let p0 = args[0]
  let p1 = args[1]?args[1]:''
  return `<div class='poem'><div class='poem-title'>${p0}</div><div class='poem-author'>${p1}</div>${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div>`
}

hexo.extend.tag.register('poem',poem,{ ends: true });

进度条

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

示例

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

进度条样式预览

使用方法

1
{% progress [width] [color] [text] %}
参数说明
width0到100的阿拉伯数字
color颜色，取值有red ,yellow ,green ,cyan ,blue ,gray
text进度条上的文字内容
1
2
3
4
5
6
{% progress 10 red 进度条样式预览 %}
{% progress 30 yellow 进度条样式预览 %}
{% progress 50 green 进度条样式预览 %}
{% progress 70 cyan 进度条样式预览 %}
{% progress 90 blue 进度条样式预览 %}
{% progress 100 gray 进度条样式预览 %}
查看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
.card_box {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  background-position: center;
  background-size: cover;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  padding: 10px;
  color: #fff !important;
  margin: 10px auto;
}
.card_box::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.1);
  transition: 0.5s;
  z-index: 0;
}
.card_box:hover .card_mask {
  opacity: 1;
  pointer-events: auto;
}
.card_box .card_top {
  display: flex;
  z-index: 1;
  align-items: center;
  justify-content: space-between;
}
.card_box .card_mask {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  transition: 0.5s;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 20px;
  background: #333;
}
.card_box .card_mask span {
  display: block;
  height: calc(100% - 40px);
  overflow: auto;
}
.card_box .card_mask a {
  text-align: center;
  background: #fff;
  color: #333 !important;
  border-radius: 5px;
  border-bottom: none !important;
  position: absolute;
  width: calc(100% - 40px);
  bottom: 20px;
  left: 20px;
}
.card_box .card_mask a:hover {
  text-decoration: none !important;
  color: #fff !important;
  background: #49b1f5;
}
.card_box .card_content {
  z-index: 1;
}
.card_box .card_content span {
  font-size: 18px;
  font-weight: bold;
}
[data-theme='dark'] .card_box {
  color: #ddd !important;
}
[data-theme='dark'] .card_box::after {
  background: rgba(0,0,0,0.4);
}
查看JS

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

1
2
3
4
5
6
7
8
9
10
11
'use strict';
function postprogress(args) {
  args = args.join(',').split(',')
  if (args.length > 1) {
    let pwidth = args[0].trim()
    let pcolor = args[1].trim()
    let text = args[2].trim()
    return `<div class="progress"><div class="progress-bar-animated progress-bar progress-bar-striped bg-${pcolor}"  style="width: ${pwidth}%" aria-valuenow="${pwidth}" aria-valuemin="0" aria-valuemax="100">${hexo.render.renderSync({text: text, engine: 'markdown'}).split('\n').join('')}</div></div>`;
  }
}
hexo.extend.tag.register('progress', postprogress);

添加动效动画

示例

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"%}

富文本按钮

示例

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

xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu

或者含有图标的按钮：

下载源码 查看文档

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

心率管家

专业版

 心率管家

免费版

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

xaoxuu xaoxuu xaoxuu xaoxuu xaoxuu

或者含有图标的按钮：

下载源码 查看文档

使用方法

富文本按钮

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

富文本按钮

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

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

圆角样式

默认为方形

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
{% buttoms 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 %}
{% endbuttoms %}

或者含有图标的按钮：

1
2
3
4
{% buttoms rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbuttoms %}

圆形图标 + 标题 + 描述 + 图片 + 网格5列 + 居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% buttoms 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>
{% endbuttoms %}

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

1
2
3
4
5
6
7
{% buttoms 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 %}
{% endbuttoms %}

或者含有图标的按钮：

1
2
3
4
{% buttoms rounded grid5 %}
{% cell 下载源码, /, fas fa-download %}
{% cell 查看文档, /, fas fa-book-open %}
{% endbuttoms %}
查看富文本按钮的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内,目前发现和自带buttom有冲突,btn和btns,所以将原来的btns改成了buttoms

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

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

function postCell(args, content) {
  if (/::/g.test(args)) {
    args = args.join(' ').split('::');
  }
  else {
    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 = hexo.theme.config.avatar.img
  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 class="button" ${url} title='${text}'><i class='${icon}'></i>${text}</a>`;
  }
  return `<a class="button" ${url} title='${text}'><img src='${img}'>${text}</a>`;

}

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

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://meuicat.com/posts/39279693.html

表情名称表情名称表情名称
😀嘿嘿😃哈哈😄大笑
😁嘻嘻😆斜眼笑😅苦笑
🤣笑得满地打滚😂笑哭了🙂呵呵
🙃倒脸😉眨眼😊羞涩微笑
😇微笑天使🥰喜笑颜开😍花痴
🤩好崇拜哦😘飞吻😗亲亲
☺️微笑😚羞涩亲亲😙微笑亲亲
😋好吃😛吐舌😜单眼吐舌
🤪滑稽😝眯眼吐舌🤑发财
🤗抱抱🤭不说🤫安静的脸
🤔想一想🤐闭嘴🤨挑眉
😐冷漠😑无语😶沉默
😏得意😒不高兴🙄翻白眼
😬龇牙咧嘴🤥说谎😌松了口气
😔沉思😪困🤤流口水
😴睡着了😷感冒🤒发烧
🤕受伤🤢恶心🤮呕吐
🤧打喷嚏🥵脸发烧🥶冷脸
🥴头昏眼花😵晕头转向🤯爆炸头
🤠牛仔帽脸🥳聚会笑脸😎墨镜笑脸
🤓书呆子脸🧐带单片眼镜的脸😕困扰
😟担心🙁微微不满☹️不满
😮吃惊😯缄默😲震惊
😳脸红🥺恳求的脸😦啊
😧极度痛苦😨害怕😰冷汗
😥失望但如释重负😢哭😭放声大哭
😱吓死了😖困惑😣痛苦
😞失望😓汗😩累死了
😫累🥱打呵欠😤傲慢
😡怒火中烧😠生气🤬嘴上有符号的脸
😈恶魔微笑👿生气的恶魔💀头骨
☠️骷髅💩大便🤡小丑脸
👹食人魔👺小妖精👻鬼
👽外星人👾外星怪物🤖机器人
😺大笑的猫😸微笑的猫😹笑出眼泪的猫
😻花痴的猫😼奸笑的猫😽亲亲猫
🙀疲倦的猫😿哭泣的猫😾生气的猫
🙈非礼勿视🙉非礼勿听🙊非礼勿言
💋唇印💌情书💘心中箭了
💝系有缎带的心💖闪亮的心💗搏动的心
💓心跳💞舞动的心💕两颗心
💟心型装饰❣️心叹号💔心碎
❤️红心🧡橙心💛黄心
💚绿心💙蓝心💜紫心
🤎棕心🖤黑心🤍白心
💯一百分💢怒💥爆炸
💫头晕💦汗滴💨尾气
🕳️洞💣炸弹💬话语气泡
👁️‍🗨️眼睛对话框🗨️朝左的话语气泡🗯️愤怒话语气泡
💭内心活动气泡💤睡着
表情名称表情名称表情名称
👋挥手🤚立起的手背🖐️手掌
✋举起手🖖瓦肯举手礼👌OK
🤏捏合的手势✌️胜利手势🤞交叉的手指
🤟爱你的手势🤘摇滚🤙给我打电话
👈反手食指向左指👉反手食指向右指👆反手食指向上指
🖕竖中指👇反手食指向下指☝️食指向上指
👍拇指向上👎拇指向下✊举起拳头
👊出拳🤛朝左的拳头🤜朝右的拳头
👏鼓掌🙌举双手👐张开双手
🤲掌心向上托起🤝握手🙏双手合十
✍️写字💅涂指甲油🤳自拍
💪肌肉🦾机械手臂🦿机械腿
🦵腿🦶脚👂耳朵
🦻戴助听器的耳朵👃鼻子🧠脑
🦷牙齿🦴骨头👀双眼
👁️眼睛👅舌头👄嘴
👶小宝贝🧒儿童👦男孩
👧女孩🧑成人👱金色头发的人
👨男人🧔有胡子的人👱‍♂️金发男
👨‍🦰男人: 红发👨‍🦱男人: 卷发👨‍🦳男人: 白发
👨‍🦲男人: 秃顶👩女人👱‍♀️金发女
👩‍🦰女人: 红发👩‍🦱女人: 卷发👩‍🦳女人: 白发
👩‍🦲女人: 秃顶🧓老年人👴老爷爷
👵老奶奶🙍皱眉🙍‍♂️皱眉男
🙍‍♀️皱眉女🙎撅嘴🙎‍♂️撅嘴男
🙎‍♀️撅嘴女🙅禁止手势🙅‍♂️禁止手势男
🙅‍♀️禁止手势女🙆OK手势🙆‍♂️OK手势男
🙆‍♀️OK手势女💁前台💁‍♂️前台男
💁‍♀️前台女🙋举手🙋‍♂️男生举手
🙋‍♀️女生举手🧏失聪者🧏‍♂️失聪的男人
🧏‍♀️失聪的女人🙇鞠躬🙇‍♂️男生鞠躬
🙇‍♀️女生鞠躬🤦捂脸🤦‍♂️男生捂脸
🤦‍♀️女生捂脸🤷耸肩🤷‍♂️男生耸肩
🤷‍♀️女生耸肩👨‍⚕️男医生👩‍⚕️女医生
👨‍🎓男学生👩‍🎓女学生👨‍🏫男老师
👩‍🏫女老师👨‍⚖️男法官👩‍⚖️女法官
👨‍🌾农夫👩‍🌾农妇👨‍🍳男厨师
👩‍🍳女厨师👨‍🔧男技工👩‍🔧女技工
👨‍🏭男工人👩‍🏭女工人👨‍💼男白领
👩‍💼女白领👨‍🔬男科学家👩‍🔬女科学家
👨‍💻男程序员👩‍💻女程序员👨‍🎤男歌手
👩‍🎤女歌手👨‍🎨男艺术家👩‍🎨女艺术家
👨‍✈️男飞行员👩‍✈️女飞行员👨‍🚀男宇航员
👩‍🚀女宇航员👨‍🚒男消防员👩‍🚒女消防员
👮警察👮‍♂️男警察👮‍♀️女警察
🕵️侦探🕵️‍♂️男侦探🕵️‍♀️女侦探
💂卫兵💂‍♂️男卫兵💂‍♀️女卫兵
👷建筑工人👷‍♂️男建筑工人👷‍♀️女建筑工人
🤴王子👸公主👳戴头巾的人
👳‍♂️戴头巾的男人👳‍♀️戴头巾的女人👲戴瓜皮帽的人
🧕带头饰的女人🤵穿燕尾服的男人👰戴头纱的新娘
🤰孕妇🤱母乳喂养👼小天使
🎅圣诞老人🤶圣诞奶奶🦸超级英雄
🦸‍♂️男超级英雄🦸‍♀️女超级英雄🦹超级大坏蛋
🦹‍♂️男超级大坏蛋🦹‍♀️女超级大坏蛋🧙法师
🧙‍♂️男法师🧙‍♀️女法师🧚精灵
🧚‍♂️仙人🧚‍♀️仙女🧛吸血鬼
🧛‍♂️男吸血鬼🧛‍♀️女吸血鬼🧜人鱼
🧜‍♂️男人鱼🧜‍♀️美人鱼🧝小精灵
🧝‍♂️男小精灵🧝‍♀️女小精灵🧞妖怪
🧞‍♂️男妖怪🧞‍♀️女妖怪🧟僵尸
🧟‍♂️男僵尸🧟‍♀️女僵尸💆按摩
💆‍♂️男生按摩💆‍♀️女生按摩💇理发
💇‍♂️男生理发💇‍♀️女生理发🚶行人
🚶‍♂️男行人🚶‍♀️女行人🧍站立者
🧍‍♂️站立的男人🧍‍♀️站立的女人🧎下跪者
🧎‍♂️跪下的男人🧎‍♀️跪下的女人👨‍🦯拄盲杖的男人
👩‍🦯拄盲杖的女人👨‍🦼坐电动轮椅的男人👩‍🦼坐电动轮椅的女人
👨‍🦽坐手动轮椅的男人👩‍🦽坐手动轮椅的女人🏃跑步者
🏃‍♂️男生跑步🏃‍♀️女生跑步💃跳舞的女人
🕺跳舞的男人🕴️西装革履的人👯戴兔耳朵的人
👯‍♂️兔先生👯‍♀️兔女郎🧖蒸房里的人
🧖‍♂️蒸房里的男人🧖‍♀️蒸房里的女人🧗攀爬的人
🧗‍♂️攀爬的男人🧗‍♀️攀爬的女人🤺击剑选手
🏇赛马⛷️滑雪的人🏂滑雪板
🏌️打高尔夫的人🏌️‍♂️男生打高尔夫🏌️‍♀️女生打高尔夫
🏄冲浪🏄‍♂️男生冲浪🏄‍♀️女生冲浪
🚣划艇🚣‍♂️男生划船🚣‍♀️女生划船
🏊游泳🏊‍♂️男生游泳🏊‍♀️女生游泳
⛹️玩球⛹️‍♂️男生玩球⛹️‍♀️女生玩球
🏋️举重🏋️‍♂️男生举重🏋️‍♀️女生举重
🚴骑自行车🚴‍♂️男生骑自行车🚴‍♀️女生骑自行车
🚵骑山地车🚵‍♂️男生骑山地车🚵‍♀️女生骑山地车
🤸侧手翻🤸‍♂️男生侧手翻🤸‍♀️女生侧手翻
🤼摔跤选手🤼‍♂️男生摔跤🤼‍♀️女生摔跤
🤽水球🤽‍♂️男生玩水球🤽‍♀️女生玩水球
🤾手球🤾‍♂️男生玩手球🤾‍♀️女生玩手球
🤹抛接杂耍🤹‍♂️男生抛接杂耍🤹‍♀️女生抛接杂耍
🧘盘腿的人🧘‍♂️盘腿的男人🧘‍♀️盘腿的女人
🛀洗澡的人🛌躺在床上的人🧑‍🤝‍🧑手拉手的两个人
🧑🏻‍🤝‍🧑🏻手拉手的两个人较浅肤色🧑🏼‍🤝‍🧑🏻手拉手的两个人中等-浅肤色较浅肤色🧑🏼‍🤝‍🧑🏼手拉手的两个人中等-浅肤色
🧑🏽‍🤝‍🧑🏻手拉手的两个人中等肤色较浅肤色🧑🏽‍🤝‍🧑🏼手拉手的两个人中等肤色中等-浅肤色🧑🏽‍🤝‍🧑🏽手拉手的两个人中等肤色
🧑🏾‍🤝‍🧑🏻手拉手的两个人中等-深肤色较浅肤色🧑🏾‍🤝‍🧑🏼手拉手的两个人中等-深肤色中等-浅肤色🧑🏾‍🤝‍🧑🏽手拉手的两个人中等-深肤色中等肤色
🧑🏾‍🤝‍🧑🏾手拉手的两个人中等-深肤色🧑🏿‍🤝‍🧑🏻手拉手的两个人较深肤色较浅肤色🧑🏿‍🤝‍🧑🏼手拉手的两个人较深肤色中等-浅肤色
🧑🏿‍🤝‍🧑🏽手拉手的两个人较深肤色中等肤色🧑🏿‍🤝‍🧑🏾手拉手的两个人较深肤色中等-深肤色🧑🏿‍🤝‍🧑🏿手拉手的两个人较深肤色
👭手拉手的两个女人👭🏻手拉手的两个女人较浅肤色👩🏼‍🤝‍👩🏻手拉手的两个女人中等-浅肤色较浅肤色
👭🏼手拉手的两个女人中等-浅肤色👩🏽‍🤝‍👩🏻手拉手的两个女人中等肤色较浅肤色👩🏽‍🤝‍👩🏼手拉手的两个女人中等肤色中等-浅肤色
👭🏽手拉手的两个女人中等肤色👩🏾‍🤝‍👩🏻手拉手的两个女人中等-深肤色较浅肤色👩🏾‍🤝‍👩🏼手拉手的两个女人中等-深肤色中等-浅肤色
👩🏾‍🤝‍👩🏽手拉手的两个女人中等-深肤色中等肤色👭🏾手拉手的两个女人中等-深肤色👩🏿‍🤝‍👩🏻手拉手的两个女人较深肤色较浅肤色
👩🏿‍🤝‍👩🏼手拉手的两个女人较深肤色中等-浅肤色👩🏿‍🤝‍👩🏽手拉手的两个女人较深肤色中等肤色👩🏿‍🤝‍👩🏾手拉手的两个女人较深肤色中等-深肤色
👭🏿手拉手的两个女人较深肤色👫手拉手的一男一女👫🏻手拉手的一男一女较浅肤色
👩🏻‍🤝‍👨🏼手拉手的一男一女较浅肤色中等-浅肤色👩🏻‍🤝‍👨🏽手拉手的一男一女较浅肤色中等肤色👩🏻‍🤝‍👨🏾手拉手的一男一女较浅肤色中等-深肤色
👩🏻‍🤝‍👨🏿手拉手的一男一女较浅肤色较深肤色👩🏼‍🤝‍👨🏻手拉手的一男一女中等-浅肤色较浅肤色👫🏼手拉手的一男一女中等-浅肤色
👩🏼‍🤝‍👨🏽手拉手的一男一女中等-浅肤色中等肤色👩🏼‍🤝‍👨🏾手拉手的一男一女中等-浅肤色中等-深肤色👩🏼‍🤝‍👨🏿手拉手的一男一女中等-浅肤色较深肤色
👩🏽‍🤝‍👨🏻手拉手的一男一女中等肤色较浅肤色👩🏽‍🤝‍👨🏼手拉手的一男一女中等肤色中等-浅肤色👫🏽手拉手的一男一女中等肤色
👩🏽‍🤝‍👨🏾手拉手的一男一女中等肤色中等-深肤色👩🏽‍🤝‍👨🏿手拉手的一男一女中等肤色较深肤色👩🏾‍🤝‍👨🏻手拉手的一男一女中等-深肤色较浅肤色
👩🏾‍🤝‍👨🏼手拉手的一男一女中等-深肤色中等-浅肤色👩🏾‍🤝‍👨🏽手拉手的一男一女中等-深肤色中等肤色👫🏾手拉手的一男一女中等-深肤色
👩🏾‍🤝‍👨🏿手拉手的一男一女中等-深肤色较深肤色👩🏿‍🤝‍👨🏻手拉手的一男一女较深肤色较浅肤色👩🏿‍🤝‍👨🏼手拉手的一男一女较深肤色中等-浅肤色
👩🏿‍🤝‍👨🏽手拉手的一男一女较深肤色中等肤色👩🏿‍🤝‍👨🏾手拉手的一男一女较深肤色中等-深肤色👫🏿手拉手的一男一女较深肤色
👬手拉手的两个男人👬🏻手拉手的两个男人较浅肤色👨🏼‍🤝‍👨🏻手拉手的两个男人中等-浅肤色较浅肤色
👬🏼手拉手的两个男人中等-浅肤色👨🏽‍🤝‍👨🏻手拉手的两个男人中等肤色较浅肤色👨🏽‍🤝‍👨🏼手拉手的两个男人中等肤色中等-浅肤色
👬🏽手拉手的两个男人中等肤色👨🏾‍🤝‍👨🏻手拉手的两个男人中等-深肤色较浅肤色👨🏾‍🤝‍👨🏼手拉手的两个男人中等-深肤色中等-浅肤色
👨🏾‍🤝‍👨🏽手拉手的两个男人中等-深肤色中等肤色👬🏾手拉手的两个男人中等-深肤色👨🏿‍🤝‍👨🏻手拉手的两个男人较深肤色较浅肤色
👨🏿‍🤝‍👨🏼手拉手的两个男人较深肤色中等-浅肤色👨🏿‍🤝‍👨🏽手拉手的两个男人较深肤色中等肤色👨🏿‍🤝‍👨🏾手拉手的两个男人较深肤色中等-深肤色
👬🏿手拉手的两个男人较深肤色💏亲吻👩‍❤️‍💋‍👨亲吻女人男人
👨‍❤️‍💋‍👨亲吻男人男人👩‍❤️‍💋‍👩亲吻女人女人💑情侣
👩‍❤️‍👨情侣女人男人👨‍❤️‍👨情侣男人男人👩‍❤️‍👩情侣女人女人
👪家庭👨‍👩‍👦家庭男人女人男孩👨‍👩‍👧家庭男人女人女孩
👨‍👩‍👧‍👦家庭男人女人女孩男孩👨‍👩‍👦‍👦家庭男人女人男孩男孩👨‍👩‍👧‍👧家庭男人女人女孩女孩
👨‍👨‍👦家庭男人男人男孩👨‍👨‍👧家庭男人男人女孩👨‍👨‍👧‍👦家庭男人男人女孩男孩
👨‍👨‍👦‍👦家庭男人男人男孩男孩👨‍👨‍👧‍👧家庭男人男人女孩女孩👩‍👩‍👦家庭女人女人男孩
👩‍👩‍👧家庭女人女人女孩👩‍👩‍👧‍👦家庭女人女人女孩男孩👩‍👩‍👦‍👦家庭女人女人男孩男孩
👩‍👩‍👧‍👧家庭女人女人女孩女孩👨‍👦家庭男人男孩👨‍👦‍👦家庭男人男孩男孩
👨‍👧家庭男人女孩👨‍👧‍👦家庭男人女孩男孩👨‍👧‍👧家庭男人女孩女孩
👩‍👦家庭女人男孩👩‍👦‍👦家庭女人男孩男孩👩‍👧家庭女人女孩
👩‍👧‍👦家庭女人女孩男孩👩‍👧‍👧家庭女人女孩女孩🗣️说话
👤人像👥双人像👣脚印
表情名称表情名称表情名称
🐵猴头🐒猴子🦍大猩猩
🦧红毛猩猩🐶狗脸🐕狗
🦮导盲犬🐕‍🦺服务犬🐩贵宾犬
🐺狼🦊狐狸🦝浣熊
🐱猫脸🐈猫🦁狮子
🐯老虎头🐅老虎🐆豹子
🐴马头🐎马🦄独角兽
🦓斑马🦌鹿🐮奶牛头
🐂公牛🐃水牛🐄奶牛
🐷猪头🐖猪🐗野猪
🐽猪鼻子🐏公羊🐑母羊
🐐山羊🐪骆驼🐫双峰骆驼
🦙美洲鸵🦒长颈鹿🐘大象
🦏犀牛🦛河马🐭老鼠头
🐁老鼠🐀耗子🐹仓鼠
🐰兔子头🐇兔子🐿️松鼠
🦔刺猬🦇蝙蝠🐻熊
🐨考拉🐼熊猫🦥树懒
🦦水獭🦨臭鼬🦘袋鼠
🦡獾🐾爪印🦃火鸡
🐔鸡🐓公鸡🐣小鸡破壳
🐤小鸡🐥正面朝向的小鸡🐦鸟
🐧企鹅🕊️鸽🦅鹰
🦆鸭子🦢天鹅🦉猫头鹰
🦩火烈鸟🦚孔雀🦜鹦鹉
🐸青蛙🐊鳄鱼🐢龟
🦎蜥蜴🐍蛇🐲龙头
🐉龙🦕蜥蜴类🦖霸王龙
🐳喷水的鲸🐋鲸鱼🐬海豚
🐟鱼🐠热带鱼🐡河豚
🦈鲨鱼🐙章鱼🐚海螺
🐌蜗牛🦋蝴蝶🐛毛毛虫
🐜蚂蚁🐝蜜蜂🐞瓢虫
🦗蟋蟀🕷️蜘蛛🕸️蜘蛛网
🦂蝎子🦟蚊子🦠细菌
💐花束🌸樱花💮白花
🏵️圆形花饰🌹玫瑰🥀枯萎的花
🌺芙蓉🌻向日葵🌼开花
🌷郁金香🌱幼苗🌲松树
🌳落叶树🌴棕榈树🌵仙人掌
🌾稻子🌿药草☘️三叶草
🍀四叶草🍁枫叶🍂落叶
🍃风吹叶落
表情名称表情名称表情名称
🍇葡萄🍈甜瓜🍉西瓜
🍊橘子🍋柠檬🍌香蕉
🍍菠萝🥭芒果🍎红苹果
🍏青苹果🍐梨🍑桃
🍒樱桃🍓草莓🥝猕猴桃
🍅西红柿🥥椰子🥑鳄梨
🍆茄子🥔土豆🥕胡萝卜
🌽玉米🌶️红辣椒🥒黄瓜
🥬绿叶蔬菜🥦西兰花🧄蒜
🧅洋葱🍄蘑菇🥜花生
🌰栗子🍞面包🥐羊角面包
🥖法式长棍面包🥨椒盐卷饼🥯面包圈
🥞烙饼🧇华夫饼🧀芝士
🍖排骨🍗家禽的腿🥩肉块
🥓培根🍔汉堡🍟薯条
🍕披萨🌭热狗🥪三明治
🌮墨西哥卷饼🌯墨西哥玉米煎饼🥙夹心饼
🧆炸豆丸子🥚蛋🍳煎蛋
🥘装有食物的浅底锅🍲一锅食物🥣碗勺
🥗绿色沙拉🍿爆米花🧈黄油
🧂盐🥫罐头食品🍱盒饭
🍘米饼🍙饭团🍚米饭
🍛咖喱饭🍜面条🍝意粉
🍠烤红薯🍢关东煮🍣寿司
🍤天妇罗🍥鱼板🥮月饼
🍡团子🥟饺子🥠幸运饼干
🥡外卖盒🦀蟹🦞龙虾
🦐虾🦑乌贼🦪牡蛎
🍦圆筒冰激凌🍧刨冰🍨冰淇淋
🍩甜甜圈🍪饼干🎂生日蛋糕
🍰水果蛋糕🧁纸杯蛋糕🥧派
🍫巧克力🍬糖🍭棒棒糖
🍮奶黄🍯蜂蜜🍼奶瓶
🥛一杯奶☕热饮🍵热茶
🍶清酒🍾开香槟🍷葡萄酒
🍸鸡尾酒🍹热带水果饮料🍺啤酒
🍻干杯🥂碰杯🥃平底杯
🥤带吸管杯🧃饮料盒🧉马黛茶
🧊冰块🥢筷子🍽️餐具
🍴刀叉🥄匙🔪菜刀
🏺双耳瓶
表情名称表情名称表情名称
🌍地球上的欧洲非洲🌎地球上的美洲🌏地球上的亚洲澳洲
🌐带经纬线的地球🗺️世界地图🗾日本地图
🧭指南针🏔️雪山⛰️山
🌋火山🗻富士山🏕️露营
🏖️沙滩伞🏜️沙漠🏝️无人荒岛
🏞️国家公园🏟️体育馆🏛️古典建筑
🏗️施工🧱砖🏘️房屋建筑
🏚️废墟🏠房子🏡别墅
🏢办公楼🏣日本邮局🏤邮局
🏥医院🏦银行🏨酒店
🏩情人酒店🏪便利店🏫学校
🏬商场🏭工厂🏯日本城堡
🏰欧洲城堡💒婚礼🗼东京塔
🗽自由女神像⛪教堂🕌清真寺
🛕印度寺庙🕍犹太教堂⛩️神社
🕋克尔白⛲喷泉⛺帐篷
🌁有雾🌃夜晚🏙️城市风光
🌄山顶日出🌅日出🌆城市黄昏
🌇日落🌉夜幕下的桥♨️温泉
🎠旋转木马🎡摩天轮🎢过山车
💈理发店🎪马戏团帐篷🚂蒸汽火车
🚃轨道车🚄高速列车🚅子弹头高速列车
🚆火车🚇地铁🚈轻轨
🚉车站🚊路面电车🚝单轨
🚞山区铁路🚋有轨电车🚌公交车
🚍迎面驶来的公交车🚎无轨电车🚐小巴
🚑救护车🚒消防车🚓警车
🚔迎面驶来的警车🚕出租车🚖迎面驶来的出租车
🚗汽车🚘迎面驶来的汽车🚙运动型多用途车
🚚货车🚛铰接式货车🚜拖拉机
🏎️赛车🏍️摩托车🛵小型摩托车
🦽手动轮椅🦼电动轮椅🛺三轮摩托车
🚲自行车🛴滑板车🛹滑板
🚏公交车站🛣️高速公路🛤️铁轨
🛢️石油桶⛽油泵🚨警车灯
🚥横向的红绿灯🚦纵向的红绿灯🛑停止标志
🚧路障⚓锚⛵帆船
🛶独木舟🚤快艇🛳️客轮
⛴️渡轮🛥️摩托艇🚢船
✈️飞机🛩️小型飞机🛫航班起飞
🛬航班降落🪂降落伞💺座位
🚁直升机🚟空轨🚠缆车
🚡索道🛰️卫星🚀火箭
🛸飞碟🛎️服务铃🧳行李箱
⌛沙漏⏳沙正往下流的沙漏⌚手表
⏰闹钟⏱️秒表⏲️定时器
🕰️座钟🕛十二点🕧十二点半
🕐一点🕜一点半🕑两点
🕝两点半🕒三点🕞三点半
🕓四点🕟四点半🕔五点
🕠五点半🕕六点🕡六点半
🕖七点🕢七点半🕗八点
🕣八点半🕘九点🕤九点半
🕙十点🕥十点半🕚十一点
🕦十一点半🌑朔月🌒娥眉月
🌓上弦月🌔盈凸月🌕满月
🌖亏凸月🌗下弦月🌘残月
🌙弯月🌚微笑的朔月🌛微笑的上弦月
🌜微笑的下弦月🌡️温度计☀️太阳
🌝微笑的月亮🌞微笑的太阳🪐有环行星
⭐星星🌟闪亮的星星🌠流星
🌌银河☁️云⛅阴
⛈️雷阵雨🌤️晴偶有云🌥️多云
🌦️晴转雨🌧️下雨🌨️下雪
🌩️打雷🌪️龙卷风🌫️雾
🌬️大风🌀台风🌈彩虹
🌂收起的伞☂️伞☔雨伞
⛱️阳伞⚡高压❄️雪花
☃️雪与雪人⛄雪人☄️彗星
🔥火焰💧水滴🌊浪花
表情名称表情名称表情名称
🎃南瓜灯🎄圣诞树🎆焰火
🎇烟花🧨爆竹✨闪亮
🎈气球🎉拉炮彩带🎊五彩纸屑球
🎋七夕树🎍门松🎎日本人形
🎏鲤鱼旗🎐风铃🎑赏月
🧧红包🎀蝴蝶结🎁礼物
🎗️提示丝带🎟️入场券🎫票
🎖️军功章🏆奖杯🏅奖牌
🥇金牌🥈银牌🥉铜牌
⚽足球⚾棒球🥎垒球
🏀篮球🏐排球🏈美式橄榄球
🏉英式橄榄球🎾网球🥏飞盘
🎳保龄球🏏板球🏑曲棍球
🏒冰球🥍袋棍球🏓乒乓球
🏸羽毛球🥊拳击手套🥋练武服
🥅球门⛳高尔夫球洞⛸️滑冰
🎣钓鱼竿🤿潜水面罩🎽运动背心
🎿滑雪🛷雪橇🥌冰壶
🎯正中靶心的飞镖🪀悠悠球🪁风筝
🎱台球🔮水晶球🧿纳扎尔护身符
🎮游戏手柄🕹️游戏操控杆🎰老虎机
🎲骰子🧩拼图🧸泰迪熊
♠️黑桃♥️红桃♦️方片
♣️梅花♟️兵🃏大小王
🀄红中🎴花札🎭面具
🖼️带框的画🎨调色盘🧵线
🧶毛线
表情名称表情名称表情名称
👓眼镜🕶️墨镜🥽护目镜
🥼白大褂🦺救生衣👔领带
👕T恤👖牛仔裤🧣围巾
🧤手套🧥外套🧦袜子
👗连衣裙👘和服🥻纱丽
🩱连体泳衣🩲三角裤🩳短裤
👙比基尼👚女装👛钱包
👜手提包👝手袋🛍️购物袋
🎒书包👞男鞋👟跑鞋
🥾登山鞋🥿平底鞋👠高跟鞋
👡女式凉鞋🩰芭蕾舞鞋👢女靴
👑皇冠👒女帽🎩礼帽
🎓毕业帽🧢鸭舌帽⛑️白十字头盔
📿念珠💄唇膏💍戒指
💎宝石🔇已静音的扬声器🔈低音量的扬声器
🔉中等音量的扬声器🔊高音量的扬声器📢喇叭
📣扩音器📯邮号🔔铃铛
🔕禁止响铃🎼乐谱🎵音符
🎶多个音符🎙️录音室麦克风🎚️电平滑块
🎛️控制旋钮🎤麦克风🎧耳机
📻收音机🎷萨克斯管🎸吉他
🎹音乐键盘🎺小号🎻小提琴
🪕班卓琴🥁鼓📱手机
📲带有箭头的手机☎️电话📞电话听筒
📟寻呼机📠传真机🔋电池
🔌电源插头💻笔记本电脑🖥️台式电脑
🖨️打印机⌨️键盘🖱️电脑鼠标
🖲️轨迹球💽电脑光盘💾软盘
💿光盘📀DVD🧮算盘
🎥电影摄影机🎞️影片帧📽️电影放映机
🎬场记板📺电视机📷相机
📸开闪光灯的相机📹摄像机📼录像带
🔍左斜的放大镜🔎右斜的放大镜🕯️蜡烛
💡灯泡🔦手电筒🏮红灯笼
🪔印度油灯📔精装笔记本📕合上的书本
📖打开的书本📗绿色书本📘蓝色书本
📙橙色书本📚书📓笔记本
📒账本📃带卷边的页面📜卷轴
📄文件📰报纸🗞️报纸卷
📑标签页🔖书签🏷️标签
💰钱袋💴日元💵美元
💶欧元💷英镑💸长翅膀的钱
💳信用卡🧾收据💹趋势向上且带有日元符号的图表
💱货币兑换💲美元符号✉️信封
📧电子邮件📨来信📩收邮件
📤发件箱📥收件箱📦包裹
📫有待收信件📪无待收信件📬有新信件
📭无新信件📮邮筒🗳️投票箱
✏️铅笔✒️钢笔尖🖋️钢笔
🖊️笔🖌️画笔🖍️蜡笔
📝备忘录💼公文包📁文件夹
📂打开的文件夹🗂️索引分隔文件夹📅日历
📆手撕日历🗒️线圈本🗓️线圈日历
📇卡片索引📈趋势向上的图表📉趋势向下的图表
📊条形图📋剪贴板📌图钉
📍圆图钉📎回形针🖇️连起来的两个回形针
📏直尺📐三角尺✂️剪刀
🗃️卡片盒🗄️文件柜🗑️垃圾桶
🔒合上的锁🔓打开的锁🔏墨水笔和锁
🔐钥匙和锁🔑钥匙🗝️老式钥匙
🔨锤子🪓斧头⛏️铁镐
⚒️锤子与镐🛠️锤子与扳手🗡️匕首
⚔️交叉放置的剑🔫手枪🏹弓和箭
🛡️盾牌🔧扳手🔩螺母与螺栓
⚙️齿轮🗜️夹钳⚖️天平
🦯盲杖🔗链接⛓️链条
🧰工具箱🧲磁铁⚗️蒸馏器
🧪试管🧫培养皿🧬DNA
🔬显微镜🔭望远镜📡卫星天线
💉注射器🩸血滴💊药丸
🩹创可贴🩺听诊器🚪门
🛏️床🛋️沙发和灯🪑椅子
🚽马桶🚿淋浴🛁浴缸
🪒剃须刀🧴乳液瓶🧷安全别针
🧹扫帚🧺筐🧻卷纸
🧼皂🧽海绵🧯灭火器
🛒购物车🚬香烟⚰️棺材
⚱️骨灰缸🗿摩埃
表情名称表情名称表情名称
🏧取款机🚮倒垃圾🚰饮用水
♿轮椅标识🚹男厕🚺女厕
🚻卫生间🚼宝宝🚾厕所
🛂护照检查🛃海关🛄提取行李
🛅寄存行李⚠️警告🚸儿童过街
⛔禁止通行🚫禁止🚳禁止自行车
🚭禁止吸烟🚯禁止乱扔垃圾🚱非饮用水
🚷禁止行人通行📵禁止使用手机🔞18禁
☢️辐射☣️生物危害⬆️向上箭头
↗️右上箭头➡️向右箭头↘️右下箭头
⬇️向下箭头↙️左下箭头⬅️向左箭头
↖️左上箭头↕️上下箭头↔️左右箭头
↩️右转弯箭头↪️左转弯箭头⤴️右上弯箭头
⤵️右下弯箭头🔃顺时针垂直箭头🔄逆时针箭头按钮
🔙返回箭头🔚结束箭头🔛ON! 箭头
🔜SOON 箭头🔝置顶🛐宗教场所
⚛️原子符号🕉️奥姆✡️六芒星
☸️法轮☯️阴阳✝️十字架
☦️东正教十字架☪️星月☮️和平符号
🕎烛台🔯带中间点的六芒星♈白羊座
♉金牛座♊双子座♋巨蟹座
♌狮子座♍处女座♎天秤座
♏天蝎座♐射手座♑摩羯座
♒水瓶座♓双鱼座⛎蛇夫座
🔀随机播放音轨按钮🔁重复按钮🔂重复一次按钮
▶️播放按钮⏩快进按钮⏭️下一个音轨按钮
⏯️播放或暂停按钮◀️倒退按钮⏪快退按钮
⏮️上一个音轨按钮🔼向上三角形按钮⏫快速上升按钮
🔽向下三角形按钮⏬快速下降按钮⏸️暂停按钮
⏹️停止按钮⏺️录制按钮⏏️推出按钮
🎦电影院🔅低亮度按钮🔆高亮度按钮
📶信号强度条📳振动模式📴手机关机
♀️女性符号♂️男性符号⚕️医疗标志
♾️无限♻️回收标志⚜️百合花饰
🔱三叉戟徽章📛姓名牌🔰日本新手驾驶标志
⭕红色空心圆圈✅勾号按钮☑️勾选框
✔️勾号✖️乘号❌叉号
❎叉号按钮➕加号➖减号
➗除号➰卷曲环➿双卷曲环
〽️庵点✳️八轮辐星号✴️八角星
❇️火花‼️双感叹号⁉️感叹疑问号
❓问号❔白色问号❕白色感叹号
❗感叹号〰️波浪型破折号©️版权
®️注册™️商标#️⃣按键: ##
*️⃣按键: *0️⃣按键: 01️⃣按键: 1
2️⃣按键: 23️⃣按键: 34️⃣按键: 4
5️⃣按键: 56️⃣按键: 67️⃣按键: 7
8️⃣按键: 89️⃣按键: 9🔟按键: 10
🔠输入大写拉丁字母🔡输入小写拉丁字母🔢输入数字
🔣输入符号🔤输入拉丁字母🅰️A 型血
🆎AB 型血🅱️B 型血🆑CL按钮
🆒cool按钮🆓免费按钮ℹ️信息
🆔ID按钮Ⓜ️圆圈包围的M🆕new按钮
🆖NG按钮🅾️O 型血🆗OK按钮
🅿️停车按钮🆘SOS按钮🆙up按钮
🆚VS按钮🈁日文的“这里”按钮🈂️日文的“服务费”按钮
🈷️日文的“月总量”按钮🈶日文的“收费”按钮🈯日文的“预留”按钮
🉐日文的“议价”按钮🈹日文的“打折”按钮🈚日文的“免费”按钮
🈲日文的“禁止”按钮🉑日文的“可接受”按钮🈸日文的“申请”按钮
🈴日文的“合格”按钮🈳日文的“有空位”按钮㊗️日文的“祝贺”按钮
㊙️日文的“秘密”按钮🈺日文的“开始营业”按钮🈵日文的“没有空位”按钮
🔴红色圆🟠橙色圆🟡黄色圆
🟢绿色圆🔵蓝色圆🟣紫色圆
🟤棕色圆⚫黑色圆⚪白色圆
🟥红色方块🟧橙色方块🟨黄色方块
🟩绿色方块🟦蓝色方块🟪紫色方块
🟫棕色方块⬛黑线大方框⬜白线大方框
◼️黑色中方块◻️白色中方块◾黑色中小方块
◽白色中小方块▪️黑色小方块▫️白色小方块
🔶橙色大菱形🔷蓝色大菱形🔸橙色小菱形
🔹蓝色小菱形🔺红色正三角🔻红色倒三角
💠带圆点的菱形🔘单选按钮🔳白色方形按钮
🔲黑色方形按钮
表情名称表情名称表情名称
🏁终点旗🚩三角旗🎌交叉旗
🏴举黑旗🏳️举白旗🏳️‍🌈彩虹旗
🏴‍☠️海盗旗🇦🇨旗: 阿森松岛🇦🇩旗: 安道尔
🇦🇪旗: 阿拉伯联合酋长国🇦🇫旗: 阿富汗🇦🇬旗: 安提瓜和巴布达
🇦🇮旗: 安圭拉🇦🇱旗: 阿尔巴尼亚🇦🇲旗: 亚美尼亚
🇦🇴旗: 安哥拉🇦🇶旗: 南极洲🇦🇷旗: 阿根廷
🇦🇸旗: 美属萨摩亚🇦🇹旗: 奥地利🇦🇺旗: 澳大利亚
🇦🇼旗: 阿鲁巴🇦🇽旗: 奥兰群岛🇦🇿旗: 阿塞拜疆
🇧🇦旗: 波斯尼亚和黑塞哥维那🇧🇧旗: 巴巴多斯🇧🇩旗: 孟加拉国
🇧🇪旗: 比利时🇧🇫旗: 布基纳法索🇧🇬旗: 保加利亚
🇧🇭旗: 巴林🇧🇮旗: 布隆迪🇧🇯旗: 贝宁
🇧🇱旗: 圣巴泰勒米🇧🇲旗: 百慕大🇧🇳旗: 文莱
🇧🇴旗: 玻利维亚🇧🇶旗: 荷属加勒比区🇧🇷旗: 巴西
🇧🇸旗: 巴哈马🇧🇹旗: 不丹🇧🇻旗: 布韦岛
🇧🇼旗: 博茨瓦纳🇧🇾旗: 白俄罗斯🇧🇿旗: 伯利兹
🇨🇦旗: 加拿大🇨🇨旗: 科科斯（基林）群岛🇨🇩旗: 刚果（金）
🇨🇫旗: 中非共和国🇨🇬旗: 刚果（布）🇨🇭旗: 瑞士
🇨🇮旗: 科特迪瓦🇨🇰旗: 库克群岛🇨🇱旗: 智利
🇨🇲旗: 喀麦隆🇨🇳旗: 中国🇨🇴旗: 哥伦比亚
🇨🇵旗: 克利珀顿岛🇨🇷旗: 哥斯达黎加🇨🇺旗: 古巴
🇨🇻旗: 佛得角🇨🇼旗: 库拉索🇨🇽旗: 圣诞岛
🇨🇾旗: 塞浦路斯🇨🇿旗: 捷克🇩🇪旗: 德国
🇩🇬旗: 迪戈加西亚岛🇩🇯旗: 吉布提🇩🇰旗: 丹麦
🇩🇲旗: 多米尼克🇩🇴旗: 多米尼加共和国🇩🇿旗: 阿尔及利亚
🇪🇦旗: 休达及梅利利亚🇪🇨旗: 厄瓜多尔🇪🇪旗: 爱沙尼亚
🇪🇬旗: 埃及🇪🇭旗: 西撒哈拉🇪🇷旗: 厄立特里亚
🇪🇸旗: 西班牙🇪🇹旗: 埃塞俄比亚🇪🇺旗: 欧盟
🇫🇮旗: 芬兰🇫🇯旗: 斐济🇫🇰旗: 福克兰群岛
🇫🇲旗: 密克罗尼西亚🇫🇴旗: 法罗群岛🇫🇷旗: 法国
🇬🇦旗: 加蓬🇬🇧旗: 英国🇬🇩旗: 格林纳达
🇬🇪旗: 格鲁吉亚🇬🇫旗: 法属圭亚那🇬🇬旗: 根西岛
🇬🇭旗: 加纳🇬🇮旗: 直布罗陀🇬🇱旗: 格陵兰
🇬🇲旗: 冈比亚🇬🇳旗: 几内亚🇬🇵旗: 瓜德罗普
🇬🇶旗: 赤道几内亚🇬🇷旗: 希腊🇬🇸旗: 南乔治亚和南桑威奇群岛
🇬🇹旗: 危地马拉🇬🇺旗: 关岛🇬🇼旗: 几内亚比绍
🇬🇾旗: 圭亚那🇭🇰旗: 中国香港特别行政区🇭🇲旗: 赫德岛和麦克唐纳群岛
🇭🇳旗: 洪都拉斯🇭🇷旗: 克罗地亚🇭🇹旗: 海地
🇭🇺旗: 匈牙利🇮🇨旗: 加纳利群岛🇮🇩旗: 印度尼西亚
🇮🇪旗: 爱尔兰🇮🇱旗: 以色列🇮🇲旗: 马恩岛
🇮🇳旗: 印度🇮🇴旗: 英属印度洋领地🇮🇶旗: 伊拉克
🇮🇷旗: 伊朗🇮🇸旗: 冰岛🇮🇹旗: 意大利
🇯🇪旗: 泽西岛🇯🇲旗: 牙买加🇯🇴旗: 约旦
🇯🇵旗: 日本🇰🇪旗: 肯尼亚🇰🇬旗: 吉尔吉斯斯坦
🇰🇭旗: 柬埔寨🇰🇮旗: 基里巴斯🇰🇲旗: 科摩罗
🇰🇳旗: 圣基茨和尼维斯🇰🇵旗: 朝鲜🇰🇷旗: 韩国
🇰🇼旗: 科威特🇰🇾旗: 开曼群岛🇰🇿旗: 哈萨克斯坦
🇱🇦旗: 老挝🇱🇧旗: 黎巴嫩🇱🇨旗: 圣卢西亚
🇱🇮旗: 列支敦士登🇱🇰旗: 斯里兰卡🇱🇷旗: 利比里亚
🇱🇸旗: 莱索托🇱🇹旗: 立陶宛🇱🇺旗: 卢森堡
🇱🇻旗: 拉脱维亚🇱🇾旗: 利比亚🇲🇦旗: 摩洛哥
🇲🇨旗: 摩纳哥🇲🇩旗: 摩尔多瓦🇲🇪旗: 黑山
🇲🇫旗: 法属圣马丁🇲🇬旗: 马达加斯加🇲🇭旗: 马绍尔群岛
🇲🇰旗: 北马其顿🇲🇱旗: 马里🇲🇲旗: 缅甸
🇲🇳旗: 蒙古🇲🇴旗: 中国澳门特别行政区🇲🇵旗: 北马里亚纳群岛
🇲🇶旗: 马提尼克🇲🇷旗: 毛里塔尼亚🇲🇸旗: 蒙特塞拉特
🇲🇹旗: 马耳他🇲🇺旗: 毛里求斯🇲🇻旗: 马尔代夫
🇲🇼旗: 马拉维🇲🇽旗: 墨西哥🇲🇾旗: 马来西亚
🇲🇿旗: 莫桑比克🇳🇦旗: 纳米比亚🇳🇨旗: 新喀里多尼亚
🇳🇪旗: 尼日尔🇳🇫旗: 诺福克岛🇳🇬旗: 尼日利亚
🇳🇮旗: 尼加拉瓜🇳🇱旗: 荷兰🇳🇴旗: 挪威
🇳🇵旗: 尼泊尔🇳🇷旗: 瑙鲁🇳🇺旗: 纽埃
🇳🇿旗: 新西兰🇴🇲旗: 阿曼🇵🇦旗: 巴拿马
🇵🇪旗: 秘鲁🇵🇫旗: 法属波利尼西亚🇵🇬旗: 巴布亚新几内亚
🇵🇭旗: 菲律宾🇵🇰旗: 巴基斯坦🇵🇱旗: 波兰
🇵🇲旗: 圣皮埃尔和密克隆群岛🇵🇳旗: 皮特凯恩群岛🇵🇷旗: 波多黎各
🇵🇸旗: 巴勒斯坦领土🇵🇹旗: 葡萄牙🇵🇼旗: 帕劳
🇵🇾旗: 巴拉圭🇶🇦旗: 卡塔尔🇷🇪旗: 留尼汪
🇷🇴旗: 罗马尼亚🇷🇸旗: 塞尔维亚🇷🇺旗: 俄罗斯
🇷🇼旗: 卢旺达🇸🇦旗: 沙特阿拉伯🇸🇧旗: 所罗门群岛
🇸🇨旗: 塞舌尔🇸🇩旗: 苏丹🇸🇪旗: 瑞典
🇸🇬旗: 新加坡🇸🇭旗: 圣赫勒拿🇸🇮旗: 斯洛文尼亚
🇸🇯旗: 斯瓦尔巴和扬马延🇸🇰旗: 斯洛伐克🇸🇱旗: 塞拉利昂
🇸🇲旗: 圣马力诺🇸🇳旗: 塞内加尔🇸🇴旗: 索马里
🇸🇷旗: 苏里南🇸🇸旗: 南苏丹🇸🇹旗: 圣多美和普林西比
🇸🇻旗: 萨尔瓦多🇸🇽旗: 荷属圣马丁🇸🇾旗: 叙利亚
🇸🇿旗: 斯威士兰🇹🇦旗: 特里斯坦-达库尼亚群岛🇹🇨旗: 特克斯和凯科斯群岛
🇹🇩旗: 乍得🇹🇫旗: 法属南部领地🇹🇬旗: 多哥
🇹🇭旗: 泰国🇹🇯旗: 塔吉克斯坦🇹🇰旗: 托克劳
🇹🇱旗: 东帝汶🇹🇲旗: 土库曼斯坦🇹🇳旗: 突尼斯
🇹🇴旗: 汤加🇹🇷旗: 土耳其🇹🇹旗: 特立尼达和多巴哥
🇹🇻旗: 图瓦卢🇹🇼旗: 台湾🇹🇿旗: 坦桑尼亚
🇺🇦旗: 乌克兰🇺🇬旗: 乌干达🇺🇲旗: 美国本土外小岛屿
🇺🇳旗: 联合国🇺🇸旗: 美国🇺🇾旗: 乌拉圭
🇺🇿旗: 乌兹别克斯坦🇻🇦旗: 梵蒂冈🇻🇨旗: 圣文森特和格林纳丁斯
🇻🇪旗: 委内瑞拉🇻🇬旗: 英属维尔京群岛🇻🇮旗: 美属维尔京群岛
🇻🇳旗: 越南🇻🇺旗: 瓦努阿图🇼🇫旗: 瓦利斯和富图纳
🇼🇸旗: 萨摩亚🇽🇰旗: 科索沃🇾🇪旗: 也门
🇾🇹旗: 马约特🇿🇦旗: 南非🇿🇲旗: 赞比亚
🇿🇼旗: 津巴布韦🏴󠁧󠁢󠁥󠁮󠁧󠁿旗: 英格兰🏴󠁧󠁢󠁳󠁣󠁴󠁿旗: 苏格兰
🏴󠁧󠁢󠁷󠁬󠁳󠁿旗: 威尔士

① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳

❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿ ⓫ ⓬ ⓭ ⓮ ⓯ ⓰ ⓱ ⓲ ⓳ ⓴

⓪ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨

⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹

⒈ ⒉ ⒊ ⒋ ⒌ ⒍ ⒎ ⒏ ⒐ ⒑ ⒒ ⒓ ⒔ ⒕ ⒖ ⒗ ⒘ ⒙ ⒚ ⒛

⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿ ⒀ ⒁ ⒂ ⒃ ⒄ ⒅ ⒆ ⒇

Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ ⒜ ⒝ ⒞ ⒟ ⒠ ⒡ ⒢ ⒣ ⒤ ⒥ ⒦ ⒧ ⒨ ⒩ ⒪ ⒫ ⒬ ⒭ ⒮ ⒯ ⒰ ⒱ ⒲ ⒳ ⒴ ⒵ Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ №

㈠ ㈡ ㈢ ㈣ ㈤ ㈥ ㈦ ㈧ ㈨ ㈩

零 壹 贰 叁 肆 伍 陆 柒 捌 玖 拾 佰 仟

★ ☆ ✰ ✯ ✮ ✭ ✬ ✫ ✪ ✧ ✩ ✭ ✡

✿

♡ ♢ ♤ ♧ ♣ ♦ ♥ ♠

☐ ☑ ☒ ✓ ✔ ✗ ✘ ∨

✓、✔、☑、（✓）、✓

✗、 ✘、 x、 ×、 X、✕、☓、✖ 、（✗）、☒

○、●、◯

✔️、✅、❌、❎

⏎ ⇧ ⇪ ⌂ ⌘ ☢ ☣ ⌥ ⎋ ⌫  ᴴ ᴰ

‱ № ℗ ℠ ℡ ℀ ℁ ℅ ℆ ⅍ ⌚ ⌛ ☊ ☎ ☏ ✁ ✂ ✃ ✄ ✆ ✇ ✈ ✉ ✍ ✎ ✏ ✐ ✑ ✒ ™ © ® ‰ § ¶

☠ ☤ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬ ☮ ☭ ☯ ☸ ☽ ☾ ♕ ♚ ♛ ✙ ✚ ✛ ✜ ✝ ✞ ✟ ✠ ✡ ✢ 卍 卐

ϟ ☀ ☁ ☂ ☃ ☄ ☉ ☼ ☽ ☾ ♁ ♨ ❄ ❅ ❆
⛅ ☔ ⚡ ⛄ ℃ ℉

常用星号
≛ ⋆ ★ ⍣ ☆ ✡ ✦ ✧ ✩ ✪ ✫ ✬ ✭ ✮ ✯ ✰

正方形、长方形、菱形
▢ ❏ ◆ ◊ ⊞

三角形符号
∆ ⊿ ▲ ▴ ▵ ▶ ▷ ▸ ▹ ► ▻ ▼ ▽ ▾ ▿ ◀ ◁ ◂ ◃ ◄

圆形符号
○ ◯ ◎

⊖ ⊘ ⊙ ⊚ ⊛ ⊜ ⊝ ◉ ○ ◌ ◍ ◎ ● ◐ ◑ ◒ ◓ ◔ ◕ ◖ ◗ ◦ ◯ ❍ ⦿ ⊕ ⊗

箭头符号
↑ ↓ ← → ↖ ↗ ↙ ↘ ↔ ↕ ⇝ ⇜ ➼ ➽ ➸ ➳ ➺ ➻ ➴ ➵
➶ ➷ ➹ ▶ ➩ ➪ ➫ ➬ ➭ ➮ ➯ ➱ ➲ ➾ ➔ ➘ ➙ ➚ ➛
➜ ➝ ➞ ➟ ➠ ➡ ➢ ➣ ➤ ➥ ➦ ➧ ➨ ↚ ↛ ↜ ↝ ↞ ↟
↠ ↠ ↡ ↢ ↣ ↤ ↤ ↥ ↦ ↧ ↨ ⇄ ⇅ ⇵ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌
⇍ ⇎ ⇏ ⇐ ⇑ ⇒ ⇓ ⇔ ⇖ ⇗ ⇘ ⇙ ⥅ ⥆ ↩ ↪ ↫ ↬ ↭ ↮ ↯
↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ↼ ↽ ↾ ↿ ⇀ ⇁ ⇂ ⇃ ⇞ ⇟ ⇠ ⇡ ⇢
⇣ ⇤ ⇥ ⇦ ⇧ ⇨ ⇩ ⇪ ⌦ » « ⌅ ⟾ ⤊ ⇫ ⇬ ⇶ ⬱ ⏎ ⌂ ⥒ ⥓ ⥔
⥕ ⥖ ⥗ ⥘ ⥙ ⤞ ⤝ ⤠ ⤟ ⥂ ⥃ ⥄ ⤣ ⤤ ⤥ ⤦ ⤡ ⤢ ⤧ ⤨ ⤩ ⤪ ⤭
⤮ ⤱ ⤲ ⤯ ⤰ ⤻ ⤺ ⤼ ⤽ ⤹ ⤸ ⤿ ⤾ ⥀ ⥁ ⌆ ⌤

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:
📑 Butterfly主题魔改样式查阅(自带篇)