当前看到的主题为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
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_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
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