魔改日记（2）

魔改前须知

  1. 魔改有风险，记得备份。
  2. 魔改参考：akilar | Fomalhaut🥝 | 安知鱼 …，更多人请到 友链寻找)（全是大佬）。本文仅做一个好用的魔改总结，便于自己查找。
  3. 鉴于每个人的根目录名称都不一样，本帖 博客根目录 一律以[BlogRoot]指代。
  4. 涉及魔改源码的内容，会使用diff代码块标识，复制时请不要忘记删除前面的+、-符号。
  5. 引入 自定义的css与js文件，方法见 Hexo博客添加自定义css和js文件
  6. themes/butterfly 等同于 /node_modules/hexo-theme-butterfly

评论美化（在用）

在 [BlogRoot]\source\css\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
/* 评论优化 */
/* 自定义twikoo评论输入框高度 */
#twikoo .el-textarea textarea {
  min-height: 120px !important;
  background-size: 90px;
}
/* 评论区美化 输入提醒 */
/* 设置文字内容 :nth-child(1)的作用是选择第几个 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
  content: '输入QQ号会自动获取昵称和头像';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
  content: '收到回复将会发送到您的邮箱';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {
  content: '可以通过昵称访问您的网站';
}

/* 当用户点击输入框时显示 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before,
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
  display: block;
}

/* 主内容区 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
  /* 先隐藏起来 */
  display: none;
  /* 绝对定位 */
  position: absolute;
  /* 向上移动60像素 */
  top: -60px;
  /* 文字强制不换行，防止left:50%导致的文字换行 */
  white-space: nowrap;
  /* 圆角 */
  border-radius: 10px;
  /* 距离左边50% */
  left: 50%;
  /* 然后再向左边挪动自身的一半，即可实现居中 */
  transform: translate(-50%);
  /* 填充 */
  padding: 14px 18px;
  background: #444;
  color: #fff;
  z-index:100;
}

/* 小角标 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
  display: none;
  content: '';
  position: absolute;
  /* 内容大小（宽高）为0且边框大小不为0的情况下，每一条边（4个边）都是一个三角形，组成一个正方形。
  我们先将所有边框透明，再给其中的一条边添加颜色就可以实现小三角图标 */
  border: 12px solid transparent;
  border-top-color: #444;
  left: 50%;
  transform: translate(-50%, -48px);
}
/* 输入提醒结束 */

