Hexo-pure改造计划——添加加载动画

改造 , , 评论
温馨提示：点击页面下方以展开或折叠目录~

添加加载动画

添加加载动画

方法一

  1. 在./theme/pure/layout/head.ejs中添加
1
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/loading.min.css">

image-20210926163651265

  1. 在./theme/pure/layout/layout.ejs的<body>标签前添加：
1
2
3
4
5
6
7
8
9
10
11
12
13
<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>
  1. 在./theme/pure/layout/layout.ejs的</body>标签前添加：
1
2
3
4
5
6
7
<script>
  var endLoading = function () {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded");
  }
  window.addEventListener('load',endLoading);
</script>

参考链接

​ 1.hexo 博客美化

方法二

  1. 在./theme/pure/_config.yml中添加配置
1
2
3
preloader:
  enable: true
  layout: gear # gear, spinner-box 两种样式
  1. 在./themes/pure/layout/_script中新建loaded.ejs文件
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>
<% } %>

  1. 在./theme/pure/layout/_comment/head.ejs中添加样式

    • spinner-box风格样式
    1
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_1.css" >

    • gear风格样式

      • <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_2.css" >

        1
        2
        3
        4
        5

        4. 在`blog\themes\pure\layout\layout.ejs`的`<body>`标签下引入创建文件的地址：

        ```ejs
        <%- partial('_s/loaded') %>

参考链接：

​ 2.hexo中添加预加载动画

​ 3.hexo中添加预加载动画

阿波botmany things want to learn.

允许别人做别人，也要允许自己做自己啊！