白天黑夜转换动画

点击查看白天黑夜切换动画教程

custom文件夹若没有需要自己新建，以后新建的文件可以放置此处

  1. 新建[Blogroot]\themes\butterfly\layout\includes\custom\sun_moon.pug,这部分其实实质上就是一个svg文件，通过js操作它的旋转显隐，淡入淡出实现动画效果。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    svg(aria-hidden='true', style='position:absolute; overflow:hidden; width:0; height:0')
      symbol#icon-sun(viewBox='0 0 1024 1024')
        path(d='M960 512l-128 128v192h-192l-128 128-128-128H192v-192l-128-128 128-128V192h192l128-128 128 128h192v192z', fill='#FFD878', p-id='8420')
        path(d='M736 512a224 224 0 1 0-448 0 224 224 0 1 0 448 0z', fill='#FFE4A9', p-id='8421')
        path(d='M512 109.248L626.752 224H800v173.248L914.752 512 800 626.752V800h-173.248L512 914.752 397.248 800H224v-173.248L109.248 512 224 397.248V224h173.248L512 109.248M512 64l-128 128H192v192l-128 128 128 128v192h192l128 128 128-128h192v-192l128-128-128-128V192h-192l-128-128z', fill='#4D5152', p-id='8422')
        path(d='M512 320c105.888 0 192 86.112 192 192s-86.112 192-192 192-192-86.112-192-192 86.112-192 192-192m0-32a224 224 0 1 0 0 448 224 224 0 0 0 0-448z', fill='#4D5152', p-id='8423')
      symbol#icon-moon(viewBox='0 0 1024 1024')
        path(d='M611.370667 167.082667a445.013333 445.013333 0 0 1-38.4 161.834666 477.824 477.824 0 0 1-244.736 244.394667 445.141333 445.141333 0 0 1-161.109334 38.058667 85.077333 85.077333 0 0 0-65.066666 135.722666A462.08 462.08 0 1 0 747.093333 102.058667a85.077333 85.077333 0 0 0-135.722666 65.024z', fill='#FFB531', p-id='11345')
        path(d='M329.728 274.133333l35.157333-35.157333a21.333333 21.333333 0 1 0-30.165333-30.165333l-35.157333 35.157333-35.114667-35.157333a21.333333 21.333333 0 0 0-30.165333 30.165333l35.114666 35.157333-35.114666 35.157334a21.333333 21.333333 0 1 0 30.165333 30.165333l35.114667-35.157333 35.157333 35.157333a21.333333 21.333333 0 1 0 30.165333-30.165333z', fill='#030835', p-id='11346')
  2. 新建[Blogroot]\themes\butterfly\source\css\_layout\sun_moon.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
    .Cuteen_DarkSky,
    .Cuteen_DarkSky:before
      content ''
      position fixed
      left 0
      right 0
      top 0
      bottom 0
      z-index 88888888

    .Cuteen_DarkSky
      background linear-gradient(#feb8b0, #fef9db)
      &:before
        transition 2s ease all
        opacity 0
        background linear-gradient(#4c3f6d, #6c62bb, #93b1ed)

    .DarkMode
      .Cuteen_DarkSky
        &:before
          opacity 1

    .Cuteen_DarkPlanet
      z-index 99999999
      position fixed
      left -50%
      top -50%
      width 200%
      height 200%
      -webkit-animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
      animation CuteenPlanetMove 2s cubic-bezier(0.7, 0, 0, 1)
      transform-origin center bottom


    @-webkit-keyframes CuteenPlanetMove {
      0% {
        transform: rotate(0);
      }
      to {
        transform: rotate(360deg);
      }
    }
    @keyframes CuteenPlanetMove {
      0% {
        transform: rotate(0);
      }
      to {
        transform: rotate(360deg);
      }
    }
    .Cuteen_DarkPlanet
      &:after
        position absolute
        left 35%
        top 40%
        width 9.375rem
        height 9.375rem
        border-radius 50%
        content ''
        background linear-gradient(#fefefe, #fffbe8)

    .search
      span
        display none

    .menus_item
      a
        text-decoration none!important
    //按钮相关，对侧栏按钮做过魔改的可以调整这里的数值
    .icon-V
      padding 5px
  3. 新建[Blogroot]\themes\butterfly\source\js\custom\sun_moon.js,去除了冗余代码，去jquery。感觉源代码做过混淆加密，好多三元运算一层套一层，看昏了都。
    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
    function switchNightMode() {
        document.querySelector('body').insertAdjacentHTML('beforeend', '<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>'),
            setTimeout(function() {
                document.querySelector('body').classList.contains('DarkMode') ? (document.querySelector('body').classList.remove('DarkMode'), localStorage.setItem('isDark', '0'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon')) : (document.querySelector('body').classList.add('DarkMode'), localStorage.setItem('isDark', '1'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun')),
                    setTimeout(function() {
                        document.getElementsByClassName('Cuteen_DarkSky')[0].style.transition = 'opacity 3s';
                        document.getElementsByClassName('Cuteen_DarkSky')[0].style.opacity = '0';
                        setTimeout(function() {
                            document.getElementsByClassName('Cuteen_DarkSky')[0].remove();
                        }, 1e3);
                    }, 2e3)
            })
        const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
        if (nowMode === 'light') {
            activateDarkMode()
            saveToLocal.set('theme', 'dark', 2)
            GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
            document.getElementById('modeicon').setAttribute('xlink:href', '#icon-sun')
        } else {
            activateLightMode()
            saveToLocal.set('theme', 'light', 2)
            document.querySelector('body').classList.add('DarkMode'), document.getElementById('modeicon').setAttribute('xlink:href', '#icon-moon')
        }
        // handle some cases
        typeof utterancesTheme === 'function' && utterancesTheme()
        typeof FB === 'object' && window.loadFBComment()
        window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
    }
  4. 修改[Blogroot]\themes\butterfly\layout\includes\head.pug,以后新文件可以自己加在这里：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      //- global config
      !=partial('includes/head/config', {}, {cache: true})

      include ./head/config_site.pug
      include ./head/noscript.pug
    + include ./custom/sun_moon.pug

      !=fragment_cache('injectHeadJs', function(){return inject_head_js()})

      !=fragment_cache('injectHead', function(){return injectHtml(theme.inject.head)})
  5. 修改[Blogroot]\themes\butterfly\layout\includes\rightside.pug,把原本的昼夜切换按钮替换掉
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      when 'translate'
        if translate.enable
          button#translateLink(type="button" title=_p('rightside.translate_title'))= translate.default
      when 'darkmode'
        if darkmode.enable && darkmode.button
    -     button#darkmode(type="button" title=_p('rightside.night_mode_title'))
    -       i.fas.fa-adjust
    +     a.icon-V.hidden(onclick='switchNightMode()',  title=_p('rightside.night_mode_title'))
    +       svg(width='25', height='25', viewBox='0 0 1024 1024')
    +         use#modeicon(xlink:href='#icon-moon')
  6. 修改[Blogroot]\_config.butterfly.yml,引入一下js
    1
    2
    3
    4
    inject:
      head:
      bottom:
        - <script src="/js/custom/sun_moon.js" async></script>
  7. 具体效果就自己切换下夜间模式看看吧。

首页文章卡片修改，感觉不好看，自己未采用
点击首页文章卡片修改教程
  1. 修改[Blogroot]\themes\butterfly\layout\includes\mixins\post-ui.pug，将整个文件的内容替换为以下代码：
    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
    mixin postUI(posts)
      each article , index in page.posts.data
        .recent-post-item
          -
            let link = article.link || article.path
            let title = article.title || _p('no_title')
            const position = theme.cover.position
            let leftOrRight = position === 'both'
              ? index%2 == 0 ? 'left' : 'right'
              : position === 'left' ? 'left' : 'right'
            let post_cover = article.cover
            let no_cover = article.cover === false || !theme.cover.index_enable ? 'no-cover' : ''
          -
          .recent-post-content(class=leftOrRight)
            a.article-content(href=url_for(link) title=subtitle)
              //- Display the article introduction on homepage
              case theme.index_post_content.method
                when false
                  - break
                when 1
                  .article-content-text!= article.description
                when 2
                  if article.description
                    .article-content-text!= article.description
                  else
                    - const content = strip_html(article.content)
                    - let expert = content.substring(0, theme.index_post_content.length)
                    - content.length > theme.index_post_content.length ? expert += ' ...' : ''
                    .article-content-text!= expert
                default
                  - const content = strip_html(article.content)
                  - let expert = content.substring(0, theme.index_post_content.length)
                  - content.length > theme.index_post_content.length ? expert += ' ...' : ''
                  .article-content-text!= expert
            .recent-post-info
              a.article-title(href=url_for(link) title=subtitle)
                .article-title-link= title
              .recent-post-meta                
                .article-meta-wrap
                  if (is_home() && (article.top || article.sticky > 0))
                    span.article-meta
                      i.fas.fa-thumbtack.sticky
                      span.sticky= _p('sticky')
                      span.article-meta-separator |
                  if (theme.post_meta.page.date_type)
                    span.post-meta-date
                      if (theme.post_meta.page.date_type === 'both')
                        i.far.fa-calendar-alt
                        span.article-meta-label=_p('post.created')
                        time.post-meta-date-created(datetime=date_xml(article.date) title=_p('post.created') + ' ' + full_date(article.date))=date(article.date, config.date_format)
                        span.article-meta-separator |
                        i.fas.fa-history
                        span.article-meta-label=_p('post.updated')
                        time.post-meta-date-updated(datetime=date_xml(article.updated) title=_p('post.updated') + ' ' + full_date(article.updated))=date(article.updated, config.date_format)
                      else
                        - let data_type_updated = theme.post_meta.page.date_type === 'updated'
                        - let date_type = data_type_updated ? 'updated' : 'date'
                        - let date_icon = data_type_updated ? 'fas fa-history' :'far fa-calendar-alt'
                        - let date_title = data_type_updated ? _p('post.updated') : _p('post.created')
                        i(class=date_icon)
                        span.article-meta-label=date_title
                        time(datetime=date_xml(article[date_type]) title=date_title + ' ' + full_date(article[date_type]))=date(article[date_type], config.date_format)
                  if (theme.post_meta.page.categories && article.categories.data.length > 0)
                    span.article-meta
                      span.article-meta-separator |
                      i.fas.fa-inbox
                      each item, index in article.categories.data
                        a(href=url_for(item.path)).article-meta__categories #[=item.name]
                        if (index < article.categories.data.length - 1)
                          i.fas.fa-angle-right.article-meta-link
                  if (theme.post_meta.page.tags && article.tags.data.length > 0)
                    span.article-meta.tags
                      span.article-meta-separator |
                      i.fas.fa-tag
                      each item, index in article.tags.data
                        a(href=url_for(item.path)).article-meta__tags #[=item.name]
                        if (index < article.tags.data.length - 1)
                          span.article-meta-link #[='•']

                  mixin countBlockInIndex
                    - needLoadCountJs = true
                    span.article-meta
                      span.article-meta-separator |
                      i.fas.fa-comments
                      if block
                        block
                      span.article-meta-label= ' ' + _p('card_post_count')

                  if theme.comments.card_post_count
                    case theme.comments.use[0]
                      when 'Disqus'
                      when 'Disqusjs'
                        +countBlockInIndex
                          a(href=full_url_for(link) + '#disqus_thread')
                      when 'Valine'
                        +countBlockInIndex
                          a(href=url_for(link) + '#post-comment' itemprop="discussionUrl")
                            span.valine-comment-count(data-xid=url_for(link) itemprop="commentCount")
                      when 'Waline'
                        +countBlockInIndex
                          a(href=url_for(link) + '#post-comment')
                            span.waline-comment-count(id=url_for(link))
                      when 'Twikoo'
                        +countBlockInIndex
                          a.twikoo-count(href=url_for(link) + '#post-comment')
                      when 'Facebook Comments'
                        +countBlockInIndex
                          a(href=url_for(link) + '#post-comment')
                            span.fb-comments-count(data-href=urlNoIndex(article.permalink))
            .recent-post-cover
              img.article-cover(src=url_for(post_cover) onerror=`this.onerror=null;this.src='`+ url_for(theme.error_img.post_page) + `'` alt=subtitle)

        if theme.ad && theme.ad.index
          if (index + 1) % 3 == 0
            .recent-post-item.ads-wrap!=theme.ad.index
  2. 修改[Blogroot]\themes\butterfly\source\css\_page\homepage.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
    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
    //default color:
    :root
      --recent-post-bgcolor: rgba(255, 255, 255, 0.9)
      --article-content-bgcolor: #49b1f5
      --recent-post-triangle: #fff
      --recent-post-cover-shadow: #ffffff
    [data-theme="dark"]
      --recent-post-bgcolor: rgba(35,35,35,0.5)
      --article-content-bgcolor: #99999a
      --recent-post-triangle: #37e2dd
      --recent-post-cover-shadow: #232323
    .recent-posts
      padding 0 15px 0 15px

      .recent-post-item
        margin-bottom 15px
        width 100%
        background var(--recent-post-bgcolor)
        overflow hidden
        border-radius 15px
        .recent-post-info
          .article-title-link
            display -webkit-box
            -webkit-box-orient vertical
            -webkit-line-clamp 2
            overflow hidden
        .article-content
          background var(--article-content-bgcolor)
          position relative
          display flex
          align-items: center;
          justify-content: center;
          .article-content-text
            transition: all .8s cubic-bezier(0.59, 0.01, 0.48, 1.17)
            display -webkit-box
            -webkit-box-orient vertical
            -webkit-line-clamp 4
            text-overflow: ellipsis
            overflow hidden
            color #fff
            text-shadow: 1px 2px 3px #000;
        .recent-post-cover
          position relative
          background transparent
          img
            &.article-cover
              height 100%
              width 100%
              object-fit cover

        .recent-post-info
          align-items center
          flex-direction column
          position relative
          background var(--recent-post-bgcolor)
          display flex
          color #000000
          .article-title
            height 50%
            font-size 24px
            display: flex
            align-items: center
            justify-content: flex-end
            flex-direction: column
            .article-title-link
              color: var(--text-highlight-color)
              transition: all .2s ease-in-out
              &:hover
                color: $text-hover
          .recent-post-meta
            height 50%
            display: flex
            align-items: center
            justify-content: flex-start
            flex-direction: column
          .article-meta-wrap
            font-size 12px
            color #969797
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            a
              color: var(--text-highlight-color)
              transition: all .2s ease-in-out
              color #969797
              &:hover
                color: $text-hover
        &.ads-wrap
          display: block !important
          height: auto !important
    @media screen and (min-width:600px)
      .recent-post-item
        &:hover
          .recent-post-content
            &.both,
            &.right
              transform translateX(21%)
              transition: all .8s cubic-bezier(0.59, 0.01, 0.48, 1.17)
              &::before
                transition: all .8s cubic-bezier(0.59, 0.01, 0.48, 1.17)
                left: 50px;
              .article-content-text
                margin 20px 20px 20px 60px
            &.left
              transform translateX(-21%)
              transition: all .8s cubic-bezier(0.59, 0.01, 0.48, 1.17)
              &::before
                transition: all .8s cubic-bezier(0.59, 0.01, 0.48, 1.17)
                right: 50px;
              .article-content-text
                margin 20px 60px 20px 20px


        .recent-post-content
          background var(--recent-post-bgcolor)
          position relative
          height 200px
          width 130%
          z-index 0
          display flex
          overflow hidden
          border 0px solid
          &::before
            content: "";
            width: 0;
            height: 0;
            background: transparent;
            position: absolute;
            z-index: 3;
            top: calc(50% - 10px);
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            transition: all .5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
          &.both,
          &.right
            flex-direction: row;
            left calc(-23.07% - 41px)
            transition: all .5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
            &::before
              left: calc(23.07% + 40px);
              border-left: 6px solid var(--recent-post-triangle);
            .recent-post-info
              &::before
                background linear-gradient(to right, var(--recent-post-cover-shadow), transparent)
                left calc(100% - 1px)
            .article-content
              &::before
                right -59px
                border-left 60px solid var(--article-content-bgcolor)
            .article-content-text
              margin 20px 20px 20px 0px
            .article-title
              padding 0px 30px 0px 70px
            .recent-post-meta
              padding 0px 20px 0px 70px
          &.left
            flex-direction: row-reverse;
            right 9px
            transition: all .5s cubic-bezier(0.59, 0.01, 0.48, 1.17)
            &::before
              right: calc(23.07% + 40px);
              border-right: 6px solid var(--recent-post-triangle);
            .recent-post-info
              &::before
                background linear-gradient(to left, var(--recent-post-cover-shadow), transparent)
                right calc(100% - 1px)
            .article-content
              &::before
                left -59px
                border-right 60px solid var(--article-content-bgcolor)
            .article-content-text
              margin 20px 0px 20px 20px
            .article-title
              padding 0px 70px 0px 30px
            .recent-post-meta
              padding 0px 70px 0px 20px

        .article-content
          width 30%
          height 200px
          left 0
          align-items center
          &::before
            content ""
            width 0
            height 0
            background transparent
            position absolute
            z-index 2
            top 0
            border-top 100px solid transparent
            border-bottom 100px solid transparent
        .recent-post-info
          width 60%
          height 200px
          &::before
            content ""
            width 200px
            height 200px
            position absolute
            z-index 1
            top 0
          .recent-post-meta
            & > .article-meta-wrap
              margin: 6px 0
              color: $theme-meta-color
              font-size: 90%

              & > .post-meta-date
                cursor: default

              .sticky
                color: $sticky-color

              i
                margin: 0 4px 0 0

              .article-meta-label
                if hexo-config('post_meta.page.label')
                  padding-right: 4px
                else
                  display: none

              .article-meta-separator
                margin: 0 6px

              .article-meta-link
                margin: 0 4px

              if hexo-config('post_meta.page.date_format') == 'relative'
                time
                  display: none

              a
                color: $theme-meta-color

                &:hover
                  color: $text-hover
                  text-decoration: underline
        .recent-post-cover
          width 40%
          height 200px
    @media screen and (max-width:600px)
      .recent-post-item
        height 400px
        .recent-post-content
          display flex
          flex-direction: column
          height 400px
          .article-content
            pointer-events none
            order: 1;
            height: 200px;
            position: absolute;
            width: calc(100% - 40px);
            z-index: 3;
            background: rgba(22,22,22,0.5);
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
            display: none
            opacity: 0
            .article-content-text
              height 120px
              color: white;
              width: 80%

          .recent-post-cover
            order: 2
            height 200px
            transition: all .5s
          .recent-post-info
            order: 3
            height 200px
            &::before
              content: '';
              width: 0;
              height: 0;
              position: absolute;
              z-index: 3;
              bottom: calc(100% - 4px);
              left: 0;
              border-bottom: 50px solid var(--recent-post-bgcolor);
              border-right: 300px solid transparent;
            &::after
              content: '';
              width: 0;
              height: 0;
              position: absolute;
              z-index: 3;
              bottom: calc(100% + 150px);
              right: 0;
              border-top: 50px solid var(--recent-post-bgcolor);
              border-left: 300px solid transparent;
            .article-title
              padding: 0px 35px 0px 35px
            .recent-post-meta
              padding: 0px 30px 0px 30px
        &:hover
          .article-content
            display: flex !important;
            animation: shutter-effect-content 0.5s 2 forwards linear
          .recent-post-info
            &::before
              animation: shutter-effect-left 0.5s 1 ease-in-out
            &::after
              animation: shutter-effect-right 0.5s 1 ease-in-out
          .recent-post-cover
            filter blur(2px)
    @keyframes shutter-effect-right  {
      0%{
        bottom: calc(100% + 150px);
        border-top: 50px solid var(--recent-post-bgcolor);
        border-left: 300px solid transparent;
      }
      50%{
        bottom: 100%;
        border-top: 200px solid var(--recent-post-bgcolor);
        border-left: 600px solid transparent;
      }
      100%{
        bottom: calc(100% + 150px);
        border-top: 50px solid var(--recent-post-bgcolor);
        border-left: 300px solid transparent;
      }
    }
    @keyframes shutter-effect-left  {
      0%{
        bottom: calc(100% - 4px);
        border-bottom: 50px solid var(--recent-post-bgcolor);
        border-right: 300px solid transparent;
      }
      50%{
        bottom: calc(100% - 4px);
        border-bottom: 200px solid var(--recent-post-bgcolor);
        border-right: 600px solid transparent;
      }
      100%{
        bottom: calc(100% - 4px);
        border-bottom: 50px solid var(--recent-post-bgcolor);
        border-right: 300px solid transparent;
      }
    }
    @keyframes shutter-effect-content {
      from {
        opacity: 0
      }
      to {
        opacity: 1
      }
    }
    注意事项
    样式配色因为采用了大量伪类，所以如果底色采用了半透明配色，可能因为卡片叠加加深导致接合边界非常明显的暴露出来。所以在配色上，我是不建议加半透明的。
    因为部分伪类的偏移量是靠计算得出的，为了尽量满足自适应效果，部分位置保留了5%左右的容差。所以在一些极端屏宽比下，还是会出现一些样式不完美问题。

顶栏菜单——子菜单居中
修改子菜单居中
  1. 新建[Blogroot]\themes\butterfly\source\css\custom\menu_center.css,添加样式。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    /* 横向排布子菜单 */
    #nav .menus_items .menus_item .menus_item_child li {
      display: inline-block;
    }
    /* 圆角隐藏 */
    ul.menus_item_child {
      overflow: hidden;
      border-radius: 5px;
    }
    /* 调整空隙，确保不会天下武功唯快不破 */
    #nav .menus_items .menus_item .menus_item_child {
      margin-top: 0px !important;
    }
  2. 打开[Blogroot]\themes\butterfly\layout\includes\header\menu_item.pug,修改内容。参数记得自己计算。
    1
    2
    - ul.menus_item_child
    + ul.menus_item_child(style=`left:`+ (-48 * Object.keys(value).length + 65) + `px;`)
  3. 引入css文件
    1
    2
    3
    inject:
      head:
    +   - <link rel="stylesheet" href="/css/custom/menu_center.css">

站点动态title
点击查看站点动态title教程

站点动态title是通过js监测是否聚焦于当前页面，从而替换标签显示内容。

  1. 在[Blogroot]\themes\butterfly\source\custom\js\目录下新建diy_title.js，
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    //动态标题
    var OriginTitile = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function () {
      if (document.hidden) {
        //离开当前页面时标签显示内容
        document.title = 'w(ﾟДﾟ)w 不要走！再看看嘛！';
        clearTimeout(titleTime);
      }
      else {
        //返回当前页面时标签显示内容
        document.title = '♪(^∇^*)欢迎回来！' + OriginTitile;
        //两秒后变回正常标题
        titleTime = setTimeout(function () {
          document.title = OriginTitile;
        }, 2000);
      }
    });
  2. 在[Blogroot]\_config.butterfly.yml的inject配置项添加引入,此处因为这是个独立的js，而且体量极小，所以可以添加async异步加载标签：
    1
    2
    3
    4
    5
      inject:
        head:
          # - <link rel="stylesheet" href="/xxx.css">
        bottom:
    +     - <script async src="/js/diytitle.js"></script>

