当前看到的主题为butterfly模板部分修改后的样式


透明化部分

\themes\butterfly\layout\includes\header\index.pug中添加以下内容

1
2
if !is_post()
- var bg_img = 'background-color:transparent;'

修改如下

点击查看
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
if is_home()
- var top_img = theme.index_img || theme.default_top_img
else if is_post()
- var top_img = page.top_img || page.cover || page.randomcover || theme.default_top_img
else if is_archive()
- var top_img = theme.archive_img || theme.default_top_img
else if is_tag()
- var top_img = theme.tag_img || theme.default_top_img
else if is_category()
- var top_img = theme.category_img || theme.default_top_img
else
- var top_img = page.top_img || theme.default_top_img

if theme.douban
if is_current('/movies/', [strict])
- var top_img = theme.douban.movies_img || theme.default_top_img
else if is_current('/books/', [strict])
- var top_img = theme.douban.books_img || theme.default_top_img
else if is_current('/games/', [strict])
- var top_img = theme.douban.games_img || theme.default_top_img

- var bg_img = top_img && top_img !== true ? `background-image: url(${url_for(top_img)})` : ''
- var site_title = is_archive() ? _p('page.archives') : page.title || page.tag || page.category || config.title
- var isHomeClass = is_home() ? 'full_page' : 'not-index-bg'
- is_post() ? isHomeClass = 'post-bg' : isHomeClass

if !is_post()
- var bg_img = 'background-color:transparent;'
header#page-header(class=isHomeClass style=bg_img)
!=partial('includes/header/nav', {}, {cache:theme.fragment_cache})
if is_home()
#site-info
h1#site_title=site_title
#site_subtitle
span#subtitle
if(theme.social)
#site_social_icons
!=fragment_cache('social', function(){return partial('includes/header/social')})
#scroll_down
i.fas.fa-angle-down.scroll-down-effects
else if is_post()
include ./post-info.pug
else
#page_site-info
h1#site_title=site_title

页脚透明

\themes\butterfly\layout\includes\layout.pug中修改以下内容

1
2
3
4
5
6
7
if !is_post()
if (footerBg === true)
- var footer_bg = 'background-color: transparent;'
else
- var footer_bg = 'background-color: transparent;'
else
- var footer_bg = 'background-color: transparent;'

修改如下

点击查看
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
- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''

doctype html
html(lang=config.language data-theme=theme.display_mode)
head
include ./head.pug
body
if theme.preloader
!=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})

!=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache})

#body-wrap
if theme.background
#web_bg

include ./sidebar.pug
include ./header/index.pug

if (!is_post())
main#content-inner.layout_page(class=hideAside)
if body
div!= body
else
block content
if theme.aside.enable && page.aside !== false
!=partial('includes/widget/index', {}, {cache:theme.fragment_cache})
else
main#content-inner.layout_post
if body
div!= body
else
block content

- var footerBg = theme.footer_bg
if !is_post()
if (footerBg === true)
- var footer_bg = 'background-color: transparent;'
else
- var footer_bg = 'background-color: transparent;'
else
- var footer_bg = 'background-color: transparent;'

footer#footer(style=footer_bg)
!=partial('includes/footer', {}, {cache:theme.fragment_cache})

include ./rightside.pug
!=partial('includes/third-party/search/index', {}, {cache:theme.fragment_cache})
include ./additional-js.pug

dev 3.2.0 以前

点击查看
1
2
if !is_post()
- var footer_bg = 'background-color: transparent;'

修改如下

点击查看
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
- var hideAside = !theme.aside.enable || page.aside === false ? 'hide-aside' : ''

doctype html
html(lang=config.language data-theme=theme.display_mode)
head
include ./head.pug
body
if theme.preloader
!=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})

!=partial('includes/mobile-sidebar/index', {}, {cache:theme.fragment_cache})

#body-wrap
if theme.background
- var is_photo = theme.background.startsWith('url') ? 'photo':'color'
#web_bg(data-type=is_photo)

include ./sidebar.pug
include ./header/index.pug

if (!is_post())
main#content-inner.layout_page(class=hideAside)
if body
div!= body
else
block content
if theme.aside.enable && page.aside !== false
!=partial('includes/widget/index', {}, {cache:theme.fragment_cache})
else
main#content-inner.layout_post
if body
div!= body
else
block content

- var footer_bg = theme.footer_bg == false ? '' : bg_img
if !is_post()
- var footer_bg = 'background-color: transparent;'
- var is_bg = theme.footer_bg == false ? 'color' : 'photo'
footer#footer(style=footer_bg data-type=is_bg)
!=partial('includes/footer', {}, {cache:theme.fragment_cache})

include ./rightside.pug
!=partial('includes/third-party/search/index', {}, {cache:theme.fragment_cache})
include ./additional-js.pug