/* 评论框右下角闭眼 */
.el-textarea__inner {
  background-image: url(https://tuchuang.voooe.cn/images/2023/01/02/open.webp) !important;
}
.el-textarea__inner:focus {
  background-image: url(https://tuchuang.voooe.cn/images/2023/01/02/close.webp) !important;
}

直达底部按钮（在用）

在[BlogRoot]\themes\butterfly\layout\includes\rightside.pug做以下修改:

1
2
3
4
5
button#go-up(type="button" title=_p("rightside.back_to_top"))
  i.fas.fa-arrow-up

+button#go-down(type="button" title="直达底部" onclick="btf.scrollToDest(document.body.scrollHeight, 500)")
+  i.fas.fa-arrow-down

侧边栏友链通讯录（在用）

详见：侧栏友链通讯录卡片

1）新建[BlogRoot]\themes\butterfly\layout\includes\widget\card_friend_link.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
if theme.aside.card_friend_link.enable
  .card-widget.card-friend-link
    .item-headline
      i.far.fa-address-book
      span= _p('aside.card_friend_link')
    .card-friend-link-container
      if site.data.link
        each i in site.data.link
          if i.class_name
            details.card-friend-class-name
              summary.card-friend-class-desc(title=i.class_desc)
                sapn!=i.class_name
                span.online-friend-number
                sapn!=i.link_list.length
              each item in i.link_list
                if !(item.offline)
                  a.card-friend-item.online-friend-link(href=url_for(item.link)  title=item.name target="_blank")
                    img.no-lightbox.card-friend-avatar(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
                    .card-friend-details
                      .card-friend-name= item.name
                      .card-friend-descr(title=item.descr)= item.descr
              each item in i.link_list
                if item.offline
                  a.card-friend-item.offline-friend-link(href=url_for(item.link)  title=item.name target="_blank")
                    img.no-lightbox.card-friend-avatar(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name )
                    .card-friend-details
                      .card-friend-name= item.name
                      .card-friend-descr(title=item.descr)= item.descr
    .js-pjax
      script.
        var addressbook = document.getElementsByClassName("card-friend-class-name");
        for (var i=0; i<addressbook.length; i++){
          var online = addressbook[i].getElementsByClassName("online-friend-link").length;
          addressbook[i].getElementsByClassName("online-friend-number")[0].innerHTML = "  "+online+"/";
        }

2）新建[BlogRoot]\themes\butterfly\source\css\_layout\card_friend_link.styl，其中var(--text-bg-hover)为悬浮选项背景色，可以根据你的喜好进行设置

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
if hexo-config('aside.card_friend_link.enable')
  :root
    --card-friend-class-desc-bgcolor: #e7e7e7
    --card-friend-name-color: #000
    --card-friend-item-hover: var(--text-bg-hover)
    --card-friend-descr-color: #797979
  [data-theme="dark"]
    --card-friend-class-desc-bgcolor: #111111
    --card-friend-name-color: #fff
    --card-friend-item-hover: var(--text-bg-hover)
    --card-friend-descr-color: #797979
  #aside-content
    .card-widget.card-friend-link
      padding: 20px
  .card-widget.card-friend-link
    .card-friend-link-container
      max-height 460px
      overflow scroll
      &::-webkit-scrollbar
        display: none
    summary.card-friend-class-desc
      padding 0px 15px
    details.card-friend-class-name[open]
      summary.card-friend-class-desc
        position: sticky;
        top: 0px;
        background: var(--card-friend-class-desc-bgcolor);
        z-index: 1
    a
      &.card-friend-item
        padding 0px 15px
        height 60px
        width auto
        display flex
        align-items center
        flex-wrap nowrap
        &:hover
          background-color var(--card-friend-item-hover)
          border-radius: 12px
          transition: all 0.3s ease-in-out

    img
      &.card-friend-avatar
        width 40px
        height 40px
        border-radius 50%
        margin 10px 10px
    .offline-friend-link
      img
        &.card-friend-avatar
          filter: grayscale(100%)

    .card-friend-details
      width auto
      height 60px
      display flex
      flex-wrap nowrap
      flex-direction column
      justify-content center
      align-items flex-start

    .card-friend-name
      color var(--card-friend-name-color)

    .card-friend-descr
      font-size 12px
      white-space nowrap
      overflow hidden
      text-overflow ellipsis
      width 12em
      color var(--card-friend-descr-color)

3）修改[BlogRoot]\themes\butterfly\languages\zh-CN.yml,新增内容。非简中用户自行修改对应的language文件

1
2
3
4
5
6
7
8
9
10
  aside:
    articles: 文章
    tags: 标签
    categories: 分类
    card_announcement: 公告
    card_categories: 分类
    card_tags: 标签
    card_archives: 归档
    card_recent_post: 最新文章
+   card_friend_link: 通讯录

4）修改[BlogRoot]\_config.butterfly.yml,新增配置项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  aside:
    enable: true
    hide: true
    button: true
    mobile: false # display on mobile
    position: right # left or right
    card_author:
      enable: true
      description:
      button:
        icon: fa fa-paper-plane faa-tada
        text: 加入糖果屋群聊
        link: https://jq.qq.com/?_wv=1027&k=tNuEdliQ
        enable: true
    card_announcement:
      enable: false
      content:
+   card_friend_link: #友链通讯录
+     enable: true
+     sort_order: # Don't modify the setting unless you know

5）对需要显示离线状态的友链，可以在[Blogroot]\source\_data\link.yml中给他添加一个离线的标签,例如：

1
2
3
4
5
6
  name: 🧊小冰博客 #152
+ offline: true
  link: https://zfe.space/
  avatar: https://npm.elemecdn.com/akilar-friends@latest/avatar/zfe.space.jpg
  descr: 做个有梦想的人！
  siteshot: https://npm.elemecdn.com/akilar-friends@latest/siteshot/zfe.space.jpg

自定义页脚（在用）

详见：Hexo + Butterfly 自定义页脚

再次美化：Fomalhaut🥝

1）在BlogRoot/node_modules/hexo-theme-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
74
75
#footer-wrap
  #ft
    .ft-item-1
      .t-top
        .t-t-l
          p.ft-t.t-l-t 说点什么
          .bg-ad
            div
              | （这里的内容随你写，但是不要过长影响整体美观度，具体可根据实现效果修改）随便说点什么说点什么、随便说点什么说点什么随便说点什么说点什么随便说点什么说点什么随便说点什么说。
            .btn-xz-box
              a.btn-xz(href='https://tzy1997.com/') 点击跳转到哪儿
        .t-t-r
          p.ft-t.t-l-t 修仙导航
          ul.ft-links
            li
              a(href='https://tzy1997.com/articles/hexo1600/') 建站指南
              a(href='https://tzy1997.com/nav.html') 网址导航
            li
              a(href='https://tzy1997.com/sponsorWall/') 来杯咖啡
              a(href='https://tzy1997.com/comments/') 留点什么
            li
              a(href='https://tzy1997.com/about/') 关于博主
              a(href='https://tzy1997.com/archives/') 文章归档
            li
              a(href='https://tzy1997.com/categories/') 文章分类
              a(href='https://tzy1997.com/tags/') 文章标签
            li
              a(href='https://tzy1997.com/gallery/') 我的相册
              a(href='https://tzy1997.com/bangumis/') 我的追番
            li
              a(href='https://tzy1997.com/specialEffects/') 一些特效
              a(href='https://tzy1997.com/wallpaper/') 一些壁纸
    .ft-item-2
      p.ft-t 推荐友链
      .ft-img-group
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
        .img-group-item
          a(href='https://tzy1997.com/')
            img(src='https://bu.dusays.com/2022/05/02/626f92e193879.jpg' alt='')
  if theme.footer.owner.enable
    - var now = new Date()
    - var nowYear = now.getFullYear()
    if theme.footer.owner.since && theme.footer.owner.since != nowYear
      .copyright!= `&copy;${theme.footer.owner.since} - ${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${config.author}`
    else
      .copyright!= `&copy;${nowYear + ' '} <i id="heartbeat" class="fa fas fa-heartbeat"></i> ${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}`

2）在 [BlogRoot]\source\css\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
/* 自定义底部  start */
#ft {
    max-width: 1200px;
    margin: 0 auto 12px;
    display: flex;
    color: rgb(255 255 255 / 80%) !important;
    text-align: left;
    flex-wrap: wrap;
}

.ft-item-1,
.ft-item-2 {
    display: flex;
    height: 100%;
    padding: 10px 14px;
}

.ft-item-1 {
    flex-direction: column;
    flex: 2;
}

.ft-item-2 {
    flex: 1;
    flex-direction: column;
}

.t-top {
    display: flex;
}

.t-top .t-t-l {
    display: flex;
    flex-direction: column;
    flex: 1.4;
    margin-right: 10px;
}

.t-top .t-t-l .bg-ad {
    width: 85%;
    border-radius: 10px;
    padding: 0 10px;
}

.btn-xz-box {
    margin-top: 10px;
}

.btn-xz {
    display: block;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    text-align: center;
    line-height: 2.4;
    margin: 8px 0;
    cursor: pointer !important;
}

.btn-xz:hover {
    text-decoration: none !important;

}

.btn-xz-box:hover .btn-xz {
    background-color: #6f42c1;
}

.t-top .t-t-r {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ft-links {
    padding: 0 14px;
    list-style: none;
    margin-top: 0 !important;
}

.ft-links li a {
    display: inline-block !important;
    width: 50%;
    cursor: pointer !important;
}

.ft-links li a:hover {
    text-decoration: none !important;
    color: #6f42c1 !important;
}

.ft-item-2 .ft-img-group {
    width: 100%;
}

.ft-t {
    font-size: 0.8rem;
    margin-bottom: 20px;
    line-height: 1;
    font-weight: 600;
}

.t-l-t {
    padding-left: 14px;
}

.ft-item-2 .ft-img-group .img-group-item {
    display: inline-block;
    width: 18.4%;
    margin-right: 14px;
    margin-bottom: 6px;
}

.ft-item-2 .ft-img-group .img-group-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer !important;
}

.ft-item-2 .ft-img-group .img-group-item a img {
    width: 100%;
    max-height: 80px;
}

@media screen and (max-width: 768px) {

    .ft-item-1 {
        flex-basis: 100% !important;
    }

    .ft-item-2 {
        flex-basis: 100% !important;
    }

    .t-top .t-t-l .bg-ad {
        width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .t-top {
        flex-wrap: wrap;
    }

    .t-top .t-t-l {
        flex-basis: 100% !important;

    }

    .t-top .t-t-r {
        margin-top: 16px;
        flex-basis: 100% !important;
    }
}
/* 自定义底部  End */

信息卡片头像状态（在用）

详见：博客魔改教程总结(四) | Fomalhaut🥝

1）修改[BlogRoot]\themes\butterfly\layout\includes\widget\card_author.pug

1
2
3
4
5
6
7
8
9
10
11
12
if theme.aside.card_author.enable
  .card-widget.card-info
    .is-center
-      .avatar-img
-        img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
+      div.card-info-avatar
+        .avatar-img
+          img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
+        div.author-status-box
+          div.author-status
+            g-emoji.g-emoji(alias="palm_tree" fallback-src="https://lskypro.acozycotage.net/LightPicture/2022/12/fe1dc0402e623096.jpg") 🐟
+            span 认真摸鱼中

2）在 [BlogRoot]\source\css\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
.card-info-avatar .author-status-box {
  position: absolute;
  bottom: 0;
  left: calc(100% - 28px);
  width: 28px;
  height: 28px;
  border: 1px solid #d0d7de;
  border-radius: 2em;
  background-color: #f8f8f8f8;
  transition: 0.4s;
  overflow: hidden;
}

[data-theme="dark"] .card-info-avatar .author-status-box {
  background-color: #222222f2;
  border: 1px solid #5c6060;
}

.card-info-avatar .author-status-box .author-status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 5px;
}

.card-info-avatar .author-status-box:hover {
  width: 105px;
}

.card-info-avatar .author-status-box:hover .author-status span {
  width: 105px;
  margin-left: 4px;
}

.card-info-avatar .author-status-box .author-status span {
  width: 0;
  font-size: 12px;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: 0.4s;
}

.card-widget .card-info-avatar {
  display: inline-block;
  position: relative;
}

头像呼吸灯+会动的小车车（在用）

详见：博客魔改教程总结(四) | Fomalhaut🥝

1）在 [BlogRoot]\source\css\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
/* 头像呼吸灯 */
[data-theme="light"] .avatar-img {
  animation: huxi_light 4s ease-in-out infinite;
}
[data-theme="dark"] .avatar-img {
  animation: huxi_dark 4s ease-in-out infinite;
}
@keyframes huxi_light {
  0% {
    box-shadow: 0px 0px 1px 1px #e9f5fa;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #e9f5fa;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #e9f5fa;
  }
}
@keyframes huxi_dark {
  0% {
    box-shadow: 0px 0px 1px 1px #39c5bb;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #39c5bb;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #39c5bb;
  }
}

2）修改[BlogRoot]\themes\butterfly\layout\includes\widget\card_author.pug

1
2
3
4
5
6
7
    if theme.aside.card_author.button.enable
      a#card-info-btn(href=theme.aside.card_author.button.link)
        i(class=theme.aside.card_author.button.icon)
        span=theme.aside.card_author.button.text
+        i.faa-passing.animated(style="padding-left:20px;display:inline-block;vertical-align:middle;")
+          svg.icon(style="height:28px;width:28px;fill:currentColor;position:relative;top:5px")
+            use(xlink:href='#icon-xiaoqiche')

网站恶搞标题（在用）

详见：博客魔改教程总结(五) | Fomalhaut🥝

1）新建文件[BlogRoot]\source\js\title.js，写入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//动态标题
var OriginTitile = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    //离开当前页面时标签显示内容
    document.title = '👀跑哪里去了~';
    clearTimeout(titleTime);
  } else {
    //返回当前页面时标签显示内容
    document.title = '🐖抓到你啦～';
    //两秒后变回正常标题
    titleTime = setTimeout(function () {
      document.title = OriginTitile;
    }, 2000);
  }
});

