Hexo 添加加载动画

butterfly主题

阅读须知

如果你是 clone 原主题 dev 分支的话，这篇博客可能不需要继续阅读下去，你只需将主题下Butterfly.yml 中 preloader: false 变为 true 即可。但是如果你是 clone 的 master 分支，和我一样，想自己搞一个加载动画，那就按着教程一步一步来。但我弄完之后，发现不开着或许会好一点，然后又变为false了。

教程

第一步，在 themes/Butterfly/layout/includes/layout.pug 添加如下代码：

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

继续，在 themes/Butterfly/layout/404.pug 添加如下代码：

if theme.preloader
  !=partial('includes/loading/loading', {}, {cache:theme.fragment_cache})  
if theme.fireworks && theme.fireworks.enable

在 themes/Butterfly/layout/includes/additional-js.pug 最后一行添加如下代码：

if theme.preloader
  !=partial('includes/loading/loading-js', {}, {cache:theme.fragment_cache})

第二步，在 themes/Butterfly/layout/includes 下新建一个文件夹，命名为 loading，如下图所示，添加两个文件。

loading-js.pug

script.
  var endLoading = function () {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  }
  window.addEventListener('load',endLoading)

loading.pug

#loading-box
  .loading-left-bg
  .loading-right-bg
  .spinner-box
    .configure-border-1
      .configure-core
    .configure-border-2
      .configure-core
    .loading-word= _p('loading')

第三步，在themse/Butterfly/source/css/_layout/ 文件夹下新建 loadding.styl，复制下面代码，添加

if hexo-config('preloader')
  loading-bg()
    position: fixed
    z-index: 1000
    width: 50%
    height: 100%
    background-color: $preloader-bg
    transition: all .5s

  #loading-box
    .loading-left-bg
      loading-bg()

    .loading-right-bg
      loading-bg()
      right: 0

    .spinner-box
      position: fixed
      z-index: 1001
      display: flex
      justify-content: center
      align-items: center
      width: 100%
      height: 100vh

      .configure-border-1
        position: absolute
        padding: 3px
        width: 115px
        height: 115px
        background: #ffab91
        animation: configure-clockwise 3s ease-in-out 0s infinite alternate

      .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-word
        position: absolute
        color: $white
        font-size: .8rem

      .configure-core
        width: 100%
        height: 100%
        background-color: $preloader-bg

    &.loaded
      .loading-left-bg
        transform: translate(-100%, 0)

      .loading-right-bg
        transform: translate(100%, 0)

      .spinner-box
        display: none

  @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)

然后在themse/Butterfly/source/css/_mode/darkmode.styl 文件最后一行添加如下代码：

if hexo-config('preloader')
  #loading-box
    .loading-left-bg,
    .loading-right-bg,
    .configure-core
      background-color: darken(#121212, 2)

    .loading-word
      color: alpha(#FFFFFF, .6)

然后在themse/Butterfly/source/css/var.styl 文件大约在85行添加如下代码：

//preloader
$preloader-bg = #37474f

第四步，在 themes/Butterfly/languages/zh-CN.yml 文件最后一行，添加如下代码

loading: 加载中...

具体位置参考如下：

将themes/Butterfly/layout/includes/head/subtitle.pug 文件替换为如下代码（将原本的删除）

if theme.subtitle.enable
  - var source = theme.subtitle.source
  - var subtitleEffect = theme.subtitle.effect

  if subtitleEffect
    script(src=url_for(theme.CDN.typed))

  if source == '1'
    script.
      var subtitleType = function () {
        var subtitleEffect = !{ subtitleEffect }
        fetch('https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json',)
          .then(function (res) {
            return res.json()
          })
          .then(function (data) {
            if (subtitleEffect) {
              var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
              var both = sub.unshift(data.text)
              var typed = new Typed('#subtitle', {
                strings: sub,
                startDelay: 300,
                typeSpeed: 150,
                loop: !{theme.subtitle.loop},
                backSpeed: 50,
              })
            } else {
              document.getElementById('subtitle').innerHTML = data.text
            }
          })
          .catch(function (err) {
            console.error(err)
          })
      }
      window.addEventListener('load', subtitleType)

  else if source == '2'
    script.
      var subtitleType = function () {
        var subtitleEffect = !{ subtitleEffect }
        fetch('https://v1.hitokoto.cn')
          .then(function (res) {
            return res.json()
          })
          .then(function (data) {
            if (subtitleEffect) {
              var from = '出自 ' + data.from
              var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
              var both = sub.unshift(data.hitokoto, from)
              var typed = new Typed('#subtitle', {
                strings: sub,
                startDelay: 300,
                typeSpeed: 150,
                loop: !{theme.subtitle.loop},
                backSpeed: 50,
              })
            } else {
              document.getElementById('subtitle').innerHTML = data.hitokoto
            }
          })
          .catch(function (err) {
            console.error(err)
          })
      }
      window.addEventListener('load', subtitleType)

  else if source == '3'
    script.
      var subtitleType = function () {
        loadScript('http://yijuzhan.com/api/word.php?m=js', function () {
          var subtitleEffect = !{ subtitleEffect }
          var con = str[0]
          if (subtitleEffect) {
            var from = '出自 ' + str[1]
            var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
            var both = sub.unshift(con, from)
            var typed = new Typed('#subtitle', {
              strings: sub,
              startDelay: 300,
              typeSpeed: 150,
              loop: !{theme.subtitle.loop},
              backSpeed: 50,
            })
          } else {
            document.getElementById('subtitle').innerHTML = con
          }
        })
      }
      window.addEventListener('load', subtitleType)

  else if source == '4'
    script.
      var subtitleType = function () {
        loadScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js',function () {
            var subtitleEffect = !{ subtitleEffect }
            jinrishici.load(function (result) {
              if (subtitleEffect) {
                var sub = '!{theme.subtitle.sub}'.length == 0 ? new Array() : '!{theme.subtitle.sub}'.split(',')
                var content = result.data.content
                var both = sub.unshift(content)
                var typed = new Typed('#subtitle', {
                  strings: sub,
                  startDelay: 300,
                  typeSpeed: 150,
                  loop: !{theme.subtitle.loop},
                  backSpeed: 50,
                })
              } else {
                document.getElementById('subtitle').innerHTML = result.data.content
              }
            })
          }
        )
      }
      window.addEventListener('load', subtitleType)

  else
    script.
      var subtitleEffect = !{subtitleEffect}
      if (subtitleEffect) { 
        var typed = new Typed("#subtitle", {
          strings: '!{theme.subtitle.sub}'.split(","),
          startDelay: 300,
          typeSpeed: 150,
          loop: !{theme.subtitle.loop},
          backSpeed: 50
        })
      } else {
        document.getElementById("subtitle").innerHTML = '!{theme.subtitle.sub[0]}'
      }

第五步，在主题文件 butterfly.yml 任意位置添加如下代码，启用加载动画，不启用可以设置为 false

# 加载动画 Loading Animation
preloader: true

其他主题

第一步，将以下内容添加到 <head></head> 标签内：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/HCLonely/images@master/others/loading.min.css">

第二步，将以下内容添加到<body> 标签后面：

<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>

第三步，将以下内容添加到 </body>标签前面：

<script>
  var endLoading = function () {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded");
  }
  window.addEventListener('load',endLoading);
</script>

参考博客：

作者: HCLonely
链接: https://blog.hclonely.com/
来源: HCLonely Blog