本文记录了本站博客主题 ButterFly 全部的美化教程
点击查看更新记录
Butterfly 主题美化日记
2022-06-21
渐变星空 Sky 粒子背景特效
2022-06-09
添加 Echarts 统计图表
2022-05-31
添加右键菜单 Right Menu
2022-05-16
侧边栏归档样式修改
2022-05-13
引入 Wow.js Animation 动画
2022-05-12
标签 Tag 右上角添加章数
引入 Aplayer 音乐播放器
Twikoo 评论块气泡风格魔改美化
使用 Hexo-abbrlink 生成唯一文章链接
留言板 爱心❤️ 信封✉️ 动画
2022-05-11
自定义 Loading 黏性加载动画
2022-05-10
Menu 添加 Iconfont 多彩图标
2022-05-09
使用 Shields.io 美化 Footer
2022-04-25
添加 Cherry 樱花雨背景特效
添加 Cherry 樱花雨背景特效
使用 Shields.io 美化 Footer
Menu 添加 Iconfont 多彩图标
自定义 Loading 黏性加载动画
标签 Tag 右上角添加章数
点击查看教程
- 修改
[Blogroot]\themes\butterfly\scripts\helpers\page.js
,在约第52
行处:
1 | source.forEach(tag => { |
引入 Aplayer 音乐播放器
Twikoo 评论块气泡风格魔改美化
点击查看教程
新建
[Blogroot]\themes\butterfly\source\css\_cyan\twikoo.styl
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// 评论样式美化
.tk-comments{
// 评论框高度
.tk-submit{
background: var(--baiwu-card-bg);
border-radius: 8px;
padding: 20px 20px 10px;
.el-textarea__inner{
height: 100px
}
}
.tk-comments-container{
margin-top: 20px;
.tk-comments-title{
margin-bottom: 0
}
& > .tk-comment{
position: relative;
&::before{
position: absolute;
content: '';
border-bottom: var(--baiwu-border-dashed);
left: 0;
bottom: -0.5rem;
width: 100%;
}
}
}
// 评论内容
.tk-comment {
background: var(--baiwu-card-bg);
border-radius: 8px;
padding: 10px;
.tk-avatar{
margin-top: 2.3rem;
}
.tk-main {
.tk-row {
justify-content: flex-start
.tk-action{
&-link{
cursor: pointer
color: var(--baiwu-theme-color)
}
.tk-action-icon{
color: var(--baiwu-theme-color)
}
}
.tk-actions{
margin-left: 0;
cursor: pointer
}
.tk-meta{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.tk-tag{
border-radius: 4px ;
}
}
}
.tk-content{
position: relative;
border: var(--baiwu-border)
border-radius: 8px;
padding: 10px 20px;
overflow: inherit;
&::before,&::after{
content: '';
width: 0;
height: 0;
position: absolute;
top: 10px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: var(--baiwu-border)
}
&::before{
left: -10px;
border-right-width: 10px;
}
&::after{
left: -8px
border-right-width: 10px;
border-right-color: var(--baiwu-card-bg);
}
pre{
word-wrap: break-word;
white-space: pre-wrap;
}
}
.tk-extras {
.tk-extra{
padding: 4px 12px 4px 8px;
border: var(--baiwu-border);
border-radius: 6px;
margin-right: 0.4rem
}
}
.tk-expand{
border: var(--baiwu-border);
transition: .35s all;
border-radius: 6px;
&:hover{
color:var(--baiwu-white);
background: var(--baiwu-theme-color)
}
}
.tk-replies{
.tk-comment{
&.tk-master{
flex-direction: row-reverse;
justify-content: flex-start;
padding-right: 0;
padding-left: 0
.tk-row {
justify-content: flex-start
flex-direction: row-reverse;
}
.tk-meta{
display: flex;
flex-direction: row-reverse;
gap: 5px;
margin-left: 0.5em
}
.tk-content{
&::before,&::after{
border-left: var(--baiwu-border);
border-right: none;
}
&::before{
left: auto;
right: -10px;
border-left-width: 10px;
}
&::after{
left: auto;
right: -8px;
border-left-width: 10px;
border-left-color: var(--baiwu-card-bg);
}
}
.tk-avatar{
width: 2.5rem;
height: 2.5rem
margin-right: 0;
margin-left: 1rem
.tk-avatar-img{
width: 2.5rem;
height: 2.5rem
}
}
}
}
}
}
}
}修改
[Blogroot]\themes\butterfly\source\css\index.styl
1
2
3@import '_tags/*'
@import '_mode/*'
+ @import '_cyan/*';可以在此基础上根据个人风格调整。
使用 Hexo-abbrlink 生成唯一文章链接
留言板 爱心❤️ 信封✉️ 动画
引入 Wow.js Animation 动画
侧边栏归档样式修改
点击查看教程
- 新建
[Blogroot]\themes\butterfly\source\css\custom\index.css
:
1 | /* 侧边栏分类 */ |
添加右键菜单 Right Menu
添加 Echarts 统计图表
渐变星空 Sky 粒子背景特效
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 白雾茫茫丶!
评论
您无需删除空行,直接评论以获取最佳展示效果