信笺样式留言板
信笺样式留言板
  1. 在[Blogroot]运行指令
    1
    npm install hexo-butterfly-envelope --save
  2. 在站点配置文件或者主题配置文件添加配置项（对，两者任一均可。但不要都写）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    # envelope_comment
    # see https://akilar.top/posts/e2d3c450/
    envelope_comment:
      enable: true #控制开关
      custom_pic:      
        cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
        line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
        beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
        afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png # 信封后半部分
      message: #信笺正文，多行文本，写法如下
        - 有什么想问的？
        - 有什么想说的？
        - 有什么想吐槽的？
        - 哪怕是有什么想吃的，都可以告诉我哦~
      bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
      height: #1050px，信封划出的高度
      path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
      front_matter: #【可选】comments页面的 front_matter 配置
        title: 留言板
        comments: true
  1. 新建[Blogroot]\hemes\butterfly\layout\includes\page\envelope.pug
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    #article-container
      if top_img === false
        h1.page-title= page.title
      #maincontent
        #form-wrap
          img#beforeimg(src='https://cdn.jsdelivr.net/gh/Akilarlxh/Valine-Admin@v1.0/source/img/before.png')
          #envelope
            form
              .formmain
                img.headerimg(src=url_for(theme.envelope_comment.cover))
                .comments-main
                  h3.title3=`来自` + config.author + `的留言:`
                  .comments
                    each i in theme.envelope_comment.message
                      div=`${i}`
                  .bottomcontent
                    img.bottomimg(src='https://ae01.alicdn.com/kf/U0968ee80fd5c4f05a02bdda9709b041eE.png')
                  p.bottomhr=`${theme.envelope_comment.bottom}`
          img#afterimg(src='https://cdn.jsdelivr.net/gh/Akilarlxh/Valine-Admin@v1.0/source/img/after.png')
      != page.content
  2. 新建[Blogroot]\themes\butterfly\source\css\_layout\commentsbar.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
    if hexo-config('envelope_comment.enable')
      $hoverHeight = hexo-config('envelope_comment.height') ? convert(hexo-config('envelope_comment.height')) : 1050px
      @media screen and (max-width: 600px)
        #beforeimg,
        #afterimg
          display none !important

      @media screen and (min-width: 600px)
        #article-container
          img
            margin 0 auto 0rem
        #form-wrap
          overflow hidden
          height 447px
          position relative
          top 0px
          transition all 1s ease-in-out .3s
          z-index 0
          &:hover
            height $hoverHeight
            top -200px
        #maincontent
          width 530px
          margin 20px auto 0
        #beforeimg
          position absolute
          bottom 126px
          left 0px
          background-repeat no-repeat
          width 530px
          height 317px
          z-index -100
          pointer-events none
        #afterimg
          position absolute
          bottom -2px
          left 0
          background-repeat no-repeat
          width 530px
          height 259px
          z-index 100
          pointer-events none
        #envelope
          position relative
          overflow visible
          width 500px
          margin 0px auto
          transition all 1s ease-in-out .3s
          padding-top 200px

      .headerimg
        width 100%
        overflow hidden
        pointer-events none

      .formmain
        background white
        width 95%
        max-width 800px
        margin auto auto
        border-radius 5px
        border 1px solid
        overflow hidden
        -webkit-box-shadow 0px 0px 20px 0px rgba(0, 0, 0, 0.12)
        box-shadow 0px 0px 20px 0px rgba(0, 0, 0, 0.18)
      .comments-main
        padding 5px 20px
      .title3
        text-decoration none
        color $theme-color
        text-align center
      .comments
        text-align center
        border-bottom #ddd 1px solid
        border-left #ddd 1px solid
        padding-bottom 20px
        background-color #eee
        margin 15px 0px
        padding-left 20px
        padding-right 20px
        border-top #ddd 1px solid
        border-right #ddd 1px solid
        padding-top 20px

      .bottomcontent
        text-align center
        margin-top 40px

      .bottomimg
        width 100%
        margin 5px auto 5px auto
        display block
        pointer-events none

      .bottomhr
        font-size 12px
        text-align center
        color #999

      [data-theme='dark']
        .formmain
          background rgb(50, 50, 50)
        .comments
          background rgba(90, 90, 90, 0.8)
  3. 修改[Blogroot]\themes\butterfly\layout\page.pug
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    block content
      #page
        case page.type
          when 'tags'
            include includes/page/tags.pug
          when 'link'
            include includes/page/flink.pug
          when 'categories'
            include includes/page/categories.pug
          when 'artitalk'
            include includes/page/artitalk.pug
    +     when 'envelope'
    +       include includes/page/envelope.pug
        default
          include includes/page/default-page.pug
  4. 修改[Blogroot]\_config.butterfly.yml,新增配置项
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    envelope_comment:
      enable: true #开关
      cover: https://ae01.alicdn.com/kf/U5bb04af32be544c4b41206d9a42fcacfd.jpg #信笺封面图
      message: #信笺内容，支持多行
        - 有什么想问的？
        - 有什么想说的？
        - 有什么想吐槽的？
        - 哪怕是有什么想吃的，都可以告诉我哦~
      bottom: 自动书记人偶竭诚为您服务！ #信笺结束语，只能单行
      height: #调整信笺划出高度，默认1050px
  5. 新建留言板页面（已有的不用重复操作。）
    在[Blogroot]打开终端，输入
    1
    hexo new page comments
  6. 打开[Blogroot]\source\comments\index.md
    将其内容修改为：
    1
    2
    3
    4
    5
    ---
    title: 留言板
    top_img:
    type: "envelope"
    ---
    旧版方案详见：Akilarの糖果屋

