hexo butterfly加载动画怎么弄
时间: 2023-07-21 14:44:49 浏览: 75
要在 Hexo 的 Butterfly 主题中添加加载动画,可以按照以下步骤进行操作:
1. 在你的 Hexo 博客目录下,找到 `themes/butterfly/layout/_partial/head.ejs` 文件。
2. 在 head.ejs 文件中添加以下代码:
```
<script>
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
setTimeout(function(){
document.getElementById('interactive');
document.getElementById('load').style.visibility="hidden";
document.getElementById('contents').style.visibility="visible";
},1000);
}
}
</script>
<div id="load">
<div class="loader">
<div class="loader-inner">
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
<div class="loader-line-wrap">
<div class="loader-line"></div>
</div>
</div>
</div>
</div>
```
3. 保存文件并重新生成静态页面。
这个代码会在页面加载时显示一个加载动画,直到页面全部加载完成后才会显示页面内容。你可以根据自己的需求来修改加载动画的样式和持续时间。