2）在主题配置文件_config.butterfly.yml引入该文件：

1
2
3
inject: 
  bottom: 
+    - <script async src="/js/title.js"></script>

滚动栏样式（在用）

1）在custom.css中加入以下代码，其中var(--theme-color)换成你自己的主题色：

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
/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: rgba(73, 177, 245, 0.2);
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: var(--theme-color);
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 75%,
    transparent
  );
  border-radius: 2em;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-moz-selection {
  color: #fff;
  background-color: var(--theme-color);
}

loading动画（在用）

详见：Heo同款loading动画 | 安知鱼 (anzhiy.cn)

1）修改 themes/butterfly/layout/includes/loading/fullpage-loading.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
  .loading-bg
    div.loading-img
    .loading-image-dot

script.
  const preloader = {
    endLoading: () => {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
      document.body.style.overflow = '';
      document.getElementById('loading-box').classList.remove("loaded")

    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }

2）修改themes/butterfly/layout/includes/loading/index.pug

1
2
3
4
5
6
7
if theme.preloader.source === 1
  include ./fullpage-loading.pug
else if theme.preloader.source === 2
  include ./pace.pug
else
  include ./fullpage-loading.pug
  include ./pace.pug

3）新建source/css/progress_bar.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
.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: 10px;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 8px;
  width: 4rem;
  background: #eaecf2;
  border: 1px #e3e8f7;
  overflow: hidden;
}

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

