1. 可以通过将index_img设置成false使得首页图消失
  2. 风车标题，文章置顶
    引用站外地址
    文章页H1-H6样式修改
    Guo Le
  3. 将[BlogSource]/themes/butterfly/source/css/custom/下面的所有css文件在[BlogSource]themes/butterfly/source/css/index.styl处进行：
    1
    @import 'custom/*.css'
    这样一来，每个魔改方案的CSS依然可以在独立的CSS文件中找到并修改（如果是手动添加整合的话，只能用注释分割，显然很不利于后续查找修改），而在每次提交时，运行hexo g的过程中就会将所有CSS文件都整合到index.css，并且不用自己去inject啦
  4. 更改Twikoo评论区样式，在自定义样式文件引入即可
    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
    /* 自定义twikoo评论输入框高度 */
    .tk-input[data-v-619b4c52] .el-textarea__inner {
        height: 130px !important;
        background-image: url("https://npm.elemecdn.com/akilar-candyassets/image/zhifeiji.gif");
    }
    /* 输入评论时自动隐藏输入框背景图片 */
    .tk-input[data-v-619b4c52] .el-textarea__inner:focus {
        background-image: none !important;
    }
    /* 调整楼中楼样式 ，整体左移，贴合气泡化效果 */
    .tk-replies {
        left: -70px;
        width: calc(100% + 70px);
    }
    /* 头像宽度调整 rem单位与全局字体大小挂钩，需配合自己情况调整大小以保证头像显示完整*/
    .tk-replies .tk-avatar {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    .tk-replies .tk-avatar img {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    /* 回复框左移，避免窄屏时出框 */
    .tk-comments-container .tk-submit {
        position: relative;
        left: -70px;
    }
    /* 评论块气泡化修改 */
    .tk-content {
        background: #00a6ff; /*默认模式访客气泡配色*/
        padding: 10px;
        color: #fff; /*默认模式访客气泡字体配色*/
        border-radius: 10px;
        font-size: 16px !important;
        width: fit-content;
        max-width: 100%;
        position: relative !important;
        overflow: visible !important;
        max-height: none !important;
    }
    /* 修复图片出框 */
    .tk-content img {
        max-width: 100% !important;
    }
    /* 修复过长文本出框 */
    .tk-content pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    .tk-content a {
        color: #eeecaa; /*默认模式超链接配色*/
    }
    .tk-content::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 20px;
        left: -13px;
        border-top: 2px solid transparent;
        border-bottom: 20px solid transparent;
        border-right: 15px solid #00a6ff; /*默认模式访客气泡小三角配色*/
        border-left: 0px solid transparent;
    }
    .tk-master .tk-content {
        background: #ff8080; /*默认模式博主气泡配色*/
        color: #fff; /*默认模式博主气泡字体配色*/
        width: fit-content;
        max-width: 100%;
    }
    .tk-master .tk-content a {
        color: #eeecaa;
    }
    .tk-master .tk-content::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 20px;
        left: -13px;
        border-top: 2px solid transparent;
        border-bottom: 20px solid transparent;
        border-right: 15px solid #ff8080; /*默认模式博主气泡小三角配色*/
        border-left: 0px solid transparent;
    }
    .tk-row[data-v-d82ce9a0] {
        max-width: 100%;
        width: fit-content;
    }
    .tk-avatar {
        border-radius: 50%;
        margin-top: 10px;
    }

    /* 夜间模式配色，具体比照上方默认模式class */
    [data-theme="dark"] .tk-content {
        background: #000;
        color: #fff;
    }
    [data-theme="dark"] .tk-content a {
        color: #dfa036;
    }
    [data-theme="dark"] .tk-content::before {
        border-right: 15px solid #000;
    }
    [data-theme="dark"] .tk-master .tk-content {
        background: #000;
        color: #fff;
    }
    [data-theme="dark"] .tk-master .tk-content a {
        color: #dfa036;
    }
    [data-theme="dark"] .tk-master .tk-content::before {
        border-top: 2px solid transparent;
        border-bottom: 20px solid transparent;
        border-right: 15px solid #000;
        border-left: 0px solid transparent;
    }
    /* 自适应内容 */
    @media screen and (min-width: 1024px) {
        /* 设置宽度上限，避免挤压博主头像 */
        .tk-content {
            max-width: 75%;
            width: fit-content;
        }
        .tk-master .tk-content {
            width: 75%;
        }
        .tk-master .tk-content::before {
            left: 100%;
            border-left: 15px solid #ff8080;
            border-right: 0px solid transparent;
        }
        .tk-master .tk-avatar {
            position: relative;
            left: calc(75% + 70px);
        }
        .tk-master .tk-row[data-v-d82ce9a0] {
            position: relative;
            top: 0px;
            left: calc(75% - 230px);
        }
        [data-theme="dark"] .tk-master .tk-content::before {
            border-left: 15px solid #000;
            border-right: 0px solid transparent;
        }
    }
    /* 设备名称常态隐藏，悬停评论时显示 */
    .tk-extras {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    .tk-content:hover + .tk-extras {
        -webkit-animation: tk-extras-fadeIn 0.5s linear;
        -moz-animation: tk-extras-fadeIn 0.5s linear;
        -o-animation: tk-extras-fadeIn 0.5s linear;
        -ms-animation: tk-extras-fadeIn 0.5s linear;
        animation: tk-extras-fadeIn 0.5s linear;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -o-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }
    @-moz-keyframes tk-extras-fadeIn {
        from {
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
        }
        to {
            opacity: 1;
            -ms-filter: none;
            filter: none;
        }
    }
    @-webkit-keyframes tk-extras-fadeIn {
        from {
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
        }
        to {
            opacity: 1;
            -ms-filter: none;
            filter: none;
        }
    }
    @-o-keyframes tk-extras-fadeIn {
        from {
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
        }
        to {
            opacity: 1;
            -ms-filter: none;
            filter: none;
        }
    }
    @keyframes tk-extras-fadeIn {
        from {
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
        }
        to {
            opacity: 1;
            -ms-filter: none;
            filter: none;
        }
    }

  5. 部署到coding教程

    引用站外地址
    部署到coding教程
    杜老师说

  6. 页脚美化

    查看方案

    1. 将[BlogSource]\themes\butterfly\layout\includes\footer.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
      //- #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!= `©${theme.footer.owner.since} - ${nowYear} By ${config.author}`
      //-     else
      //-       .copyright!= `©${nowYear} 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}`

      #footer_icon
        a.icon_link(href="https://www.leonus.cn/" title="我的主页")
          i.iconfont.icon-dribbble-circle-fill
        a.icon_link(href="https://github.com/Lea321" title="Github主页")
          i.iconfont.icon-github-fill
        a.icon_link(href="/atom.xml" title="Rss订阅")
          i.iconfont.icon-Rss
        img.footer_logo(src='https://q1.qlogo.cn/g?b=qq&nk=553344777&s=4' onclick="btf.scrollToDest(0,500)" title="返回顶部")
        a.icon_link(href="https://res.abeim.cn/api/qq/?qq=553344777" title="联系QQ")
          i.iconfont.icon-qq
        a.icon_link(href="/wechat/" title="联系微信")
          i.iconfont.icon-weixin-copy
        a.icon_link(href="mailto:553344777@qq.com" title="发送邮件")
          i.iconfont.icon-mail4
      #leonus-footer
        .footer-group
          h3.footer-title 直达
          .footer-links
            a.footer-item(href="https://www.leonus.cn/") 我的主页
            a.footer-item(href="/talk") 空间说说
            a.footer-item(href="/wallpaper") 壁纸收藏
            a.footer-item(href="/bg") 切换背景
        .footer-group
          h3.footer-title 分类
          .footer-links
            a.footer-item(href="/categories/博客相关") 博客相关
            a.footer-item(href="/categories/学习笔记") 学习笔记
            a.footer-item(href="/categories/实用教程") 实用教程
            a.footer-item(href="/categories/生活记录") 生活记录
            a.footer-item(href="/categories/随便写写") 随便写写
        .footer-group
          h3.footer-title 关于
          .footer-links
            a.footer-item(href="/about/#关于我") 关于我
            a.footer-item(href="/about/#访问统计") 站点统计
            a.footer-item(href="/archives") 文章归档
            a.footer-item(href="/update") 更新记录
        .footer-group#friend-links-in-footer
          h3.footer-title 友链
          .footer-links
            a.footer-item(href="") 随机加载中...
            a.footer-item(href="") 随机加载中...
            a.footer-item(href="") 随机加载中...
            a.footer-item(href="") 随机加载中...
            a.footer-item(href="/link") 查看更多
      #footer-banner
        .footer-banner-links
          .footer-banner-left
            #runtime
          .footer-banner-right
            a.footer-banner-link(href="https://hexo.io/zh-cn/" title="框架") Hexo
            a.footer-banner-link |
            a.footer-banner-link(href="https://butterfly.js.org/" title="主题") Butterfly
            a.footer-banner-link |
            a.footer-banner-link(href="https://beian.miit.gov.cn/" title="备案号") 豫ICP备20005146号

    2. 新建[BlogSource]\themes\butterfly\source\css\cunstom\custom.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
      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
      381
      382
      383
      384
      385
      386
      387
      388
      389
      390
      391
      392
      393
      394
      395
      396
      397
      398
      399
      400
      401
      402
      403
      404
      405
      406
      407
      408
      409
      410
      411
      412
      413
      414
      415
      416
      417
      418
      419
      420
      421
      422
      423
      424
      425
      426
      427
      428
      429
      430
      431
      432
      433
      434
      435
      436
      437
      438
      439
      440
      441
      442
      443
      444
      445
      446
      447
      448
      449
      450
      451
      452
      453
      454
      455
      456
      457
      458
      459
      460
      461
      462
      463
      464
      465
      466
      467
      468
      469
      470
      471
      472
      473
      474
      475
      476
      477
      478
      479
      480
      481
      482
      483
      484
      485
      486
      487
      488
      489
      490
      491
      492
      493
      494
      495
      496
      497
      498
      499
      500
      501
      502
      503
      504
      505
      506
      507
      508
      509
      510
      511
      512
      513
      514
      515
      516
      517
      518
      519
      520
      521
      522
      523
      524
      525
      526
      527
      528
      529
      530
      531
      532
      533
      534
      535
      536
      537
      538
      539
      540
      541
      542
      543
      544
      545
      546
      547
      548
      549
      550
      551
      552
      553
      554
      555
      556
      557
      558
      559
      560
      561
      562
      563
      564
      565
      566
      567
      568
      569
      570
      571
      572
      573
      574
      575
      576
      577
      578
      579
      580
      581
      582
      583
      584
      585
      586
      587
      588
      589
      590
      591
      592
      593
      594
      595
      596
      597
      598
      599
      600
      601
      602
      603
      604
      605
      606
      607
      608
      609
      610
      611
      612
      613
      614
      615
      616
      617
      618
      619
      620
      ::selection {
          background: var(--select-bg);
          color: var(--select-fc)
      }

      #sta_chart, #statistic {
          font-size: 18px;
          padding: 20px;
          border-radius: 15px;
          width: 100%;
          color: var(--font-color);
          background-color: var(--card-bg);
          border: 2px solid #03a9f4
      }

      #sta_chart canvas {
          animation: none
      }

      #statistic div {
          display: flex;
          justify-content: space-between
      }

      #statistic div span:last-child {
          font-weight: 700
      }

      .toggle {
          border: none;
          overflow: hidden;
          box-shadow: 0 0 15px rgb(145 145 145 / 50%);
          border-radius: 15px
      }

      .toggle > .toggle-button {
          padding: 10px 20px;
          background-color: transparent;
          color: var(--font-color)
      }

      #footer {
          background: 0 0
      }

      #footer::before {
          content: none
      }

      [data-theme=dark] #footer::before {
          content: none
      }

      #footer_icon i {
          font-size: 1.8rem;
          color: var(--font-color);
          transition: .3s;
          line-height: 1.8rem;
          height: 1.8rem
      }

      [data-theme=dark] #footer_icon i {
          color: #e6e6e6
      }

      #footer_icon i:hover {
          color: #49b1f5
      }

      img.footer_logo {
          border-radius: 50%;
          width: 60px;
          height: 60px;
          margin: 0 1rem;
          cursor: pointer;
          filter: drop-shadow(0 12px 12px #ee7d7936);
          transition: cubic-bezier(0, 0, 0, 1.29) .5s;
          transition: all .25s
      }

      img.footer_logo:hover {
          box-shadow: 0 0 15px #49b1f5
      }

      div#footer_icon {
          justify-content: center;
          display: flex;
          margin-top: 2rem;
          align-items: center
      }

      a.icon_link {
          margin: 1rem 27px;
          color: var(--font-color);
          line-height: 1.3rem;
          border-radius: 3rem
      }

      #jayhrn-footer {
          display: flex;
          flex-direction: row;
          width: 100%;
          max-width: 1200px;
          margin: 1rem auto;
          justify-content: space-between;
          flex-wrap: wrap;
          margin-bottom: 3rem;
          padding: 0 1rem
      }

      #jayhrn-footer .footer-group {
          min-width: 120px
      }

      #jayhrn-footer .footer-title {
          color: var(--font-color)
      }

      #jayhrn-footer .footer-links {
          display: flex;
          flex-direction: column
      }

      #jayhrn-footer .footer-item {
          font-size: 1rem;
          line-height: 1;
          margin: .38rem 0;
          color: var(--font-color)
      }

      #footer-banner {
          font-size: 1rem;
          padding: 1rem;
          color: var(--font-color);
          margin-top: 1rem;
          background: var(--card-bg);
          display: flex !important;
          overflow: hidden;
          z-index: 1002;
          transition: .3s;
          border-top: 1px solid #e3e8f7
      }

      #footer-banner .footer-banner-links {
          display: flex;
          justify-content: space-between;
          max-width: 1200px;
          width: 100%;
          margin: 0 auto;
          flex-wrap: wrap
      }

      #footer-banner .footer-banner-left {
          display: flex;
          flex-wrap: wrap;
          min-height: 32px;
          color: var(--font-color);
          font-weight: 700;
          white-space: nowrap
      }

      #footer-banner > div > div.footer-banner-left > span {
          margin-right: 1rem
      }

      #footer-banner .footer-banner-right {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap
      }

      #footer-banner .footer-banner-link {
          margin-right: 1rem;
          color: var(--font-color);
          font-weight: 700;
          white-space: nowrap
      }

      blockquote {
          color: unset
      }

      svg.icon {
          width: 1em;
          height: 1em;
          vertical-align: -.15em;
          fill: currentColor;
          overflow: hidden;
          font-size: 20px
      }

      #universe {
          display: block;
          position: fixed;
          margin: 0;
          padding: 0;
          border: 0;
          outline: 0;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          z-index: 1
      }

      #aside-content .card-info svg {
          -webkit-transition: all .3s;
          -moz-transition: all .3s;
          -o-transition: all .3s;
          -ms-transition: all .3s;
          transition: all .3s
      }

      #aside-content .card-info svg:hover {
          -webkit-transform: rotate(360deg);
          -moz-transform: rotate(360deg);
          -o-transform: rotate(360deg);
          -ms-transform: rotate(360deg);
          transform: rotate(360deg)
      }

      .avatar-img {
          height: 125px;
          width: 125px
      }

      .social-icon svg {
          font-size: 1.5rem
      }

      .site-data > a .length-num {
          line-height: 2.3rem
      }

      #twikoo .tk-content ul {
          padding-left: 20px
      }

      #twikoo blockquote {
          border: none;
          margin-bottom: 10px;
          font-size: 14px;
          border-radius: 12px;
          background-color: rgba(200, 200, 200, .5)
      }

      [data-theme=dark] #twikoo .tk-content {
          background: rgb(70 70 70 / 65%)
      }

      [data-theme=dark] #twikoo blockquote {
          background-color: var(--card-bg)
      }

      .tk-replies .tk-avatar {
          margin-right: .5rem !important
      }

      .tk-expand {
          border: 1px solid #cbcbcb;
          box-shadow: 0 8px 16px -4px #2c2d300c;
          border-radius: 12px;
          letter-spacing: 5px
      }

      .tk-expand:hover {
          color: #fff;
          background-color: #4c4c4c !important
      }

      .tk-nick.tk-nick-link {
          color: #f56c6c !important
      }

      #article-container a, #twikoo .el-textarea textarea::placeholder, #twikoo a {
          color: #878787
      }

      #twikoo .el-textarea textarea {
          min-height: 110px !important;
          background-size: 80px
      }

      [data-theme=dark] #twikoo .el-textarea textarea {
          opacity: .9
      }

      #twikoo .tk-content {
          background: rgb(235 235 235 / 60%);
          padding: 10px 15px;
          border-radius: 10px
      }

      #twikoo .OwO-body {
          transform: translate(0, -115%)
      }

      .tk-extras {
          margin: 5px 0 15px
      }

      .bgbox {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap
      }

      .imgbox, .pimgbox {
          border-radius: 10px;
          overflow: hidden
      }

      .imgbox img, .pimgbox img {
          height: 100%;
          width: 100%
      }

      .pimgbox {
          height: 235px !important
      }

      .box, .imgbox, .pimgbox {
          display: block;
          width: 150px;
          height: 100px;
          margin: 0 10px 10px
      }

      #color {
          border: none;
          background: 0 0;
          width: 155px;
          height: 110px;
          margin: -5px 8px 8px;
          position: relative;
          cursor: pointer
      }

      #color::before {
          position: absolute;
          color: #fff;
          left: 38px;
          top: 44px;
          content: '自定义颜色'
      }

      .weibo-new {
          background: #ff3852
      }

      .weibo-hot {
          background: #ff9406
      }

      .weibo-jyzy {
          background: #ffc000
      }

      .weibo-recommend {
          background: #00b7ee
      }

      .weibo-adrecommend {
          background: #febd22
      }

      .weibo-friend {
          background: #8fc21e
      }

      .weibo-boom {
          background: #bd0000
      }

      .weibo-topic {
          background: #ff6f49
      }

      .weibo-topic-ad {
          background: #4dadff
      }

      .weibo-boil {
          background: #f86400
      }

      #weibo .item-content {
          text-align: center
      }

      #weibo-container {
          width: 100%;
          height: 140px;
          font-size: 95%;
          overflow-y: auto;
          -ms-overflow-style: none;
          scrollbar-width: none
      }

      .weibo-list-item {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-wrap: nowrap
      }

      .weibo-title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-right: auto
      }

      .weibo-num {
          float: right
      }

      .weibo-hotness {
          display: inline-block;
          padding: 0 6px;
          transform: scale(.8) translateX(-3px);
          color: #fff;
          border-radius: 8px
      }

      #weibo-container a {
          color: #555
      }

      [data-theme=dark] #weibo-container a {
          color: rgba(255, 255, 255, .7)
      }

      #bber-talk, #bber-talk a {
          color: var(--font-color)
      }

      #bber-talk {
          cursor: pointer;
          width: 100%;
          min-height: 50px;
          background: var(--card-bg);
          padding: .5rem 1rem;
          border-radius: 14px;
          display: flex;
          align-items: center;
          overflow: hidden;
          font-weight: 700
      }

      #bber-talk .item i {
          margin-left: 5px
      }

      #bber-talk > i {
          font-size: 1.1rem
      }

      #bber-talk .talk-list {
          max-height: 32px;
          font-size: 16px;
          overflow: hidden
      }

      #bber-talk .talk-list :hover {
          color: #49b1f5 !important;
          transition: all .2s ease-in-out
      }

      #bber-talk .talk-list li {
          list-style: none;
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden
      }

      #bber-talk .bber-icon {
          line-height: 25px;
          margin-left: 8px;
          transition: .3s
      }

      #bber-talk .pass {
          -webkit-animation: 1s passing infinite;
          animation: 1s passing infinite
      }

      @-webkit-keyframes passing {
          0% {
              -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
              opacity: 0
          }
          50% {
              -webkit-transform: translateX(0);
              transform: translateX(0);
              opacity: 1
          }
          100% {
              -webkit-transform: translateX(50%);
              transform: translateX(50%);
              opacity: 0
          }
      }

      @keyframes passing {
          0% {
              -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
              opacity: 0
          }
          50% {
              -webkit-transform: translateX(0);
              transform: translateX(0);
              opacity: 1
          }
          100% {
              -webkit-transform: translateX(50%);
              transform: translateX(50%);
              opacity: 0
          }
      }

      .pace {
          -webkit-pointer-events: none;
          pointer-events: none;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
          z-index: 2000;
          position: fixed;
          margin: auto;
          top: 4px;
          left: 0;
          right: 0;
          height: 8px;
          border-radius: 8px;
          width: 6rem;
          background: #eaecf2;
          border: 1px solid var(--heo-card-border);
          overflow: hidden
      }

      .pace-inactive .pace-progress {
          opacity: 0;
          transition: .3s ease-in
      }

      .pace.pace-inactive {
          opacity: 0;
          transition: .3s;
          top: -8px
      }

      .pace .pace-progress {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          -ms-box-sizing: border-box;
          -o-box-sizing: border-box;
          box-sizing: border-box;
          -webkit-transform: translate3d(0, 0, 0);
          -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
          -o-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
          position: fixed;
          z-index: 2000;
          display: block;
          position: absolute;
          top: 0;
          right: 100%;
          height: 100%;
          width: 100%;
          background: #12c2e9;
          background: -webkit-linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
          background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
          animation: gradient 2s ease infinite;
          background-size: 200%
      }

      @media screen and (max-width: 768px) {
          #jayhrn-footer .footer-group {
              text-align: center
          }

          #footer-banner {
              padding: 1rem 0
          }

          #footer-banner .footer-banner-link {
              margin-right: .5rem
          }

          .footer-banner-left, .footer-banner-right {
              width: 100%;
              justify-content: center
          }

          img.footer_logo {
              display: none
          }

          a.icon_link {
              margin: 10px
          }

          #universe {
              display: none
          }

          #sta_chart {
              padding: 20px 0
          }

          #categoryBox + div {
              display: none !important
          }
      }

  7. 小风车标题实现

    魔改教程

    更改主题配置文件_config.butterfly.yml

    1
    2
    3
    4
    5
    6
    beautify:
      enable: true
      field: post # site/post
      # title-prefix-icon: '\f0c1' 原内容
      title-prefix-icon: '\f863' # 小风车样式
      title-prefix-icon-color: '#F47466'

    在[BlogSource]\themes\butterfly\source\css\custom\custom.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
    /* 文章页H1-H6图标样式效果 */
    /* 控制风车转动速度 */
    h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
        -webkit-animation: ccc 1.6s linear infinite ;
        animation: ccc 1.6s linear infinite ;
    }
    /* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
    @-webkit-keyframes ccc {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        to {
            -webkit-transform: rotate(-1turn);
            transform: rotate(-1turn)
        }
    }
    @keyframes ccc {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        to {
            -webkit-transform: rotate(-1turn);
            transform: rotate(-1turn)
        }
    }
    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
    #content-inner.layout h1::before {
        color: #ef50a8 ;
        margin-left: -1.55rem;
        font-size: 1.3rem;
        margin-top: -0.23rem;
    }
    #content-inner.layout h2::before {
        color: #fb7061 ;
        margin-left: -1.35rem;
        font-size: 1.1rem;
        margin-top: -0.12rem;
    }
    #content-inner.layout h3::before {
        color: #ffbf00 ;
        margin-left: -1.22rem;
        font-size: 0.95rem;
        margin-top: -0.09rem;
    }
    #content-inner.layout h4::before {
        color: #a9e000 ;
        margin-left: -1.05rem;
        font-size: 0.8rem;
        margin-top: -0.09rem;
    }
    #content-inner.layout h5::before {
        color: #57c850 ;
        margin-left: -0.9rem;
        font-size: 0.7rem;
        margin-top: 0.0rem;
    }
    #content-inner.layout h6::before {
        color: #5ec1e0 ;
        margin-left: -0.9rem;
        font-size: 0.66rem;
        margin-top: 0.0rem;
    }

    设置鼠标碰到标题时，小风车跟随标题变色，且像是被光标阻碍了，转速变慢。鼠标离开恢复转速。也可以设置为none鼠标碰到停止转动。

    1
    2
    3
    4
    5
    6
    7
    8
    #content-inner.layout h1:hover, #content-inner.layout h2:hover, #content-inner.layout h3:hover, #content-inner.layout h4:hover, #content-inner.layout h5:hover, #content-inner.layout h6:hover {
        color: #49b1f5 ;
    }
    #content-inner.layout h1:hover::before, #content-inner.layout h2:hover::before, #content-inner.layout h3:hover::before, #content-inner.layout h4:hover::before, #content-inner.layout h5:hover::before, #content-inner.layout h6:hover::before {
        color: #49b1f5 ;
        -webkit-animation: ccc 3.2s linear infinite ;
        animation: ccc 3.2s linear infinite ;
    }

  8. 更改国内不蒜子统计平台

    • 修改文件layout/includes/additional-js.pug，位于 72 行左右：
      script(async data-pjax src=’//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js’)
      改为
      script(async data-pjax src='//cdn.dusays.com/bsz.js')
    • 将/layout/includes/head/preconnect.pug文件中的link(rel="preconnect" href="//busuanzi.ibruce.info")改为link(rel="preconnect" href="//cdn.dusays.com")

注：部分转载自Akilarの糖果屋，本文仅为记录魔改过程