鼠标指针样式替换

点击查看鼠标指针样式替换教程

鼠标指针的样式替换原理其实就是重设对应版块的cursor属性,在这之前我们需要准备好相应的.cur文件，即静态鼠标指针图标。（目前还不支持.ani后缀的动态鼠标指针图标）。可以从一些美化网站找到鼠标指针图标。例如店长就是在一个Windows美化网站上找的。

引用站外地址
致美化——鼠标指针
https://zhutix.com/tag/cursors/

如果下载下来的是.ani格式，然后又实在喜欢这个指针图标，那么可以考虑动态转静态，使用Axialis cursorworkshop这款软件，导入.ani文件后抽取喜欢的那一帧，导出为静态图标。

你甚至还可以直接在阿里图标库里找到心仪的图标以后，在convertio上将png转为cur文件。不过根据店长试用效果来看，因为png文件转的cur文件较大，很多时候图标都加载不出来。最好事先降低一下图标的分辨率到合适的程度。

然后就是正文了，依然是在custom.css中进行修改。用F12控制台左上方的箭头按钮获取对应块元素的id或者css。然后修改对应的cursor属性。cur图标的路径引用方式和背景图片的引用方式是一样的，都支持图床外链和本地相对链接。以下是一些常用位置的更改示例。读者还可以自己定义更多块元素的具体图标。

  1. 新建[Blogroot]\themes\butterfly\source\css\custom\mouse_cursor.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
    /* 全局默认鼠标指针 */
    body,
    html{
      cursor: url('https://npm.elemecdn.com/akilar-candyassets/cur/arrow.cur'),auto !important;
    }
    /* 悬停图片时的鼠标指针 */
    img{
      cursor: url('https://npm.elemecdn.com/akilar-candyassets/cur/btn.cur'),auto !important;
    }
    /* 选择链接标签时的鼠标指针 */
    a:hover{
        cursor: url('https://npm.elemecdn.com/akilar-candyassets/cur/link.cur'),auto;
    }
    /* 选中输入框时的鼠标指针 */
    input:hover{
        cursor: url('https://npm.elemecdn.com/akilar-candyassets/cur/input.cur'),auto;
    }
    /* 悬停按钮时的鼠标指针 */
    button:hover{
        cursor: url('https://npm.elemecdn.com/akilar-candyassets/cur/btn.cur'),auto;
    }
    /* 悬停列表标签时的鼠标指针 */
    i:hover{
        cursor: url('https://npm.elemecdn.com/akilar-candyassets/cur/link.cur'),auto;
    }
    /* 悬停页脚链接标签（例如页脚徽标）时的鼠标指针 */
    #footer-wrap a:hover{
          cursor: url('https://npm.elemecdn.com/akilar-candyassets/cur/hf.cur'),auto;
    }
    /* 悬停页码时的鼠标指针 */
    #pagination .page-number:hover{
          cursor: url('https://npm.elemecdn.com/akilar-candyassets/cur/i.cur'),auto;
    }
    /* 悬停菜单栏时的鼠标指针 */
    #nav .site-page:hover{
          cursor: url('https://npm.elemecdn.com/akilar-candyassets/cur/hf.cur'),auto;
    }
  2. 在[Blogroot]_config.butterfly.yml引入文件
    1
    2
    3
    4
    inject:
      head:
        # 鼠标样式
    +    - <link rel="stylesheet" href="/css/custom/mouse_cursor.css">

