IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
    • 登录 注册

    Butterfly美化日记

    JayHrn发表于 2023-12-19 09:35:28
    love 0

    白天黑夜转换动画

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

    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

    信笺样式留言板

    鼠标指针样式替换

    页脚添加徽标



沪ICP备19023445号-2号
友情链接