本站部分文章转载自 Akilarの糖果屋 ,如有侵权，请联系作者，本站仅当学习使用!

本文记录了本站博客主题 ButterFly 全部的美化教程

点击查看更新记录

Butterfly 主题美化日记

2022-06-21

  1. 渐变星空 Sky 粒子背景特效

2022-06-09

  1. 添加 Echarts 统计图表

2022-05-31

  1. 添加右键菜单 Right Menu

2022-05-16

  1. 侧边栏归档样式修改

2022-05-13

  1. Friend Link 友链样式魔改

  2. 引入 Wow.js Animation 动画

2022-05-12

  1. 标签 Tag 右上角添加章数

  2. 引入 Aplayer 音乐播放器

  3. Twikoo 评论块气泡风格魔改美化

  4. 使用 Hexo-abbrlink 生成唯一文章链接

  5. 留言板 爱心❤️ 信封✉️ 动画

2022-05-11

  1. 自定义 Loading 黏性加载动画

2022-05-10

  1. Menu 添加 Iconfont 多彩图标

2022-05-09

  1. 引入 Iconfont 阿里图标矢量库

  2. 使用 Shields.io 美化 Footer

2022-04-25

  1. 添加 Cherry 樱花雨背景特效

添加 Cherry 樱花雨背景特效

站内教程索引：

添加 Cherry 樱花雨背景特效

/post/736f6468.html/

引入 Iconfont 阿里图标矢量库

站内教程索引：

引入 Iconfont 阿里图标矢量库

/post/3ab4ab8f.html/

站内教程索引：

使用 Shields.io 美化 Footer

/post/623e5e60.html/

站内教程索引：

Menu 添加 Iconfont 多彩图标

/post/a543f113.html/

自定义 Loading 黏性加载动画

站内教程索引：

自定义 Loading 黏性加载动画

/post/acd421de.html/

标签 Tag 右上角添加章数

点击查看教程
  1. 修改 [Blogroot]\themes\butterfly\scripts\helpers\page.js,在约第 52 行处:
