悲伤可以自行料理;而欢乐的滋味如果要充分体会，你就必须有人分享才行。
前言
首先感谢blinkfox 大佬。我的博客切换到 Matery 主题也有一段时间了，切换了之后，也自己做了一些个性话的修改，今天无意中在 gayhub 上看到了 jerryc127 大佬的 Butterfly 更新到了 2.3 版本，看了下更新日志，新增了页面切换的加载动画，觉得怪好看，于是就去扒了扒源码，想将这个动画也搞到我自己的 Matery 主题上。
源码的主要实现思路是，在<body>元素中的最前面加上加载动画<div>块，页面加载之后立即展示加载动画，然后有个js方法监听页面加载完成事件，在页面加载完成之后通过设置class样式将加载动画<div>块隐藏。
具体效果可以看我的博客https://maoyikun.tk/
移植到 Matery 主题
思路大概清楚了，现在就直接将源码扒过来放到合适的位置就行了。再次感谢 jerryc127 大佬。
在 Matery 主题配置文件 _config.yml 中新增配置属性 preloader。
# 是否开启页面加载动画 true 开启，false 关闭
preloader:
enable: true
在 Matery 主题目录 /layout/_widget 下新增文件 loading.ejs，将以下内容写入 loading.ejs。
<% 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>
window.addEventListener('load', function(){
document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
}, false)
</script>
<% } %>
接着在 Matery 主题目录 /css 下新增 loading.css ，并将以下内容写入 loading.css。
#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);
}
}
然后找到 Matery 主题目录 /layout/_partial 下找到 head.ejs，并在 <head> 标签中添加以下内容引入 loading.css 文件。
<link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- url_for('/css/loading.css') %>">
再找到 Matery 主题目录 /layout 下找到 layout.ejs，然后在 <body> 标签下引入 loading.ejs。
<%- partial('_widget/loading') %>
这里建议直接添加在 <body> 标签所有内容的最前面。
至此， Butterfly 的加载动画就移植到 Matery 主题完成了，只要主题配置文件的 preloader 的 enable 属性为 true 那么每个页面加载的时候，都会展示加载动画，如果将 preloader 的 enable 设置为 false 那么就可以关闭加载动画了。
尾巴
如果用的是其他主题也可以参考这个思路，将加载动画代码块放到
<body>标签中，将加载动画的 css 文件引入到页面的<head>中，然后再监听页面加载完成事件，页面加载完成后将加载动画隐藏就行了。
网友评论