~ ### 黑暗模式下 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(#121212, 2)
--font-color: alpha(#FFFFFF, .6)
--hr-border: alpha(#FFFFFF, .3)
--hr-before-color: alpha(#FFFFFF, .6)
--search-bg: #121212
--search-input-color: alpha(#FFFFFF, .6)
--search-result-title: alpha(#FFFFFF, .8)
--preloader-bg: darken(#121212, 2)
--preloader-color: alpha(#FFFFFF, .6)
--tab-border-color: #2c2c2c
--tab-botton-bg: #2c2c2c
--tab-botton-color: alpha(#FFFFFF, .6)
--tab-button-hover-bg: lighten(#121212, 15)
--tab-button-active-bg: #121212
--card-bg: #121212
--sidebar-bg: #121212
--btn-hover-color: lighten(#121212, 40)
--btn-color: alpha(#FFFFFF, .6)
--btn-bg: lighten(#121212, 5)
--text-bg-hover: lighten(#121212, 15)
--light-grey: alpha(#FFFFFF, .6)
--white: alpha(#FFFFFF, .8)
--text-highlight-color: alpha(#FFFFFF, .8)
--blockquote-color: alpha(#FFFFFF, .6)
--blockquote-bg: lighten(#121212, 10)
--reward-pop: lighten(#121212, 10)
--sidebar-icon-color: alpha(#FFFFFF, .6)

// 網站背景,footer背景
#web_bg[data-type=color],
#footer[data-type=color]
background: darken(#121212, 2)

#web_bg[data-type=photo]:before,
#footer[data-type=photo]:before
position: absolute
width: 100%
height: 100%
background-color: alpha($dark-black, .7)
content: ''

#page-header
background-color: #121212

#article-container
code
background: #2c2c2c

pre > code
background: 0

.note
code
background: $code-background

// 頭部
#page-header
&:before
position: absolute
top: 0
left: 0
display: block
width: 100%
height: 100%
content: ''

& > #nav
&.fixed
background: alpha(#121212, .8)
box-shadow: 0 5px 6px -5px rgba(133, 133, 133, 0)

// 代碼框
#article-container
pre,
.highlight:not(.js-file-line-container)
background-color: lighten(#121212, 2) !important
color: alpha(#FFFFFF, .6) !important

figure.highlight
box-shadow: none

if hexo-config('rootConfig.highlight') && hexo-config('rootConfig.highlight.enable')
table::-webkit-scrollbar-thumb
background: lighten(#121212, 5)

.line:before
color: alpha(#FFFFFF, .6) !important

.hljs
background-color: lighten(#121212, 2) !important

pre[class*='language-']::-webkit-scrollbar-thumb
background: lighten(#121212, 5)

.highlight-tools
background: lighten(#121212, 3) !important
color: #90a4ae !important

#post-comment
.comment-switch
if hexo-config('comments.text')
background: #2c2c2c !important

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,
#article-container iframe,
img,
.gist,
.aplayer
filter: brightness(.7)

#aside_content .aside-list > .aside-list-item:not(:last-child)
border-bottom: 1px dashed alpha(#FFFFFF, .1)

// 第三方
// 插件 hexo-blog-encrypt
#hexo-blog-encrypt
label,
input
color: alpha(#FFFFFF, .6) !important

input
background-color: #121212

// Gitalk
#gitalk-container
filter: brightness(.8)

svg
fill: alpha(#FFFFFF, .8) !important

// Disqus and Disqusjs
#disqus_thread
#dsqjs
.dsqjs-tab-active,
.dsqjs-no-comment
color: alpha(#FFFFFF, .6)

.dsqjs-order-label
background-color: lighten(#121212, 5)

.dsqjs-post-body
color: alpha(#FFFFFF, .6)

code,
pre
background: #2c2c2c

blockquote
color: alpha(#FFFFFF, .6)


滚动栏样式

\themes\butterfly\source\css\_global\index.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
// 滚动栏调试区
*::-webkit-scrollbar
width: 8px
height: 8px

*::-webkit-scrollbar-thumb
background-color: 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: rgba(73, 177, 245, 0.2);
border-radius: 2em;

*::-webkit-scrollbar-corner
background-color: transparent;

*::-moz-selection
color: #fff;
background-color: var(--btn-bg);

// 滚动栏调试区 结束

滚动栏配色调取config中theme_colormain值。

修改如下

点击查看
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
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: 8px
height: 8px

*::-webkit-scrollbar-thumb
background-color: 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: rgba(73, 177, 245, 0.2);
border-radius: 2em;

*::-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)

页脚心跳

\themes\butterfly\layout\includes\footer.pug中修改以下内容

1
&nbsp;<i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;"class="fas fa-heart"></i>

修改如下

点击查看
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#footer-wrap
if theme.footer.owner.enable
- var now = new Date()
- var nowYear = now.getFullYear()
if theme.footer.owner.since && theme.footer.owner.since != nowYear
.copyright!= `&copy;${theme.footer.owner.since} - ${nowYear} By ${config.author}`
else
.copyright!= `&copy; ${nowYear}&nbsp;<i style="color:#FF6A6A;animation: announ_animation 0.8s linear infinite;"class="fas fa-heart"></i> By ${config.author}`
if theme.footer.copyright
.framework-info
span= _p('footer.framework') + ' '
a(href='https://hexo.io')= 'Hexo'
span.footer-separator |
span= _p('footer.theme') + ' '
a(href='https://github.com/jerryc127/hexo-theme-butterfly')= 'Butterfly'
if theme.footer.custom_text
.footer_custom_text!=`${theme.footer.custom_text}`
if theme.footer.ICP.enable
.icp
a(href=theme.footer.ICP.url)
if theme.footer.ICP.icon
img.icp-icon(src=url_for(theme.footer.ICP.icon))
span=theme.footer.ICP.text