本人使用的是hexo中Volantis主题,所以主要对Volantis作了些配置。当然其他主题也有通用的方法,后文会提及。首先说一下如何在Volantis主题中添加预加载动画。

Volantis中添加

添加配置信息

在主题配置文件volantis/_config.yml中添加配置

1
2
3
preloader:
enable: true
layout: gear # gear, spinner-box 两种样式

添加配置文件

在blog\themes\volantis\layout\_widget中新建loaded.ejs文件(当然也可以在其它处创建,只要在layout文件夹下),文件中填写以下代码:

查看代码

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
<% if (theme.preloader.enable) { %>
<div id='loader'>
<% if(theme.preloader.layout == 'gear' ) {%>
<div class="outer_box">
<div class='loader_overlay'></div>
<div class='loader_cogs'>
<div class='loader_cogs__top'>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_hole'></div>
</div>
<div class='loader_cogs__left'>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_hole'></div>
</div>
<div class='loader_cogs__bottom'>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_hole'></div>
</div>
<p style="text-align:center">&nbsp;&nbsp;&nbsp;loading...</p>
</div>
</div>
<% } else if(theme.preloader.layout == 'spinner-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>
var endLoading = function () {
document.body.style.overflow = 'auto';
document.getElementById('loader').classList.add("loading");
}
window.addEventListener('load',endLoading);
</script>
<% } %>

引入样式文件

其中spinner-box风格样式文件:

文件地址: blog\themes\volantis\layout\layout.ejs
1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_1.css" >

gear风格样式文件:

文件地址: blog\themes\volantis\layout\_partial\head.ejs
1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_2.css" >

blog\themes\volantis\layout\layout.ejs中,或者在blog\themes\volantis\layout\_partial\head.ejs引入都可。

引入到页面

blog\themes\volantis\layout\layout.ejs<body>标签下引入创建文件的地址:

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

最后一键三连即可。

使用gear风格加载动画时,页面中的导航栏可能会在动画前显示,较突兀。可在blog\themes\volantis\source\css\_layout的navbar.styl文件中修改导航栏的z-index属性。

查看代码

文件地址:blog\themes\volantis\source\css\_layout\navbar.styl
1
2
3
4
5
6
7
.l_header
$iconW = 32px
$iconMargin = 4px
position: fixed
+ z-index: 100
top: 0
width: 100%

其他主题中添加

spinner-box风格样式

引入css文件
1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_1.css" >
将下方代码添加到页面中的<body>下方

查看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="loader">
<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>
将js代码添加到页面中的</body>上方

查看代码

1
2
3
4
5
6
7
<script>
var endLoading = function () {
document.body.style.overflow = 'auto';
document.getElementById('loader').classList.add("loading");
}
window.addEventListener('load',endLoading);
</script>

gear风格样式

引入css文件
1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_2.css" >
将下方代码添加到页面配置文件中的<body>下方

查看代码

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
<div id='loader'>
<div class="outer_box">
<div class='loader_overlay'></div>
<div class='loader_cogs'>
<div class='loader_cogs__top'>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_part'></div>
<div class='top_hole'></div>
</div>
<div class='loader_cogs__left'>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_part'></div>
<div class='left_hole'></div>
</div>
<div class='loader_cogs__bottom'>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_part'></div>
<div class='bottom_hole'></div>
</div>
<!-- <p>loading</p> -->
</div>
</div>
</div>
将js代码添加到页面中的</body>上方

查看代码

1
2
3
4
5
6
7
<script>
var endLoading = function () {
document.body.style.overflow = 'auto';
document.getElementById('loader').classList.add("loading");
}
window.addEventListener('load',endLoading);
</script>

最后

目前只添加了两种样式的加载动画,后期如有其它好看的再添加。注意在Volantis的3.0版本中,由于添加了pjax,所以在页面跳转时不会加载动画。如果需屏蔽某个页面启用pjax跳转,请查看主题配置文件中pjax部分说明。

参考:

Hexo 博客美化

Theme Volantis | Powered Hexo 载入天数...载入时分秒...
豫ICP备20002107