.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);
  max-width: 200px;
  position: absolute;
  z-index: 2000;
  display: block;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: gradient 1.5s ease infinite;
  background-size: 200%;
}

.pace.pace-inactive {
  opacity: 0;
  transition: 0.3s;
  top: -8px;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

4）修改themes/butterfly/source/css/_layout/loading.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
if hexo-config('preloader')
  .loading-bg
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    background: var(--anzhiyu-card-bg);
    z-index: 1001;
    opacity: 1;
    transition: .3s;

  #loading-box
    .loading-img
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: auto;
      border: 4px solid #f0f0f2;
      animation-duration: .3s;
      animation-name: loadingAction;
      animation-iteration-count: infinite;
      animation-direction: alternate;
    .loading-image-dot
      width: 30px;
      height: 30px;
      background: #6bdf8f;
      position: absolute;
      border-radius: 50%;
      border: 6px solid #fff;
      top: 50%;
      left: 50%;
      transform: translate(18px, 24px);
    &.loaded
      .loading-bg
        opacity: 0;
        z-index: -1000;

  @keyframes loadingAction
    0% {
        opacity: 1;
    }

    100% {
        opacity: .4;
    }

5）在custom.css中加入以下代码，图片可自定义。

1
2
3
4
.loading-img {
  background: url(https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/avatar.webp) no-repeat center center;
  background-size: cover;
}

6）修改_config.butterfly.yml中preloader选项

1
2
3
4
5
6
7
8
9
10
# Loading Animation (加载动画)
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  # else all
  source: 3
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url: /css/progress_bar.css

文章页顶波浪线

详见：butterfly文章顶部添加波浪效果

1）修改 [BlogRoor]\themes/butterfly/layout/includes/header/index.pug 大概第 33 行左右

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
if top_img !== false
  if is_post()
    include ./post-info.pug
+   section.main-hero-waves-area.waves-area
+     svg.waves-svg(xmlns='http://www.w3.org/2000/svg', xlink='http://www.w3.org/1999/xlink', viewBox='0 24 150 28', preserveAspectRatio='none', shape-rendering='auto')
+       defs
+         path#gentle-wave(d='M -160 44 c 30 0 58 -18 88 -18 s 58 18 88 18 s 58 -18 88 -18 s 58 18 88 18 v 44 h -352 Z')
+       g.parallax
+         use(href='#gentle-wave', x='48', y='0')
+         use(href='#gentle-wave', x='48', y='3')
+         use(href='#gentle-wave', x='48', y='5')
+         use(href='#gentle-wave', x='48', y='7')
    #post-top-cover
      img#post-top-bg(class='nolazyload' src=bg_img)
  else if is_home()
    #site-info
      h1#site-title=site_title
      if theme.subtitle.enable

2）在_config.butterfly.yml的 [inject.head] 或者自定义 css 中 引入以下 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
/* 波浪css */
.main-hero-waves-area {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: -11px;
  z-index: 5;
}
.waves-area .waves-svg {
  width: 100%;
  height: 5rem;
}
/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #f7f9febd;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #f7f9fe82;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #f7f9fe36;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #f7f9fe;
}
/* 黑色模式背景 */
[data-theme="dark"] .parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
  fill: #18171dc8;
}
[data-theme="dark"] .parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
  fill: #18171d80;
}
[data-theme="dark"] .parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
  fill: #18171d3e;
}
[data-theme="dark"] .parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
  fill: #18171d;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves-area .waves-svg {
    height: 40px;
    min-height: 40px;
  }
}