悲傷可以自行料理;而歡樂的滋味如果要充分體會，你就必須有人分享才行。
前言
首先感謝blinkfox 大佬。我的博客切換到 Matery 主題也有一段時間了，切換了之后，也自己做了一些個性話的修改，今天無意中在 gayhub 上看到了 jerryc127 大佬的 Butterfly 更新到了 2.3 版本，看了下更新日志，新增了頁面切換的加載動畫，覺得怪好看，于是就去扒了扒源碼，想將這個動畫也搞到我自己的 Matery 主題上。
源碼的主要實現思路是，在<body>元素中的最前面加上加載動畫<div>塊，頁面加載之后立即展示加載動畫，然后有個js方法監(jiān)聽頁面加載完成事件，在頁面加載完成之后通過設置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>中，然后再監(jiān)聽頁面加載完成事件，頁面加載完成后將加載動畫隱藏就行了。