1
2
3
4
5
6
7
8
9
source.forEach(tag => {
    const ratio = length ? sizes.indexOf(tag.length) / length : 0
    const size = minfontsize + ((maxfontsize - minfontsize) * ratio)
    let style = `font-size: ${parseFloat(size.toFixed(2))}${unit};`
    const color = 'rgb(' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ', ' + Math.floor(Math.random() * 201) + ')' // 0,0,0 -> 200,200,200
    style += ` color: ${color}`
-    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}</a>`
+    result += `<a href="${env.url_for(tag.path)}" style="${style}">${tag.name}<sup>${tag.length}</sup></a>`
  })

引入 Aplayer 音乐播放器

站内教程索引：

引入 Aplayer 音乐播放器

/post/c94d89e8.html/

Twikoo 评论块气泡风格魔改美化

点击查看教程
  1. 新建 [Blogroot]\themes\butterfly\source\css\custom\twikoo_beautify.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
/* 自定义twikoo评论输入框高度 */
.tk-input[data-v-619b4c52] .el-textarea__inner {
  height: 130px !important;
}
/* 输入评论时自动隐藏输入框背景图片 */
.tk-input[data-v-619b4c52] .el-textarea__inner:focus {
  background-image: none !important;
}
/* 调整楼中楼样式 ，整体左移，贴合气泡化效果 */
.tk-replies {
  left: -70px;
  width: calc(100% + 70px);
}
/* 头像宽度调整 rem单位与全局字体大小挂钩，需配合自己情况调整大小以保证头像显示完整*/
.tk-replies .tk-avatar {
  width: 2.5rem !important;
  height: 2.5rem !important;
}
.tk-replies .tk-avatar img {
  width: 2.5rem !important;
  height: 2.5rem !important;
}
/* 回复框左移，避免窄屏时出框 */
.tk-comments-container .tk-submit {
  position: relative;
  left: -70px;
}
/* 评论块气泡化修改 */
.tk-content {
  background: #00a6ff; /*默认模式访客气泡配色*/
  padding: 10px;
  color: #fff; /*默认模式访客气泡字体配色*/
  border-radius: 10px;
  font-size: 16px !important;
  width: fit-content;
  max-width: 100%;
  position: relative !important;
  overflow: visible !important;
  max-height: none !important;
}
/* 修复图片出框 */
.tk-content img {
  max-width: 100% !important;
}
/* 修复过长文本出框 */
.tk-content pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.tk-content a {
  color: #eeecaa; /*默认模式超链接配色*/
}
.tk-content::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 20px;
  left: -13px;
  border-top: 2px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #00a6ff; /*默认模式访客气泡小三角配色*/
  border-left: 0px solid transparent;
}
.tk-master .tk-content {
  background: #ff8080; /*默认模式博主气泡配色*/
  color: #fff; /*默认模式博主气泡字体配色*/
  width: fit-content;
  max-width: 100%;
}
.tk-master .tk-content a {
  color: #eeecaa;
}
.tk-master .tk-content::before {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: 20px;
  left: -13px;
  border-top: 2px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #ff8080; /*默认模式博主气泡小三角配色*/
  border-left: 0px solid transparent;
}
.tk-row[data-v-d82ce9a0] {
  max-width: 100%;
  width: fit-content;
}
.tk-avatar {
  border-radius: 50%;
  margin-top: 10px;
}

/* 夜间模式配色，具体比照上方默认模式class */
[data-theme="dark"] .tk-content {
  background: #000;
  color: #fff;
}
[data-theme="dark"] .tk-content a {
  color: #dfa036;
}
[data-theme="dark"] .tk-content::before {
  border-right: 15px solid #000;
}
[data-theme="dark"] .tk-master .tk-content {
  background: #000;
  color: #fff;
}
[data-theme="dark"] .tk-master .tk-content a {
  color: #dfa036;
}
[data-theme="dark"] .tk-master .tk-content::before {
  border-top: 2px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 15px solid #000;
  border-left: 0px solid transparent;
}
/* 自适应内容 */
@media screen and (min-width: 1024px) {
  /* 设置宽度上限，避免挤压博主头像 */
  .tk-content {
    max-width: 75%;
    width: fit-content;
  }
  .tk-master .tk-content {
    width: 75%;
  }
  .tk-master .tk-content::before {
    left: 100%;
    border-left: 15px solid #ff8080;
    border-right: 0px solid transparent;
  }
  .tk-master .tk-avatar {
    position: relative;
    left: calc(75% + 70px);
  }
  .tk-master .tk-row[data-v-d82ce9a0] {
    position: relative;
    top: 0px;
    left: calc(75% - 230px);
  }
  [data-theme="dark"] .tk-master .tk-content::before {
    border-left: 15px solid #000;
    border-right: 0px solid transparent;
  }
}
/* 设备名称常态隐藏，悬停评论时显示 */
.tk-extras {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.tk-content:hover + .tk-extras {
  -webkit-animation: tk-extras-fadeIn 0.5s linear;
  -moz-animation: tk-extras-fadeIn 0.5s linear;
  -o-animation: tk-extras-fadeIn 0.5s linear;
  -ms-animation: tk-extras-fadeIn 0.5s linear;
  animation: tk-extras-fadeIn 0.5s linear;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
@-moz-keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-webkit-keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@-o-keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
@keyframes tk-extras-fadeIn {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }
}
  1. 修改 [Blogroot]\_config.butterfly.yml 的 inject 配置项
1
2
3
   inject:
    head:
+     - <link rel="stylesheet" href="/css/custom/twikoo_beautify.css"  media="defer" onload="this.media='all'">

站内教程索引：

使用 Hexo-abbrlink 生成唯一文章链接

/post/8acce9aa.html/

留言板 爱心❤️ 信封✉️ 动画

站内教程索引：

留言板 爱心❤️ 信封✉️ 动画

/post/442df491.html/

站内教程索引：

Friend Link 友链样式魔改

/post/35d76de1.html/

引入 Wow.js Animation 动画

站内教程索引：

引入 Wow.js Animation 动画

/post/b380412b.html/

侧边栏归档样式修改

点击查看教程
  1. 新建 [Blogroot]\themes\butterfly\source\css\custom\index.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
/* 侧边栏分类 */
#aside-content .card-archives ul.card-archive-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

li.card-archive-list-item {
  width: 100%;
  flex: 0 0 48%;
}

span.card-archive-list-count {
  width: auto;
  text-align: left;
  font-size: 1.2rem;
  line-height: .9;
  font-weight: 700;
}

span.card-archive-list-count-unit {
  width: auto;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
}

#aside-content .card-archives ul.card-archive-list>.card-archive-list-item a {
  border-radius: 8px;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  align-content: space-between;
  border: 1px solid var(--cyan-theme-color);
}

#aside-content .card-archives ul.card-archive-list>.card-archive-list-item a:hover {
  background-color: var(--cyan-theme-color);
  color: #fff;
}

添加右键菜单 Right Menu

站内教程索引：

添加右键菜单 Right Menu

/post/2b2d021b.html/

添加 Echarts 统计图表

站内教程索引：

添加 Echarts 统计图表

/post/3f97fe61.html/

渐变星空 Sky 粒子背景特效

站内教程索引：

渐变星空 Sky 粒子背景特效

/post/8c8593e1.html/