介绍

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

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

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

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

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

复选框

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

内容来自：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/#富文本按钮

目前发现和自带buttom有冲突

使用方法

富文本按钮

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

富文本按钮

官方文档: 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
{% 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);

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