前言

把主题原来的加载动画换成头像，右下角加一个绿色的小圆点，头像会有一个淡入淡出的效果。

美化之前

本站使用 Hexo 6.0.0 + Butterfly 4.5.1，其他版本请按实际情况调整。样式、脚本引入及全局变量用法可参考：

🏠 站内链接，放心访问
Hexo博客添加自定义css和js文件
June's Blog
🏠 站内链接，放心访问
Butterfly自用全局变量
June's Blog

参考链接

  • 安知鱼《Heo 同款 loading 动画》：https://blog.anheyu.com/posts/52d8.html（原链接暂不可用）。

修改方案

1. 开启全屏加载

1
2
3
preloader:
  enable: true
  source: 1

上面合并到 _config.butterfly.yml。source: 1 对应全屏加载，source: 2 是进度条。

2. 替换模板

替换 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
#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")

    }
  }
  // DOM 解析完成即关闭 loading，不等待图片等资源加载
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => { preloader.endLoading() })
  } else {
    preloader.endLoading()
  }

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

这里保留主题约定的 preloader.initLoading() 和 preloader.endLoading()，也保留 PJAX 切换事件。关闭时机已经从等待整页资源的 load 改成 DOM 就绪，图片慢的时候不会一直挡住正文。点击遮罩也能主动关闭。

3. 替换加载样式

替换 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.enable') && hexo-config('preloader.source') == 1
  .loading-bg
    display: flex;
    width: 100%;
    height: 100%;
    position: fixed;
    background: var(--june-card-bg, var(--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;
    }

4. 添加样式

新建 source/static/css/loading-avatar.css，添加下面的样式。如果之前改过这一块，记得先合并旧样式。

1
2
3
4
.loading-img {
    background: url(https://img.june-pj.cn/img/avatar.webp) no-repeat center center;
    background-size: cover;
}

然后在 _config.butterfly.yml 的 inject.head 里引入：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/static/css/loading-avatar.css">

头像地址是本站现有素材，自己用的时候换成自己的头像。这个效果依赖 background-image，头像加载失败不应该影响遮罩关闭。