Hexo站点加载动画修改（齿轮效果）

花猪

发布于 2022-02-16 16:31:51

1.2K0

发布于 2022-02-16 16:31:51

文章被收录于专栏：花猪的学习记录花猪的学习记录

前言

本文将介绍如何修改站点加载动画。

之前一直使用的是Butterfly主题默认的魔方盒子（姑且就这么称呼）加载动画，但是属实是不太喜欢。偶然看到了一个博客使用转动齿轮效果感觉很喜欢，就有了这篇文章。

效果展示如下：

（注意：该篇魔改教程会改动一些源文件，建议没把握的小盆友先自行做好备份，避免造成不可逆的错误）

教程链接：https://www.paddylin.top/post/4f69.html

操作

在themes\butterfly\layout\includes\loading目录下创建一个名为loaded.ejs的文件，并将如下内容写入该文件：

<% if (theme.preloader.enable) { %>
<div id='loader'>
    <% if(theme.preloader.layout == 'gear' ) {%>
    <div class="outer_box">
    <div class='loader_overlay'></div>
    <div class='loader_cogs'>
        <div class='loader_cogs__top'>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_part'></div>
            <div class='top_hole'></div>
        </div>
        <div class='loader_cogs__left'>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_part'></div>
            <div class='left_hole'></div>
        </div>
        <div class='loader_cogs__bottom'>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_part'></div>
            <div class='bottom_hole'></div>
        </div>
        <p style="text-align:center">&nbsp;&nbsp;&nbsp;loading...</p>
    </div>
    </div>
    <% } else if(theme.preloader.layout == 'spinner-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>
    var endLoading = function () {
    document.body.style.overflow = 'auto';
    document.getElementById('loader').classList.add("loading");
    }
    window.addEventListener('load',endLoading);
</script>
<% } %>

找到主题配置文件_config.butterfly.yml，在inject的head处引入如下两个css文件：

inject:
  head:
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_1.css" > # spinner-box风格样式文件
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zyoushuo/Blog@latest/hexo/css/loading_style_2.css" > # gear风格样式文件

在\themes\butterfly\layout\includes目录下，找到layout.pug文件。（版本为3.6.0+的请查看注意事项）

将代码（或释掉）：

if theme.preloade
      !=partial('includes/loading/loading', {}, {cache: true})

修改为：

if theme.preloade
      !=partial('includes/loading/loaded.ejs', {}, {cache:theme.fragment_cache})

找到主题配置文件_config.butterfly.yml。

将代码：

preloader: true

修改为：

preloader:
  enable: true
  layout: gear # gear, spinner-box 两种样式可选

保存，重新部署，启动，就可以看到效果啦。

注意事项

在Akilar博主的指导下，针对于第三步的修改，因为butterfly_v3.6.0+版本移除了fragment_cache的配置项，所以直接添加cache:theme.fragment_cache的做法存在隐患，应该保持原有的cache: true不动。

感谢指导。

结尾

慢慢改动源码的时候也在不断探索，学习其中的内容。之前看到过一篇文章提到，自己没事查看源码，有一些文件的语法根本没有学过，可以通过其中的一些常见的标记大概猜测每个代码块是什么作用，进而逐渐掌握其中的规律。确实是一种很好的自我探索的方法。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-02-25，如有侵权请联系 cloudcommunity@tencent.com 删除

缓存

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

缓存

登录后参与评论

0 条评论

热度