Hexo安知鱼首页加载动画

东方月初2024-08-202024-11-25

加载动画结语

Hexo是一款快速、简洁且高效的静态博客框架，它的加载页是展示个人品牌和风格的重要组成部分。通过定制加载页，你可以为你的网站增添个性化的风格，提升用户体验，以及传达特定的信息。
本文以本站使用的主题 anzhiyu 为例，在本教程中，我们将深入探讨如何更换Hexo加载页，从简单的概念到具体的实施步骤，帮助你轻松地定制属于自己的加载页。
加载页的作用：加载页是指在网页加载完成之前显示的页面，通常用于展示品牌标识、加载进度和欢迎信息。它不仅可以提升用户体验，还可以传达网站的特色和个性。
加载页设计的考虑因素：在定制加载页时，需要考虑网站的整体风格和目标受众。加载页应该与主题风格一致，同时尽量简洁明了，以保持用户的注意力和耐心。
原教程中使用的是butterfly主题，本教程将以anzhiyu的格式进行更改，在此，感谢SNTube Studio整合并提供了详细的配置教程

预览效果

首页加载动画预览效果

1. 新建文件

themes/anzhiyu/layout/includes/loading/里，新建文件catloader.pug，内容如下

#loading-box
  .cat__scene
    .cat__main
      .cat__body
      .cat__body
      .cat__tail
      .cat__head

script.
  const preloader = {
    endLoading: () => {
      var loadingBox = document.getElementById('loading-box');
      var loadingBoxme = document.getElementById('loading-box-me');
      loadingBoxme.addEventListener('animationend', () => {setTimeout(function() {loadingBox.classList.add("loaded");}, 2000) })
    },
    initLoading: () => {
      document.getElementById('loading-box').classList.remove("loaded")
    },
    otherendLoading: () => {
      document.getElementById('loading-box').classList.add("loaded")
    }
  }
  window.addEventListener('load',()=> { preloader.endLoading() })
  setTimeout(function(){preloader.otherendLoading();},5000)

  if (!{theme.pjax && theme.pjax.enable}) {
    document.addEventListener('pjax:send', () => { preloader.initLoading() })
    document.addEventListener('pjax:complete', () => { preloader.otherendLoading() })
  }

2. 修改 `index.pug`

找到themes/anzhiyu/layout/includes/loading/的index.pug文件，并替换文件内容

if theme.preloader.source === 1
  include ./fullpage-loading.pug
else if theme.preloader.source === 2
  include ./pace.pug
else if theme.preloader.source === 3
  include ./fullpage-loading.pug
  include ./pace.pug
else if theme.preloader.source === 4
  include ./catloader.pug
else if theme.preloader.source === 5
  include ./catloader.pug
  include ./pace.pug
else
  include ./fullpage-loading.pug
  include ./pace.pug

3. 修改 `loading.styl`

找到themes/anzhiyu/source/css/_global/,拷贝一份loading.styl并重命名为default.styl
为了便于后续管理,在此目录下新建load_style文件夹，将default.styl放入load_style文件夹中
修改loading.styl文件，并替换以下内容

if hexo-config('preloader.enable')
  if hexo-config('preloader.source') == '1'
    @import './load_style/default'
  else if hexo-config('preloader.source') == '2'
    @import './load_style/default'
  else if hexo-config('preloader.source') == '3'
    @import './load_style/default'
  else if hexo-config('preloader.source') == '4'
    @import './load_style/catloader'
  else if hexo-config('preloader.source') == '5'
    @import './load_style/catloader'
  else
    @import './load_style/default'

4. 在 `load_style` 下新建 `catloader.styl` 友情提示`load_style`目录是我们上一步新建的

找到themes/anzhiyu/source/css/_global/load_style/并新建一个catloader.styl，内容如下

#loading-box
  position fixed
  z-index 1000
  width 100vw
  height 100vh
  overflow hidden
  text-align center
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  line-height: 1.4;
  &.loaded
    z-index -1000
    .cat__scene
      display none
  .cat__scene
    display flex
    flex 1
    flex-direction column
    justify-content flex-start
    justify-content center
    align-items center
    background-color #e6dcdc

    .cat__main
      position relative
      width 100%
      max-width 20em
      overflow hidden
      background-color #e6dcdc
      &::before
        content ""
        display block
        padding-bottom 100%
      &:hover
        & > *
          -webkit-animation-play-state paused
          animation-play-state paused
      &:active
        & > *
          -webkit-animation-play-state running
          animation-play-state running

    .cat__body, .cat__tail, .cat__head
      position absolute
      top 0
      left 0
      right 0
      bottom 0
      -webkit-animation cat__rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93) infinite
      animation cat__rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93) infinite

    .cat__body::before, .cat__tail::before, .cat__head::before
      content ""
      position absolute
      width 50%
      height 50%
      background-size 200%
      background-repeat no-repeat
      background-image url("https://images.weserv.nl/?url=i.imgur.com/M1raXX3.png&il")

    .cat__head
      &::before
        top 0
        right 0
        background-position 100% 0%
        transform-origin 0% 100%
        transform rotate(90deg)

    .cat__tail
      -webkit-animation-delay 0.2s
      animation-delay 0.2s
      &::before
        left 0
        bottom 0
        background-position 0% 100%
        transform-origin 100% 0%
        transform rotate(-30deg)

    .cat__body
      -webkit-animation-delay 0.1s
      animation-delay 0.1s
      &:nth-of-type(2)
        -webkit-animation-delay 0.2s
        animation-delay 0.2s
      &::before
        right 0
        bottom 0
        background-position 100% 100%
        transform-origin 0% 0%



@-webkit-keyframes cat__rotating {
  from {
    transform: rotate(720deg);
  }
  to {
    transform: none;
  }
}

@keyframes cat__rotating {
  from {
    transform: rotate(720deg);
  }
  to {
    transform: none;
  }
}

5. 修改主题配置文件

在主题配置文件中找到preloader,修改如下

preloader修改说明和选择新样式

# Loading Animation (加载动画)
preloader:
  enable: true
  # source
  # 1. fullpage-loading(default)
  # 2. pace (progress bar)
  # 3. fullpage-loading + pace
  # 4. fullpage-loading(clickenter)
  # 5. fullpage-loading(clickenter) + pace
  # else fullpage-loading + pace
  source: 4
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:
  avatar:  # 自定义头像