页脚添加徽标
点击查看页脚添加徽标教程
  1. 修改[Blogroot]\themes\butterfly\layout\includes\footer.pug,添加页脚标签循环节：
    1
    2
    3
    4
    5
    6
    7
    8
        if theme.footer.custom_text
          .footer_custom_text!=`${theme.footer.custom_text}`
        //v3.4.0以下版本可能还有ICP的配置项。此处只要保证p和上方的if缩进平级就好。
    +   p#ghbdages
    +     if theme.ghbdage.enable
    +       each item in theme.ghbdage.bdageitem
    +         a.github-badge(target='_blank' href=url_for(item.link)  style='margin-inline:5px')
    +           img(src=url_for(item.shields) title=item.message)
  2. 在[Blogroot]\_config.butterfly.yml中添加相关配置项：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    ghbdage:
      enable: true
      bdageitem:
        - link: https://hexo.io/  # 标签跳转链接
          shields: https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo #shields的API链接，填法参考本篇教程
          message: 博客框架为Hexo_v5.3.0 #鼠标悬停时显示的信息
        - link: https://butterfly.js.org/
          shields: https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender
          message: 主题版本Butterfly_v3.4.2
        - link: https://www.jsdelivr.com/
          shields: https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr
          message: 本站使用JsDelivr为静态资源提供CDN加速
        - link: https://vercel.com/
          shields: https://img.shields.io/badge/Hosted-Vercel-brightgreen?style=flat&logo=Vercel
          message: 本站采用双线部署，默认线路托管于Vercel
        - link: https://vercel.com/
          shields: https://img.shields.io/badge/Hosted-Coding-0cedbe?style=flat&logo=Codio
          message: 本站采用双线部署，联通线路托管于Coding
        - link: https://github.com/
          shields: https://img.shields.io/badge/Source-Github-d021d6?style=flat&logo=GitHub
          message: 本站项目由Github托管
        - link: http://creativecommons.org/licenses/by-nc-sa/4.0/
          shields: https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?style=flat&logo=Claris
          message: 本站采用知识共享署名-非商业性使用-相同方式共享4.0国际许可协议进行许可

添加留言弹幕功能

Butterfly主题的留言弹幕界面增强版（支持Twikoo、Waline、Valine）

添加白天黑夜转换动画

首页文章卡片修改

修改子菜单居中

站点动态 title

信笺样式留言板

鼠标指针样式替换

页脚添加徽标