title: hexo添加页面加载动画
author: HaoQi
top: false
cover: false
toc: true
mathjax: false
reprintPolicy: cc_by
tags:

  • hexo
  • 加载动画

date: 2022-04-13 14:17:38
coverlmg:
img:
keywords: hexo,加载动画,页面
summary: 为hexo博客添加页面加载动画
password:
categories: 博客篇

修改配置文件

在hexo博客主题文件_config.yml中添加

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

打开主题目录中 /layout/_partial /head.ejs文件，将 以下内容填入<head> 标签中。

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

打开主题目录 中/layout/layout.ejs文件，将 以下内容填入<body> 标签中。

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

添加文件

在主题目录/layout/_widget下添加loading.ejs文件

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

在主题目录/source/css下添加loading.css文件

  1. #loading-box .loading-left-bg,
  2. #loading-box .loading-right-bg {
  3.   position: fixed;
  4.   z-index: 1000;
  5.   width: 50%;
  6.   height: 100%;
  7.   background-color: #37474f;
  8.   transition: all 0.5s;
  9. }
  11. #loading-box .loading-right-bg {
  12.   right: 0;
  13. }
  15. #loading-box > .spinner-box {
  16.   position: fixed;
  17.   z-index: 1001;
  18.   display: flex;
  19.   justify-content: center;
  20.   align-items: center;
  21.   width: 100%;
  22.   height: 100vh;
  23. }
  25. #loading-box .spinner-box .configure-border-1 {
  26.   position: absolute;
  27.   padding: 3px;
  28.   width: 115px;
  29.   height: 115px;
  30.   background: #ffab91;
  31.   animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
  32. }
  34. #loading-box .spinner-box .configure-border-2 {
  35.   left: -115px;
  36.   padding: 3px;
  37.   width: 115px;
  38.   height: 115px;
  39.   background: rgb(63, 249, 220);
  40.   transform: rotate(45deg);
  41.   animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
  42. }
  44. #loading-box .spinner-box .loading-word {
  45.   position: absolute;
  46.   color: #ffffff;
  47.   font-size: 0.8rem;
  48. }
  50. #loading-box .spinner-box .configure-core {
  51.   width: 100%;
  52.   height: 100%;
  53.   background-color: #37474f;
  54. }
  56. div.loaded div.loading-left-bg {
  57.   transform: translate(-100%, 0);
  58. }
  60. div.loaded div.loading-right-bg {
  61.   transform: translate(100%, 0);
  62. }
  64. div.loaded div.spinner-box {
  65.   display: none !important; 
  66. }
  68. @keyframes configure-clockwise {
  69.   0% {
  70.     transform: rotate(0);
  71.   }
  73.   25% {
  74.     transform: rotate(90deg);
  75.   }
  77.   50% {
  78.     transform: rotate(180deg);
  79.   }
  81.   75% {
  82.     transform: rotate(270deg);
  83.   }
  85.   100% {
  86.     transform: rotate(360deg);
  87.   }
  88. }
  90. @keyframes configure-xclockwise {
  91.   0% {
  92.     transform: rotate(45deg);
  93.   }
  95.   25% {
  96.     transform: rotate(-45deg);
  97.   }
  99.   50% {
  100.     transform: rotate(-135deg);
  101.   }
  103.   75% {
  104.     transform: rotate(-225deg);
  105.   }
  107.   100% {
  108.     transform: rotate(-315deg);
  109.   }
  110. }

部署

  1. hexo c
  2. hexo g
  3. hexo d

参考链接：https://www.jianshu.com/p/a81a629e2f9a