Matery主题自定义(六)页面加载动画

当小伙伴网络差浏览你博客时，一直看白屏也太不人性化了，不如加个加载动画

前言

这个页面加载动画效果我是按照简书中一位博主的文章做的，他写的也很详细，可以点击目录【参考】，点击连接查看他的文章，如果有幸你留下了，那我们就出发了

创建加载动画文件

想要添加页面加载动画，那么第一步当然是的创建一个对应的文件，模块化开发嘛

结构代码

在 themes>hexo-theme-matery>layout>_widget 下创建一个 loading.ejs 文件，将下面的代码 cv 进去

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<% if (theme.preloader.enable) { %>
  <div id="loading-box">
    <div class="loading-left-bg"></div>
    <div class="loading-right-bg"></div>
    <div class="spinner-box">
      <div class="configure-border-1">
        <div class="configure-core"></div>
      </div>
      <div class="configure-border-2">
        <div class="configure-core"></div>
      </div>
      <div class="loading-word">加载中...</div>
    </div>
  </div>
  <!-- 页面加载动画 -->
  <script>
    $(document).ready(function () {
      document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    })
  </script>
<% } %>

样式代码

完成了结构代码，下面就开始样式代码了，不然没有样式的动画也太丑了，下面的就是样式代码

当然，在复制粘贴代码之前，需要先创建样式文件

在 themes>hexo-theme-matery>source>css> 下创建一个新的文件 loading.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
#loading-box .loading-left-bg,
#loading-box .loading-right-bg {
  position: fixed;
  z-index: 1000;
  width: 50%;
  height: 100%;
  background-color: #37474f;
  transition: all 0.5s;
}

#loading-box .loading-right-bg {
  right: 0;
}

#loading-box>.spinner-box {
  position: fixed;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

#loading-box .spinner-box .configure-border-1 {
  position: absolute;
  padding: 3px;
  width: 115px;
  height: 115px;
  background: #ffab91;
  animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
}

#loading-box .spinner-box .configure-border-2 {
  left: -115px;
  padding: 3px;
  width: 115px;
  height: 115px;
  background: rgb(63, 249, 220);
  transform: rotate(45deg);
  animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
}

#loading-box .spinner-box .loading-word {
  position: absolute;
  color: #ffffff;
  font-size: 0.8rem;
}

#loading-box .spinner-box .configure-core {
  width: 100%;
  height: 100%;
  background-color: #37474f;
}

div.loaded div.loading-left-bg {
  transform: translate(-100%, 0);
}

div.loaded div.loading-right-bg {
  transform: translate(100%, 0);
}

div.loaded div.spinner-box {
  display: none !important;
}

@keyframes configure-clockwise {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes configure-xclockwise {
  0% {
    transform: rotate(45deg);
  }

  25% {
    transform: rotate(-45deg);
  }

  50% {
    transform: rotate(-135deg);
  }

  75% {
    transform: rotate(-225deg);
  }

  100% {
    transform: rotate(-315deg);
  }
}

添加至页面

在将加载动画添加至页面中

找到 themes>hexo-theme-matery>layout>_partial>head.ejs 文件，这个文件专门用来引入样式文件和配置网页信息

在 <head> 标签中引入 loading.css 文件

1
<link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- url_for('/css/loading.css') %>">

引入样式文件后，引入结构文件 loading.ejs，插入在themes>hexo-theme-matery>layout>layout.ejs <body> 标签下第一行就行了

1
<%- partial('_widget/loading') %>

配置

最后在主题配置文件中进行配置 _config.yml，true 是开启；false 是关闭

1
2
3
# 是否开启页面加载动画
preloader:
  enable: true

Matery 主题自定义系列撒花了，如果今后又有什么新的花里胡哨的的东西再和大家分享

参考

我将Butterfly主题2.3版本的加载动画搬到了Matery中