Hexo安知鱼首页加载动画

加载动画结语

  1. Hexo是一款快速、简洁且高效的静态博客框架,它的加载页是展示个人品牌和风格的重要组成部分。通过定制加载页,你可以为你的网站增添个性化的风格,提升用户体验,以及传达特定的信息。

  2. 本文以本站使用的主题 anzhiyu 为例,在本教程中,我们将深入探讨如何更换Hexo加载页,从简单的概念到具体的实施步骤,帮助你轻松地定制属于自己的加载页。

  3. 加载页的作用:加载页是指在网页加载完成之前显示的页面,通常用于展示品牌标识、加载进度和欢迎信息。它不仅可以提升用户体验,还可以传达网站的特色和个性。

  4. 加载页设计的考虑因素:在定制加载页时,需要考虑网站的整体风格和目标受众。加载页应该与主题风格一致,同时尽量简洁明了,以保持用户的注意力和耐心。

  5. 原教程中使用的是butterfly主题,本教程将以anzhiyu的格式进行更改,在此,感谢SNTube Studio整合并提供了详细的配置教程

首页加载预览效果请观看主页

1. 新建文件

  • themes/anzhiyu/layout/includes/loading/里,新建文件catloader.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
#loading-box
.cat__scene
.cat__main
.cat__body
.cat__body
.cat__tail
.cat__head

script.
const preloader = {
endLoading: () => {
var loadingBox = document.getElementById('loading-box');
var loadingBoxme = document.getElementById('loading-box-me');
loadingBoxme.addEventListener('animationend', () => {setTimeout(function() {loadingBox.classList.add("loaded");}, 2000) })
},
initLoading: () => {
document.getElementById('loading-box').classList.remove("loaded")
},
otherendLoading: () => {
document.getElementById('loading-box').classList.add("loaded")
}
}
window.addEventListener('load',()=> { preloader.endLoading() })
setTimeout(function(){preloader.otherendLoading();},5000)

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

2. 修改 index.pug

  • 找到themes/anzhiyu/layout/includes/loading/index.pug文件,并替换文件内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if theme.preloader.source === 1
include ./fullpage-loading.pug
else if theme.preloader.source === 2
include ./pace.pug
else if theme.preloader.source === 3
include ./fullpage-loading.pug
include ./pace.pug
else if theme.preloader.source === 4
include ./catloader.pug
else if theme.preloader.source === 5
include ./catloader.pug
include ./pace.pug
else
include ./fullpage-loading.pug
include ./pace.pug

3. 修改 loading.styl

  • 找到themes/anzhiyu/source/css/_global/,拷贝一份loading.styl并重命名为default.styl
  • 为了便于后续管理,在此目录下新建load_style文件夹,将default.styl放入load_style文件夹中
  • 修改loading.styl文件,并替换以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
if hexo-config('preloader.enable')
if hexo-config('preloader.source') == '1'
@import './load_style/default'
else if hexo-config('preloader.source') == '2'
@import './load_style/default'
else if hexo-config('preloader.source') == '3'
@import './load_style/default'
else if hexo-config('preloader.source') == '4'
@import './load_style/catloader'
else if hexo-config('preloader.source') == '5'
@import './load_style/catloader'
else
@import './load_style/default'

4. 在 load_style 下新建 catloader.styl 友情提示load_style目录是我们上一步新建的

  • 找到themes/anzhiyu/source/css/_global/load_style/并新建一个catloader.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
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
#loading-box
position fixed
z-index 1000
width 100vw
height 100vh
overflow hidden
text-align center
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0;
line-height: 1.4;
&.loaded
z-index -1000
.cat__scene
display none
.cat__scene
display flex
flex 1
flex-direction column
justify-content flex-start
justify-content center
align-items center
background-color #e6dcdc

.cat__main
position relative
width 100%
max-width 20em
overflow hidden
background-color #e6dcdc
&::before
content ""
display block
padding-bottom 100%
&:hover
& > *
-webkit-animation-play-state paused
animation-play-state paused
&:active
& > *
-webkit-animation-play-state running
animation-play-state running

.cat__body, .cat__tail, .cat__head
position absolute
top 0
left 0
right 0
bottom 0
-webkit-animation cat__rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93) infinite
animation cat__rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93) infinite

.cat__body::before, .cat__tail::before, .cat__head::before
content ""
position absolute
width 50%
height 50%
background-size 200%
background-repeat no-repeat
background-image url("https://images.weserv.nl/?url=i.imgur.com/M1raXX3.png&il")

.cat__head
&::before
top 0
right 0
background-position 100% 0%
transform-origin 0% 100%
transform rotate(90deg)

.cat__tail
-webkit-animation-delay 0.2s
animation-delay 0.2s
&::before
left 0
bottom 0
background-position 0% 100%
transform-origin 100% 0%
transform rotate(-30deg)

.cat__body
-webkit-animation-delay 0.1s
animation-delay 0.1s
&:nth-of-type(2)
-webkit-animation-delay 0.2s
animation-delay 0.2s
&::before
right 0
bottom 0
background-position 100% 100%
transform-origin 0% 0%



@-webkit-keyframes cat__rotating {
from {
transform: rotate(720deg);
}
to {
transform: none;
}
}

@keyframes cat__rotating {
from {
transform: rotate(720deg);
}
to {
transform: none;
}
}

5. 修改主题配置文件

  • 在主题配置文件中找到preloader,修改如下

preloader修改说明和选择新样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Loading Animation (加载动画)
preloader:
enable: true
# source
# 1. fullpage-loading(default)
# 2. pace (progress bar)
# 3. fullpage-loading + pace
# 4. fullpage-loading(clickenter)
# 5. fullpage-loading(clickenter) + pace
# else fullpage-loading + pace
source: 4
# pace theme (see https://codebyzach.github.io/pace/)
pace_css_url:
avatar: # 自定义头像

6. 这个时候,如果你的文件配置正确,可以执行Hexo的三连命令来查看效果了!

1
hexo clean; hexo g; hexo s

教程参考资料

【Hexo博客】自定义Butterfly主题 Loading 加载动画百里飞洋

自定义加载动画魔改方案,Akilarの糖果屋