📚 更多文档目录

🚀 搭建教程 | 1 - 📑 前置教程 | 2 - 🎈 主题调整 | 3 - ✨ 魔改教程 | 4 - 🐈 重构自用数据记录

本篇教程基于 Hexo 6.3.0 & Butterfly 4.8.5 为博主的魔改教程记录，以防自己日后因魔改迷失所记录 📝

最后更新于 2023 年 07 月 28 日

230728 更新：将样式整合为loading.styl，省去link引用

iCat版Logo加载

临时写的一个loading，可能会有些bug样式，第一版先这样，后面会继续修

效果预览

正常模式
暗黑模式

创建数据

  • 修改 [blogRoot]/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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
-#loading-box
-  .loading-left-bg
-  .loading-right-bg
-  .spinner-box
-    .configure-border-1
-      .configure-core
-    .configure-border-2
-      .configure-core
-    .loading-word= _p('loading')
+#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
+  #icat-splash
+    .icat-loading
+      img(src=url_for(theme.preloader.logo) data-src=url_for(theme.preloader.logo_dark))

script.
+  var htmlElement = document.querySelector('html');
+  if (htmlElement.getAttribute('data-theme') === 'dark') {
+    var imgElement = document.querySelector('.icat-loading img');
+    var dataSrc = imgElement.getAttribute('data-src');
+    imgElement.src = dataSrc;
+  }
+  
  const preloader = {
    endLoading: () => {
-     document.body.style.overflow = '';
+      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    },
    initLoading: () => {
-     document.body.style.overflow = '';
+      document.body.style.overflow = 'hidden';
      document.getElementById('loading-box').classList.remove("loaded")
    }
  }
+
+  preloader.initLoading()
  window.addEventListener('load',()=> { preloader.endLoading() })

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }
  • 替换 [blogRoot]/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
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
if hexo-config('preloader')
  #loading-box.loaded
    #icat-splash
      opacity: 0
      z-index: -1000

  #icat-splash
    display: -webkit-box
    display: -moz-box
    display: -webkit-flex
    display: -ms-flexbox
    display: box
    display: flex
    justify-content: center
    align-items: center
    width: 100%
    height: 100%
    position: fixed
    background: var(--icat-card-bg)
    z-index: 1999
    opacity: 1
    -ms-filter: none
    filter: none
    -webkit-transition: .3s
    -moz-transition: .3s
    -o-transition: .3s
    -ms-transition: .3s
    transition: .3s

    .icat-loading
      width: 30%
      height: auto
      overflow: hidden
      display: flex
      justify-content: center
      position: relative

      @media screen and (max-width: 768px)
        width: 50%
      
      img
        width: 100%
        height: auto
        -webkit-filter: brightness(1)
        -moz-filter: brightness(1)
        -o-filter: brightness(1)
        -ms-filter: brightness(1)
        filter: brightness(1)

      &::before
        content: ""
        display: inline-block
        width: 100%
        height: 400%
        background-image: linear-gradient(to bottom, #FCFCFC, #FCFCFC 25%, #E8FF00 25%, #E8FF00 50%, #34BE89 50%, #34BE89 75%, #FCFCFC 75%, #FCFCFC)
        background-position: center top
        position: absolute
        top: 0
        animation-name: loading
        animation-delay: 0.5s
        animation-duration: 4s
        animation-iteration-count: infinite
        animation-timing-function: linear

        [data-theme="dark"]
          background-image: linear-gradient(to bottom, #1d1e22, #1d1e22 25%, #E8FF00 25%, #E8FF00 50%, #34BE89 50%, #34BE89 75%, #1d1e22 75%, #1d1e22)

  @keyframes loading
    from
      top: 0
    to
      top: -300%
  • 新增 _config.butterfly.yml 主题配置文件的 preloader 里的子配置项 logo 和 logo_dark
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  ···

# 页面加载动画 preloader
# --------------------------------------

preloader:
  enable: true
  source: 1
  # source；1. 开屏加载；2. 顶部进度
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:
+  logo: https://s1.ax1x.com/2023/07/28/pCxGRfg.png
+  logo_dark: https://s1.ax1x.com/2023/07/28/pCxG2tS.png
  # 日月Logo图片

  ···

Heo版Avatar加载

本小节仅适用 Butterfly 4.5 以上版本

  • 修改 [blogRoot]/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
24
25
26
27
28
29
30
31
32
33
34
35
-#loading-box
-  .loading-left-bg
-  .loading-right-bg
-  .spinner-box
-    .configure-border-1
-      .configure-core
-    .configure-border-2
-      .configure-core
-    .loading-word= _p('loading')
+#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
+  .loading-bg
+    div.loading-img(style=`background-image:url(${theme.preloader.avatar});background-repeat: no-repeat;background-position:center;`)
+    .loading-image-dot

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

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
  }
个人调整的Loading页面

将头像下方的绿色小点给删除了

1
2
3
4
5
    ···

-   .loading-image-dot

    ···
  • 修改 [blogRoot]/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
  • 在自建的CSS文件 [blogRoot]/source/css/icat_change.css 里新增以下内容

这一步是修改 pace 加载的胶囊 💊 样式用的
可以单独新建个css文件，将下面的样式放进去，也可以不做这一步，那么在主题配置文件 pace_css_url 这一项就要留空

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
.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%;
    }
}

/* pace 加载的胶囊样式 */
  • 替换 [blogRoot]/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
46
if hexo-config('preloader')
  .loading-bg
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    background: var(--icat-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;
      background-size: cover;
    .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;
    }
个人调整的Loading样式

去掉头像的边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    ···

  #loading-box
    .loading-img
      ···
-     border: 4px solid #f0f0f2;

    ···

-   .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);

    ···
  • 新增 _config.butterfly.yml 主题配置文件的 preloader 里的子配置项 avatar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  ···

# 页面加载动画 preloader
# --------------------------------------

preloader:
  enable: true
  source: 3
  # source；1. 开屏加载；2. 顶部进度
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url: /css/icat_change.css
+  avatar: https://s1.ax1x.com/2023/07/07/pCc1TSO.jpg
  # 自定义头像 （魔改 - 满屏loader）

  ···

source: 1 为 满屏加载 无pace胶囊
source: 2 为 pace胶囊 无满屏动画
source: 3 是两者都启用