開發記錄
開發記錄
2020-11-4:内測版v0.01
- 使用ejs模闆
- 直接替換源碼。
- 使用inject配置項來外挂css。
2020-11-5:内測版v0.02
- 修改為pug模闆。
- 優化了css代碼結構。
2020-11-5:正式版v1.0
- 成功實作多主題配置
- css轉為stylus，支援根據指定選項加載對應樣式，節省資源。
- 保留原版spinner-box加載動畫，與自定義wizard動畫并存。
- 優化代碼結構，可以根據教程示例和魔改思路，自行嘗試添加自定義樣式。
2020-11-8:正式版v1.1
- 新增直接使用gif圖作為加載動畫配置。
- 支援自定義配置加載動畫背景顔色。
2020-11-22:正式版v1.2
- 自選修改，删除夜間模式背景色覆寫以适配image主題加載動畫。
2021-01-31:正式版v1.2.1
- 更新butterfly_v3.6.0适配方案
2021-02-22:正式版v1.3
- 新增鋼鐵之心加載動畫
- 新增哈爾的移動城堡稻草人加載動畫
巫師加載動畫預覽效果
舊版教程，隻需要本站同款巫師主題的可以看這個
魔改示例
修改
[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug
這裡我保留了原代碼的前三行内容，這三行配合
loading-js.pug
控制加載動畫的顯隐和背景色的帷幕動畫效果。
在
[Blogroot]\themes\butterfly\source\css\
目錄下建立
loading_wizard.css
檔案
修改
[Blogroot]\_config.butterfly.yml
中的配置項，
運作
hexo clean && hexo generate && hexo server
即可檢視加載動畫樣式了。
bug歸納
以下為新版教程，需要改動五個主題源碼檔案。
相比舊版教程，優勢在于可以根據配置項内的指定選項加載對應樣式。
不選的樣式就不加載了，有效節省資源。
同時優化了代碼結構，友善讀者融會貫通以後，自行添加其他加載動畫。
最新版内容支援自定義圖檔（png,jpg,gif均可）作為加載動畫
由于本教程涉及的所有修改對縮進格式等有嚴格要求，擔心自己控制不好的可以直接下載下傳靜态資源，将壓縮包内的butterfly檔案夾複制到
[Blogroot]\theme\
目錄下覆寫現有主題檔案夾即可跳過以下教程的前4步，直接到主題配置檔案
_config.butterfly.yml
中參照第5步修改配置項。
下載下傳資源檔案
魔改步驟
修改
[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug
，直接複制以下代碼替換所有原代碼。
此處第一行的if用于判斷
preloader
功能是否打開。下面的
case
和
when
則是根據配置項的内容加載指定的頁面元素。
default
表示預設使用
butterfly
自帶的旋轉盒子動畫。
修改
[Blogroot]\themes\butterfly\source\css\_layout\loading.styl
，複制以下代碼替換全部内容。
幾個
if
的判斷機制與
loading.pug
類似，都是根據配置項來決定加載的樣式。且預設使用旋轉盒子動畫。
修改
[Blogroot]\themes\butterfly\layout\includes\layout.pug
，以适配接下來需要添加的配置項。
修改
[Blogroot]\themes\butterfly\source\css\var.styl
，添加自定義修改背景色的配置項。(大概98行的位置)
修改
[Blogroot]\_config.butterfly.yml
的
preloader
配置項。
配置項參數說明：
- enable：控制加載動畫的開關，取值有
true
false
true
false
- load_color：該配置項為自定義加載動畫背景顔色。預設值為
#37474f
,使用時注意用’’包起來，不然會被識别成注釋符。
這個配置項最大的作用是配合
load_image
- load_style：控制加載動畫的樣式，目前提供三種類型。
-
spinner-box
-
wizard
-
ironheart
-
scarecrow
-
image
-
- load_image：該配置項的生效前提是
load_style
image
此項為非必要修改項，主要是為了避免使用
image
主題時，切換夜間模式後，背景色被強制覆寫為黑色，說白了就是治療強迫症。修改
[Blogroot]\themes\butterfly\source\css\_mode\darkmode.styl
第10行的
--preloader-bg: darken(#121212, 2)
。
其中
#ca3b3e
是設定為image主題時，切換為夜間模式後，自定義圖檔的背景色值。（切換夜間模式時，整個頁面會降低色調，是以連帶着自定義圖檔的色值也變暗，需要重新取值。）
補充内容
很多同學表示添加了加載動畫以後加載半天，隻能看動畫卻進不了站我的加載動畫還被Heo說成是無限施法2333。這點主要是因為加載動畫的關閉與否是與網站加載狀态的load的傳回值決定的，而網站加載完成與否這個概念是很暧昧的，如果加裝了pwa，清空緩存後再次加載的内容可能比想象的要多。以下提供兩種方案，一個逾時自動結束，一個手動點選結束。兩者相容，你可以同時使用達到多重保險。
- 逾時自動結束
- 手動點選結束
可以給加載動畫設定一個settimeout()的函數來達到僞·加載完畢的效果，即逾時了自動關閉加載動畫，即使頁面還在加載。
得益于loading-js使用的是原生js，是以可以給script添加async屬性實作異步加載，以免阻塞後續HTML渲染。
僅僅需要給控制加載動畫開關的
loading-js.pug
添加兩行代碼即可。
- script.
+ script(async).
var preloader = {
endLoading: () => {
document.body.style.overflow = 'auto';
document.getElementById('loading-box').classList.add("loaded")
},
initLoading: () => {
document.body.style.overflow = '';
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load',()=> {preloader.endLoading()})
+ setTimeout(function(){preloader.endLoading();}, 5000); 複制
其中5000的機關是ms，代表你設定的最大容忍時間。可以自行修改。
這樣一來，如果網站在五秒内加載完成，則優先執行window.addEventListener(‘load’,()=> {preloader.endLoading()}),如果超過5秒，則執行 setTimeout(function(){preloader.endLoading();}, 5000);,兩者互不幹擾。可喜可賀，可喜可賀。
給整個
loading-box
添加一個點選動作，點選動畫就能結束。
修改
[Blogroot]\themes\butterfly\layout\includes\layout.pug
butterfly_v3.0.0-v3.5.1:
butterfly_v3.6.0+:
思路分享
理論上你可以任意更改加載動畫的内容，放置gif，放置靜态圖檔，添加html，甚至是放置一個html5小遊戲，隻要是能夠寫在靜态頁面裡的内容，都可以放在這裡。當然，過于複雜的加載動畫肯定是要犧牲掉網頁加載速度的。
點選檢視DIY動畫思路
首先我們必須了解加載動畫涉及到哪幾個檔案的修改。
如示例一樣，如果想要保留背景拉開帷幕的效果，我們可以保留
loading.pug
的前三行，在第四行與
.loading-right-bg
保持相同縮進來添加新的頁面元素。
樣式不建議修改
loading.styl
,直接引入相應的css檔案即可。
之後，為了保證加載完成，我們需要給自己添加的元素新增一個隐藏的屬性。
例如示例中，巫師動畫的頂層元素是
.wizard-scene
,是以需要添加
個别情況可能會遇到畫布三維層級混亂，就需要定義loading-box的z-index屬性。
歡迎在評論區留下你的設想。或者是托我幫忙做加載動畫的樣式适配（好看的話還是會幫忙的），或者是添加新的配置項構思（啊，我就客套一下，不要真的提太麻煩的需求）。