主题修改记录
当前看到的主题为
butterfly
模板部分修改后的样式
透明化部分
banner 头图
在\themes\butterfly\layout\includes\header\index.pug
中添加以下内容
1 | if !is_post() |
修改如下
点击查看
1 | if is_home() |
页脚透明
在\themes\butterfly\layout\includes\layout.pug
中修改以下内容
1 | if !is_post() |
修改如下
点击查看
1 | - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : '' |
dev 3.2.0 以前
点击查看
1 | if !is_post() |
修改如下
点击查看
1 | - var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : '' |
~~ ### 黑暗模式下 nav 处黑色浮块消除 ~~
在\themes\butterfly\source\css\_mode\darkmode.styl
中删除以下
1
background-color: alpha($dark-black, .7)
修改如下
点击查看
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
if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
[data-theme='dark']
--global-bg: darken(
--font-color: alpha(
--hr-border: alpha(
--hr-before-color: alpha(
--search-bg:
--search-input-color: alpha(
--search-result-title: alpha(
--preloader-bg: darken(
--preloader-color: alpha(
--tab-border-color:
--tab-botton-bg:
--tab-botton-color: alpha(
--tab-button-hover-bg: lighten(
--tab-button-active-bg:
--card-bg:
--sidebar-bg:
--btn-hover-color: lighten(
--btn-color: alpha(
--btn-bg: lighten(
--text-bg-hover: lighten(
--light-grey: alpha(
--white: alpha(
--text-highlight-color: alpha(
--blockquote-color: alpha(
--blockquote-bg: lighten(
--reward-pop: lighten(
--sidebar-icon-color: alpha(
// 網站背景,footer背景
background: darken(
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .7)
content: ''
background-color:
code
background:
pre > code
background: 0
.note
code
background: $code-background
// 頭部
&:before
position: absolute
top: 0
left: 0
display: block
width: 100%
height: 100%
content: ''
& >
&.fixed
background: alpha(
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)
// 代碼框
pre,
.highlight:not(.js-file-line-container)
background-color: lighten(
color: alpha(
figure.highlight
box-shadow: none
if hexo-config('rootConfig.highlight') && hexo-config('rootConfig.highlight.enable')
table::-webkit-scrollbar-thumb
background: lighten(
.line:before
color: alpha(
.hljs
background-color: lighten(
pre[class*='language-']::-webkit-scrollbar-thumb
background: lighten(
.highlight-tools
background: lighten(
color:
.comment-switch
if hexo-config('comments.text')
background:
label
filter: brightness(.7)
// note
if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
.note
filter: brightness(.7)
// hide-tags
.hide-button,
.btn-beautify,
.mermaid,
.post-outdate-notice,
.error-img,
img,
.gist,
.aplayer
filter: brightness(.7)
border-bottom: 1px dashed alpha(
// 第三方
// 插件 hexo-blog-encrypt
label,
input
color: alpha(
input
background-color:
// Gitalk
filter: brightness(.8)
svg
fill: alpha(
// Disqus and Disqusjs
.dsqjs-tab-active,
.dsqjs-no-comment
color: alpha(
.dsqjs-order-label
background-color: lighten(
.dsqjs-post-body
color: alpha(
code,
pre
background:
blockquote
color: alpha(
1 | background-color: alpha($dark-black, .7) |
点击查看
1 | if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark' |
滚动栏样式
在\themes\butterfly\source\css\_global\index.styl
中添加以下内容
1 | //滚动栏开始 |
滚动栏配色调取config中theme_color
中main
值。
修改如下
点击查看
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
html
height: 100%
font-size: 20px
body
position: relative
min-height: 100%
background: var(--global-bg)
color: var(--font-color)
font-size: $font-size
font-family: $font-family
line-height: $text-line-height
-webkit-tap-highlight-color: rgba(0, 0, 0, 0)
if !hexo-config('copy.enable')
user-select: none
//滚动栏开始
*::-webkit-scrollbar
width: 10px
height: 10px
*::-webkit-scrollbar-thumb
background: var(--btn-bg)
background-image: -webkit-linear-gradient( 45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent)
border-radius: 2em
*::-webkit-scrollbar-track
background-color: transparent
*::-webkit-scrollbar-corner
background-color: transparent
*::-moz-selection
color: #fff
background-color: var(--btn-bg)
//滚动栏结束
input::placeholder
color: var(--font-color)
#web_bg
position: fixed
z-index: -999
width: 100%
height: 100%
background: $web-bg
background-attachment: local
background-position: center
background-size: cover
background-repeat: no-repeat
h1,
h2,
h3,
h4,
h5,
h6
position: relative
margin: 1rem 0 .7rem
color: var(--text-highlight-color)
font-weight: bold
code
font-size: inherit !important
*
box-sizing: border-box
hr
position: relative
margin: 2rem auto
border: 2px dashed var(--hr-border)
if hexo-config('hr_icon.enable')
width: calc(100% - 4px)
&:hover
&:before
left: calc(95% - 20px)
&:before
position: absolute
top: $hr-icon-top
left: 5%
z-index: 1
color: var(--hr-before-color)
content: $hr-icon
font-size: 20px
line-height: 1
transition: all 1s ease-in-out
@extend .fontawesomeIcon
.table-wrap
overflow-x: scroll
margin: 0 0 1rem
table
display: table
width: 100%
border-spacing: 0
border-collapse: collapse
empty-cells: show
thead
background: alpha($table-thead-bg, 10%)
th,
td
padding: .3rem .6rem
border: 1px solid var(--light-grey)
vertical-align: middle
*::selection
background: $theme-text-selection-color
color: #F7F7F7
button
padding: 0
outline: 0
border: none
background: none
cursor: pointer
// font
#page-header #site_title,
#page-header #site_subtitle,
#site-name,
#aside_content .author-info__name,
#aside_content .author-info__description
font-family: $site-name-font
.is-center
text-align: center
.copy-true
user-select: all
.pull-left
float: left
.pull-right
float: right
.button--animated
position: relative
z-index: 1
transition: color 1s
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: var(--btn-hover-color)
content: ''
transition: transform .5s ease-out
transform: scaleX(0)
transform-origin: 0 50%
&:hover
&:before
transition-timing-function: cubic-bezier(.45, 1.64, .47, .66)
transform: scaleX(1)
img[src=''],
img:not([src])
opacity: 0
.img-alt
margin: -.5rem 0 .5rem
color: #858585
&:hover
text-decoration: none !important
.post-ad
margin: 2rem 0
.ad_height
display: block !important
height: auto !important
// animation
#content-inner,
#footer
animation: main 1s
#page-header
animation: header-effect 1s
#site_title,
#site_subtitle
animation: titlescale 1s
canvas:not(#ribbon-canvas),
#web_bg
animation: to_show 4s
#ribbon-canvas
animation: ribbon_to_show 4s
.card-announcement-animation
color: #FF0000
animation: announ_animation .8s linear infinite
.scroll-down-effects
animation: scroll-down-effect 1.5s infinite
if hexo-config('avatar.effect') == true
.avatar-img
animation: avatar_turn_around 2s linear infinite
.reward-main
animation: donate_effcet .3s .1s ease both
.tocOpenPc
.sidebar-toc__title
animation: tocsidebarLtoR .5s
.sidebar-toc__progress
animation: tocsidebarLtoR .7s
.sidebar-toc__content
animation: tocsidebarLtoR .9s
.tocOpenMobile
.sidebar-toc__title
animation: tocsidebarRtoL .4s
.sidebar-toc__progress
animation: tocsidebarRtoL .6s
.sidebar-toc__content
animation: tocsidebarRtoL .7s
#mobile-sidebar-menus
&.open
transform: translate3d(-100%, 0, 0)
for i in 1 2 3 4
> :nth-child({i})
animation: sidebarItem (i / 5)s
@keyframes scroll-down-effect
0%
top: 0
opacity: .4
50%
top: -16px
opacity: 1
100%
top: 0
opacity: .4
@keyframes header-effect
0%
opacity: 0
transform: translateY(-50px)
100%
opacity: 1
transform: translateY(0)
@keyframes headerNoOpacity
0%
transform: translateY(-50px)
100%
transform: translateY(0)
@keyframes main
0%
opacity: 0
transform: translateY(50px)
100%
opacity: 1
transform: translateY(0)
@keyframes titlescale
0%
opacity: 0
transform: scale(.7)
100%
opacity: 1
transform: scale(1)
@keyframes search_close
0%
opacity: 1
transform: scale(1)
100%
opacity: 0
transform: scale(.7)
@keyframes to_show
0%
opacity: 0
100%
opacity: 1
@keyframes ribbon_to_show
0%
opacity: 0
100%
opacity: hexo-config('canvas_ribbon.alpha')
@keyframes avatar_turn_around
from
transform: rotate(0)
to
transform: rotate(360deg)
@keyframes sub_menus
0%
opacity: 0
transform: translateY(10px)
100%
opacity: 1
transform: translateY(0)
@keyframes donate_effcet
0%
opacity: 0
transform: translateY(-20px)
100%
opacity: 1
transform: translateY(0)
@keyframes announ_animation
0%,
to
transform: scale(1)
50%
transform: scale(1.2)
@keyframes sidebarItem
0%
transform: translateX(200px)
100%
transform: translateX(0)
@keyframes tocsidebarRtoL
0%
transform: translateX(200px)
100%
transform: translateX(0)
@keyframes tocsidebarLtoR
0%
transform: translateX(-200px)
100%
transform: translateX(0)
点击查看
1 | html |
页脚心跳
在\themes\butterfly\layout\includes\footer.pug
中修改以下内容
1 | <i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;"class="fas fa-heart"></i> |
修改如下
点击查看
1 |
|
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 米奇妙妙屋!
评论