博客自建（带避坑指南）4：hexo文章页设置和动画魔改设置

咕咕了好久，这次终于来更新一下

看完上一篇博客：
博客自建（带避坑指南）3：简单的hexo网页界面设置-CSDN博客
想必你已经完成了头像、图片等一些基础的设置，但是这些改动都是比较基础的，现在我们再进一步完善一下

参考：

• 🐖抓到你啦～ (fomal.cn)
• 【Hexo】Hexo搭建Butterfly主题并快速美化_hexo butterfly-CSDN博客
• 博客搭建记录 --齿轮加载动画-CSDN博客 （如果想单独设置齿轮动画的话，强烈推荐这一篇）

1. 文章详情页图片

打开_config.butterfly.yml
当没有在front-matter设置top_img和cover的情况下会显示该图(也就是文章在没有设置图片封面时的默认封面)

# If the banner of page not setting, it will show the top_img
default_top_img: /img/default_top_img.jpg 

我最终设计了一下图标，然后小的那个准备用于显示默认图片和网页图片

我的代码：

default_top_img: /img/small_logo.png

2. 设置网页图标

可以先通过ico转换对图片进行压缩，感觉32px比较好，太小了有锯齿感
ICO图标在线转换工具 (nyaasu.top)

这一部分也在_config.butterfly.yml里，

# Favicon（網站圖標）  
favicon: /img/small_logo132ico

• 使用png格式也可以，但是建议压缩图片

效果：

3. 设置懒加载

• 这个效果就是图片没有加载出来的时候，会出现一个转啊转的图

1. 新增hexo-lazyload-image模块

npm install hexo-lazyload-image --save

2. 在主目录配置文件_config.yml增加配置

lazyload:
  enable: true
  loadingImg: /img/loading.gif

我想到一个idea，想用ai根据logo生成一个动图，找了很久网站，终于发现一个可以免费生成动图的，虽然效果和想象中的有差异
https://www.basedlabs.ai/
然后生成了video以后再转成gif：
视频转gif - 在线工具 (tool.lu)
结果：

最后还是感觉不是很合适，因为中间的过渡变化不是很好

最后还是选择了这个图片作为加载界面：

hexo三连之后，在加载网页时候，头像会有一瞬间的懒加载
（但是感觉这个动图还是不好看，后期应该会换掉）
（后续来了，现在因为图片懒加载并不会自适应图片大小，所以看脚注的时候很难看，被删了）

4. 设置加载界面(魔改内容)

• 在修改前请先做好备份，以免无法返回
• 此内容属于魔改内容，如果只需要调用默认的动画，则直接在配置文件里调整为true就行（教程最后两步）

参考:
【Hexo博客】自定义Butterfly主题 Loading 加载动画 | 百里飞洋 (meta-code.top)

4.1 准备工作

1. 找到动画的配置文件

[Blogroot]\node_modules\hexo-theme-butterfly\layout\includes\loading\fullpage-loading.pug

2. 修改这部分内容，
   

修改为：

if theme.preloader.enable  
  case theme.preloader.load_style      
    when 'gear'  
      include ./load_style/gear.pug  
    when 'triangles'  
      include ./load_style/triangles.pug  
    default  
      include ./load_style/default.pug

• 这里原教程有很多，我只保留了三个
• 这里相当于改成了一个大大的Switch语句，然后每一个的具体调用会单独写一个文件

3. 在 目录创建一个名为load_style的文件夹

4.2 配置default加载动画

我们之前在文件中删除的那一段就是用来配置default加载动画的（两个旋转方框），因此我们需要再load_style里给他把配置还回去：

1. 在load_style 文件夹中新建一个名为default.pug的文件：
2. 然后输入一下内容：
   

• (请注意图片中下划线没有显示，但是实际代码里是有下划线的)

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

4.3 配置gear加载动画

1. 同理，新建gear.pug
2. 输入以下代码

#loading-box
  .gear-loader
    .gear-loader_overlay
    .gear-loader_cogs
      .gear-loader_cogs__top
        .gear-top_part
        .gear-top_part
        .gear-top_part
        .gear-top_hole
      .gear-loader_cogs__left
        .gear-left_part
        .gear-left_part
        .gear-left_part
        .gear-left_hole
      .gear-loader_cogs__bottom
        .gear-bottom_part
        .gear-bottom_part
        .gear-bottom_part
        .gear-bottom_hole

4.4 配置triangle加载动画

1. 同理，新建triangles.pug
2. 输入以下代码

#loading-box
  .triangles-wrap
    .triangles-eiz
    .triangles-seiz
    .triangles-sei
    .triangles-fei
    .triangles-feir
    .triangles-trei
    .triangles-dvai
    .triangles-ein
    .triangles-zero

\

4.5 修改loading.styl

修改[Blogroot]\node_modules\hexo-theme-butterfly\source\css\_layout\loading.styl

1. 和之前的同理，也是要把这一段改为一个大的Switch：
   修改前：

if hexo-config('preloader.enable') && hexo-config('preloader.source') == 1  
  .loading-bg  
    position: fixed  
    z-index: 1000  
    width: 50%  
    height: 100%  
    background-color: var(--preloader-bg)  
  
  #loading-box  
    .loading-left-bg  
      @extend .loading-bg  
  
    .loading-right-bg  
      @extend .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: var(--preloader-color)  
        font-size: 16px  
  
      .configure-core  
        width: 100%  
        height: 100%  
        background-color: var(--preloader-bg)  
  
    &.loaded  
      .loading-left-bg  
        transition: all .5s  
        transform: translate(-100%, 0)  
  
      .loading-right-bg  
        transition: all .5s  
        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)

修改后：

if hexo-config('preloader.enable') && hexo-config('preloader.source') == 1  
  if hexo-config('preloader.load_style') == 'gear'  
    @import './_load_style/gear'  
  else if hexo-config('preloader.load_style') == 'triangles'  
    @import './_load_style/triangles'  
  else  
    @import './_load_style/default'

2. 新建一个文件夹_load_style:
   

4.5.1 default

新建[Blogroot]\node_modules\hexo-theme-butterfly\source\css\_load_style\default.styl

.loading-bg
  position fixed
  z-index 1000
  width 50%
  height 100%
  background var(--preloader-bg)
#loading-box
  .loading-left-bg
    @extend .loading-bg
    left 0
  .loading-right-bg
    @extend .loading-bg
    right 0
  &.loaded
    z-index -1000
    .loading-left-bg
      transition all 1.0s
      transform translate(-100%, 0)
    .loading-right-bg
      transition all 1.0s
      transform translate(100%, 0)
#loading-box
  .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 var(--preloader-color)
      font-size 16px

    .configure-core
      width 100%
      height 100%
      background-color var(--preloader-bg)

  &.loaded
    .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)

4.5.2 gear

[Blogroot]\node_modules\hexo-theme-butterfly\source\css\_load_style\gear.styl

#loading-box
  position fixed
  z-index 1000
  width 100vw
  height 100vh
  overflow hidden
  text-align center
  &.loaded
    z-index -1000
    .gear-loader
      display none
  .gear-loader
    height 100%
    position relative
    margin auto
    width 400px
  .gear-loader_overlay
    width 150px
    height 150px
    background transparent
    box-shadow 0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset
    border-radius 100%
    z-index -1
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin auto
  .gear-loader_cogs
    z-index -2
    width 100px
    height 100px
    top -120px !important
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin auto
  .gear-loader_cogs__top
    position relative
    width 100px
    height 100px
    transform-origin 50px 50px
    -webkit-animation rotate 10s infinite linear
    animation rotate 10s infinite linear
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-top_part
        width 100px
        border-radius 10px
        position absolute
        height 100px
        background #f98db9
      &.gear-top_hole
        width 50px
        height 50px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto
  .gear-loader_cogs__left
    position relative
    width 80px
    transform rotate(16deg)
    top 28px
    transform-origin 40px 40px
    animation rotate_left 10s 0.1s infinite reverse linear
    left -24px
    height 80px
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-left_part
        width 80px
        border-radius 6px
        position absolute
        height 80px
        background #97ddff
      &.gear-left_hole
        width 40px
        height 40px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto
  .gear-loader_cogs__bottom
    position relative
    width 60px
    top -65px
    transform-origin 30px 30px
    -webkit-animation rotate_left 10.2s 0.4s infinite linear
    animation rotate_left 10.2s 0.4s infinite linear
    transform rotate(4deg)
    left 79px
    height 60px
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-bottom_part
        width 60px
        border-radius 5px
        position absolute
        height 60px
        background #ffcd66
      &.gear-bottom_hole
        width 30px
        height 30px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto



/* Animations */
@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate_left {
  from {
    transform: rotate(16deg);
  }
  to {
    transform: rotate(376deg);
  }
}
@keyframes rotate_left {
  from {
    transform: rotate(16deg);
  }
  to {
    transform: rotate(376deg);
  }
}
@-webkit-keyframes rotate_right {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(364deg);
  }
}
@keyframes rotate_right {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(364deg);
  }
}

4.5.3 triangles

[Blogroot]\node_modules\hexo-theme-butterfly\source\css\_load_style\triangles.styl

#loading-box
  position fixed
  z-index 1000
  width 100vw
  height 100vh
  overflow hidden
  &.loaded
    z-index -1000
    .triangles-wrap
      display none

.triangles-wrap
  position absolute
  top 50%
  left 50%
  transform translate(-50%,-66.6666666666666666%)
  -ms-transform translate(-50%,-66.6666666666666666%)
  -webkit-transform translate(-50%,-66.6666666666666666%)
  -webkit-animation animascale 2s linear alternate infinite
  animation animascale 2s linear alternate both infinite



.triangles-zero, .triangles-ein, .triangles-dvai, .triangles-trei, .triangles-feir, .triangles-fei, .triangles-sei, .triangles-seiz, .triangles-eiz
  width 0px
  height 0px
  position absolute
  top 50%
  left 50%
  transform translate(-50%,-66.6666666666666666%)
  -ms-transform translate(-50%,-66.6666666666666666%)
  -webkit-transform translate(-50%,-66.6666666666666666%)

.triangles-zero
  border-style solid
  border-width 0 5px 8.7px 5px
  border-color transparent transparent #1274b6 transparent
  -webkit-animation anima 2s linear reverse both infinite 4s, animacolorzero 2s linear alternate both infinite
  animation anima 2s linear reverse both infinite 4s, animacolorzero 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-ein
  border-style solid
  border-width 0 10px 17.3px 10px
  border-color transparent transparent #167bbf transparent
  -webkit-animation anima 2s linear both infinite 4.2s, animacolorein 2s linear alternate both infinite
  animation anima 2s linear both infinite 4.2s, animacolorein 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-dvai
  border-style solid
  border-width 0 20px 34.6px 20px
  border-color transparent transparent #1b82c8 transparent
  -webkit-animation anima 2s linear reverse both infinite 4.4s, animacolordvai 2s linear alternate both infinite
  animation anima 2s linear reverse both infinite 4.4s, animacolordvai 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-trei
  border-style solid
  border-width 0 40px 69.3px 40px
  border-color transparent transparent #228bd2 transparent
  -webkit-animation anima 2s linear  both infinite 4.6s, animacolortrei 2s linear alternate both infinite
  animation anima 2s linear  both infinite 4.6s, animacolortrei 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-feir
  border-style solid
  border-width 0 80px 138.6px 80px
  border-color transparent transparent #2992d9 transparent
  -webkit-animation anima 2s linear reverse  both infinite 4.8s, animacolorfeir 2s linear alternate both infinite
  animation anima 2s linear reverse  both infinite 4.8s, animacolorfeir 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-fei
  border-style solid
  border-width 0 160px 277.1px 160px
  border-color transparent transparent #3498db transparent
  -webkit-animation anima 2s linear  both infinite 5s, animacolorfei 2s linear alternate both infinite
  animation anima 2s linear  both infinite 5s, animacolorfei 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-sei
  border-style solid
  border-width 0 320px 554.3px 320px
  border-color transparent transparent #3f9edd transparent
  -webkit-animation anima 2s linear reverse  both infinite 5.2s, animacolorsei 2s linear alternate both infinite
  animation anima 2s linear reverse  both infinite 5.2s, animacolorsei 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-seiz
  border-style solid
  border-width 0 640px 1108.5px 640px
  border-color transparent transparent #48a2de transparent
  -webkit-animation anima 2s linear  both infinite 5.4s, animacolorseiz 2s linear alternate both infinite
  animation anima 2s linear  both infinite 5.4s, animacolorseiz 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-eiz
  border-style solid
  border-width 0 1280px 2217.0px 1280px
  border-color transparent transparent #59aae0 transparent
  -webkit-animation anima 2s linear reverse  both infinite 5.6s, animacoloreiz 2s linear alternate both infinite
  animation anima 2s linear reverse  both infinite 5.6s, animacoloreiz 2s linear alternate both infinite
  -webkit-transform-origin top left


@-webkit-keyframes anima
  from
    -webkit-transform: rotate(0deg) translate(-50%,-66.6666666666666666%)
  to
    -webkit-transform: rotate(360deg) translate(-50%,-66.6666666666666666%)


@keyframes anima
    from
      transform rotate(0deg) translate(-50%,-66.6666666666666666%)
    to
      transform rotate(360deg) translate(-50%,-66.6666666666666666%)



/*
@-webkit-keyframes animacolorzero
{
0%{border-color: transparent transparent #602520 transparent;}
16.6%{border-color: transparent transparent #672922 transparent;}
33.3%{border-color: transparent transparent #6F2E25 transparent;}
50%{border-color: transparent transparent #772F28 transparent;}
66.6%{border-color: transparent transparent #82332B transparent;}
83.3%{border-color: transparent transparent #8A372E transparent;}
100%{border-color: transparent transparent #A14436 transparent;}
}

@keyframes animacolorzero
{
0%{border-color: transparent transparent #602520 transparent;}
16.6%{border-color: transparent transparent #672922 transparent;}
33.3%{border-color: transparent transparent #6F2E25 transparent;}
50%{border-color: transparent transparent #772F28 transparent;}
66.6%{border-color: transparent transparent #82332B transparent;}
83.3%{border-color: transparent transparent #8A372E transparent;}
100%{border-color: transparent transparent #A14436 transparent;}
}


@-webkit-keyframes animacolorein
{
0%{border-color: transparent transparent #672922 transparent;}
16.6%{border-color: transparent transparent #6F2E25 transparent;}
33.3%{border-color: transparent transparent #772F28 transparent;}
50%{border-color: transparent transparent #82332B transparent;}
66.6%{border-color: transparent transparent #8A372E transparent;}
83.3%{border-color: transparent transparent #A14436 transparent;}
100%{border-color: transparent transparent #602520 transparent;}
}

@keyframes animacolorein
{
0%{border-color: transparent transparent #672922 transparent;}
16.6%{border-color: transparent transparent #6F2E25 transparent;}
33.3%{border-color: transparent transparent #772F28 transparent;}
50%{border-color: transparent transparent #82332B transparent;}
66.6%{border-color: transparent transparent #8A372E transparent;}
83.3%{border-color: transparent transparent #A14436 transparent;}
100%{border-color: transparent transparent #602520 transparent;}
}


@-webkit-keyframes animacolordvai
{
0%{border-color: transparent transparent #6F2E25 transparent;}
16.6%{border-color: transparent transparent #772F28 transparent;}
33.3%{border-color: transparent transparent #82332B transparent;}
50%{border-color: transparent transparent #8A372E transparent;}
66.6%{border-color: transparent transparent #A14436 transparent;}
83.3%{border-color: transparent transparent #602520 transparent;}
100%{border-color: transparent transparent #672922 transparent;}
}

@keyframes animacolordvai
{
0%{border-color: transparent transparent #6F2E25 transparent;}
16.6%{border-color: transparent transparent #772F28 transparent;}
33.3%{border-color: transparent transparent #82332B transparent;}
50%{border-color: transparent transparent #8A372E transparent;}
66.6%{border-color: transparent transparent #A14436 transparent;}
83.3%{border-color: transparent transparent #602520 transparent;}
100%{border-color: transparent transparent #672922 transparent;}
}


@-webkit-keyframes animacolortrei
{
0%{border-color: transparent transparent #772F28 transparent;}
16.6%{border-color: transparent transparent #82332B transparent;}
33.3%{border-color: transparent transparent #8A372E transparent;}
50%{border-color: transparent transparent #A14436 transparent;}
66.6%{border-color: transparent transparent #602520 transparent;}
83.3%{border-color: transparent transparent #672922 transparent;}
100%{border-color: transparent transparent #6F2E25 transparent;}
}

@keyframes animacolortrei
{
0%{border-color: transparent transparent #772F28 transparent;}
16.6%{border-color: transparent transparent #82332B transparent;}
33.3%{border-color: transparent transparent #8A372E transparent;}
50%{border-color: transparent transparent #A14436 transparent;}
66.6%{border-color: transparent transparent #602520 transparent;}
83.3%{border-color: transparent transparent #672922 transparent;}
100%{border-color: transparent transparent #6F2E25 transparent;}
}


@-webkit-keyframes animacolorfeir
{
0%{border-color: transparent transparent #82332B transparent;}
16.6%{border-color: transparent transparent #8A372E transparent;}
33.3%{border-color: transparent transparent #A14436 transparent;}
50%{border-color: transparent transparent #602520 transparent;}
66.6%{border-color: transparent transparent #672922 transparent;}
83.3%{border-color: transparent transparent #6F2E25 transparent;}
100%{border-color: transparent transparent #772F28 transparent;}
}

@keyframes animacolorfeir
{
0%{border-color: transparent transparent #82332B transparent;}
16.6%{border-color: transparent transparent #8A372E transparent;}
33.3%{border-color: transparent transparent #A14436 transparent;}
50%{border-color: transparent transparent #602520 transparent;}
66.6%{border-color: transparent transparent #672922 transparent;}
83.3%{border-color: transparent transparent #6F2E25 transparent;}
100%{border-color: transparent transparent #772F28 transparent;}
}



@-webkit-keyframes animacolorfei
{
0%{border-color: transparent transparent #8A372E transparent;}
16.6%{border-color: transparent transparent #A14436 transparent;}
33.3%{border-color: transparent transparent #602520 transparent;}
50%{border-color: transparent transparent #672922 transparent;}
66.6%{border-color: transparent transparent #6F2E25 transparent;}
83.3%{border-color: transparent transparent #772F28 transparent;}
100%{border-color: transparent transparent #82332B transparent;}
}

@keyframes animacolorfei
{
0%{border-color: transparent transparent #8A372E transparent;}
16.6%{border-color: transparent transparent #A14436 transparent;}
33.3%{border-color: transparent transparent #602520 transparent;}
50%{border-color: transparent transparent #672922 transparent;}
66.6%{border-color: transparent transparent #6F2E25 transparent;}
83.3%{border-color: transparent transparent #772F28 transparent;}
100%{border-color: transparent transparent #82332B transparent;}
}




@-webkit-keyframes animacolorsei
{
0%{border-color: transparent transparent #A14436 transparent;}
16.6%{border-color: transparent transparent #602520 transparent;}
33.3%{border-color: transparent transparent #672922 transparent;}
50%{border-color: transparent transparent #6F2E25 transparent;}
66.6%{border-color: transparent transparent #772F28 transparent;}
83.3%{border-color: transparent transparent #82332B transparent;}
100%{border-color: transparent transparent #8A372E transparent;}
}

@keyframes animacolorsei
{
0%{border-color: transparent transparent #A14436 transparent;}
16.6%{border-color: transparent transparent #602520 transparent;}
33.3%{border-color: transparent transparent #672922 transparent;}
50%{border-color: transparent transparent #6F2E25 transparent;}
66.6%{border-color: transparent transparent #772F28 transparent;}
83.3%{border-color: transparent transparent #82332B transparent;}
100%{border-color: transparent transparent #8A372E transparent;}
}*/

@-webkit-keyframes animacolorzero
{
0%{border-color: transparent transparent #1274b6 transparent;}
12.5%{border-color: transparent transparent #167bbf transparent;}
25%{border-color: transparent transparent #1b82c8 transparent;}
37.5%{border-color: transparent transparent #228bd2 transparent;}
50%{border-color: transparent transparent #2992d9 transparent;}
62.5%{border-color: transparent transparent #3498db transparent;}
75%{border-color: transparent transparent #3f9edd transparent;}
87.5%{border-color: transparent transparent #48a2de transparent;}
100%{border-color: transparent transparent #59aae0 transparent;}
}

@keyframes animacolorzero
{
0%{border-color: transparent transparent #1274b6 transparent;}
12.5%{border-color: transparent transparent #167bbf transparent;}
25%{border-color: transparent transparent #1b82c8 transparent;}
37.5%{border-color: transparent transparent #228bd2 transparent;}
50%{border-color: transparent transparent #2992d9 transparent;}
62.5%{border-color: transparent transparent #3498db transparent;}
75%{border-color: transparent transparent #3f9edd transparent;}
87.5%{border-color: transparent transparent #48a2de transparent;}
100%{border-color: transparent transparent #59aae0 transparent;}
}

@-webkit-keyframes animacolorein
{
0%{border-color: transparent transparent #167bbf transparent;}
12.5%{border-color: transparent transparent #1b82c8 transparent;}
25%{border-color: transparent transparent #228bd2 transparent;}
37.5%{border-color: transparent transparent #2992d9 transparent;}
50%{border-color: transparent transparent #3498db transparent;}
62.5%{border-color: transparent transparent #3f9edd transparent;}
75%{border-color: transparent transparent #48a2de transparent;}
87.5%{border-color: transparent transparent #59aae0 transparent;}
100%{border-color: transparent transparent #1274b6 transparent;}
}

@keyframes animacolorein
{
0%{border-color: transparent transparent #167bbf transparent;}
12.5%{border-color: transparent transparent #1b82c8 transparent;}
25%{border-color: transparent transparent #228bd2 transparent;}
37.5%{border-color: transparent transparent #2992d9 transparent;}
50%{border-color: transparent transparent #3498db transparent;}
62.5%{border-color: transparent transparent #3f9edd transparent;}
75%{border-color: transparent transparent #48a2de transparent;}
87.5%{border-color: transparent transparent #59aae0 transparent;}
100%{border-color: transparent transparent #1274b6 transparent;}
}

@-webkit-keyframes animacolordvai
{
0%{border-color: transparent transparent #1b82c8 transparent;}
12.5%{border-color: transparent transparent #228bd2 transparent;}
25%{border-color: transparent transparent #2992d9 transparent;}
37.5%{border-color: transparent transparent #3498db transparent;}
50%{border-color: transparent transparent #3f9edd transparent;}
62.5%{border-color: transparent transparent #48a2de transparent;}
75%{border-color: transparent transparent #59aae0 transparent;}
87.5%{border-color: transparent transparent #1274b6 transparent;}
100%{border-color: transparent transparent #167bbf transparent;}
}

@keyframes animacolordvai
{
0%{border-color: transparent transparent #1b82c8 transparent;}
12.5%{border-color: transparent transparent #228bd2 transparent;}
25%{border-color: transparent transparent #2992d9 transparent;}
37.5%{border-color: transparent transparent #3498db transparent;}
50%{border-color: transparent transparent #3f9edd transparent;}
62.5%{border-color: transparent transparent #48a2de transparent;}
75%{border-color: transparent transparent #59aae0 transparent;}
87.5%{border-color: transparent transparent #1274b6 transparent;}
100%{border-color: transparent transparent #167bbf transparent;}
}

@-webkit-keyframes animacolortrei
{
0%{border-color: transparent transparent #228bd2 transparent;}
12.5%{border-color: transparent transparent #2992d9 transparent;}
25%{border-color: transparent transparent #3498db transparent;}
37.5%{border-color: transparent transparent #3f9edd transparent;}
50%{border-color: transparent transparent #48a2de transparent;}
62.5%{border-color: transparent transparent #59aae0 transparent;}
75%{border-color: transparent transparent #1274b6 transparent;}
87.5%{border-color: transparent transparent #167bbf transparent;}
100%{border-color: transparent transparent #1b82c8 transparent;}
}

@keyframes animacolortrei
{
0%{border-color: transparent transparent #228bd2 transparent;}
12.5%{border-color: transparent transparent #2992d9 transparent;}
25%{border-color: transparent transparent #3498db transparent;}
37.5%{border-color: transparent transparent #3f9edd transparent;}
50%{border-color: transparent transparent #48a2de transparent;}
62.5%{border-color: transparent transparent #59aae0 transparent;}
75%{border-color: transparent transparent #1274b6 transparent;}
87.5%{border-color: transparent transparent #167bbf transparent;}
100%{border-color: transparent transparent #1b82c8 transparent;}
}

@-webkit-keyframes animacolorfeir
{
0%{border-color: transparent transparent #2992d9 transparent;}
12.5%{border-color: transparent transparent #3498db transparent;}
25%{border-color: transparent transparent #3f9edd transparent;}
37.5%{border-color: transparent transparent #48a2de transparent;}
50%{border-color: transparent transparent #59aae0 transparent;}
62.5%{border-color: transparent transparent #1274b6 transparent;}
75%{border-color: transparent transparent #167bbf transparent;}
87.5%{border-color: transparent transparent #1b82c8 transparent;}
100%{border-color: transparent transparent #228bd2 transparent;}
}

@keyframes animacolorfeir
{
0%{border-color: transparent transparent #2992d9 transparent;}
12.5%{border-color: transparent transparent #3498db transparent;}
25%{border-color: transparent transparent #3f9edd transparent;}
37.5%{border-color: transparent transparent #48a2de transparent;}
50%{border-color: transparent transparent #59aae0 transparent;}
62.5%{border-color: transparent transparent #1274b6 transparent;}
75%{border-color: transparent transparent #167bbf transparent;}
87.5%{border-color: transparent transparent #1b82c8 transparent;}
100%{border-color: transparent transparent #228bd2 transparent;}
}

@-webkit-keyframes animacolorfei
{
0%{border-color: transparent transparent #3498db transparent;}
12.5%{border-color: transparent transparent #3f9edd transparent;}
25%{border-color: transparent transparent #48a2de transparent;}
37.5%{border-color: transparent transparent #59aae0 transparent;}
50%{border-color: transparent transparent #1274b6 transparent;}
62.5%{border-color: transparent transparent #167bbf transparent;}
75%{border-color: transparent transparent #1b82c8 transparent;}
87.5%{border-color: transparent transparent #228bd2 transparent;}
100%{border-color: transparent transparent #2992d9 transparent;}
}

@keyframes animacolorfei
{
0%{border-color: transparent transparent #3498db transparent;}
12.5%{border-color: transparent transparent #3f9edd transparent;}
25%{border-color: transparent transparent #48a2de transparent;}
37.5%{border-color: transparent transparent #59aae0 transparent;}
50%{border-color: transparent transparent #1274b6 transparent;}
62.5%{border-color: transparent transparent #167bbf transparent;}
75%{border-color: transparent transparent #1b82c8 transparent;}
87.5%{border-color: transparent transparent #228bd2 transparent;}
100%{border-color: transparent transparent #2992d9 transparent;}
}

@-webkit-keyframes animacolorsei
{
0%{border-color: transparent transparent #3f9edd transparent;}
12.5%{border-color: transparent transparent #48a2de transparent;}
25%{border-color: transparent transparent #59aae0 transparent;}
37.5%{border-color: transparent transparent #1274b6 transparent;}
50%{border-color: transparent transparent #167bbf transparent;}
62.5%{border-color: transparent transparent #1b82c8 transparent;}
75%{border-color: transparent transparent #228bd2 transparent;}
87.5%{border-color: transparent transparent #2992d9 transparent;}
100%{border-color: transparent transparent #3498db transparent;}
}

@keyframes animacolorsei
{
0%{border-color: transparent transparent #3f9edd transparent;}
12.5%{border-color: transparent transparent #48a2de transparent;}
25%{border-color: transparent transparent #59aae0 transparent;}
37.5%{border-color: transparent transparent #1274b6 transparent;}
50%{border-color: transparent transparent #167bbf transparent;}
62.5%{border-color: transparent transparent #1b82c8 transparent;}
75%{border-color: transparent transparent #228bd2 transparent;}
87.5%{border-color: transparent transparent #2992d9 transparent;}
100%{border-color: transparent transparent #3498db transparent;}
}

@-webkit-keyframes animacolorseiz
{
0%{border-color: transparent transparent #48a2de transparent;}
12.5%{border-color: transparent transparent #59aae0 transparent;}
25%{border-color: transparent transparent #1274b6 transparent;}
37.5%{border-color: transparent transparent #167bbf transparent;}
50%{border-color: transparent transparent #1b82c8 transparent;}
62.5%{border-color: transparent transparent #228bd2 transparent;}
75%{border-color: transparent transparent #2992d9 transparent;}
87.5%{border-color: transparent transparent #3498db transparent;}
100%{border-color: transparent transparent #3f9edd transparent;}
}

@keyframes animacolorseiz
{
0%{border-color: transparent transparent #48a2de transparent;}
12.5%{border-color: transparent transparent #59aae0 transparent;}
25%{border-color: transparent transparent #1274b6 transparent;}
37.5%{border-color: transparent transparent #167bbf transparent;}
50%{border-color: transparent transparent #1b82c8 transparent;}
62.5%{border-color: transparent transparent #228bd2 transparent;}
75%{border-color: transparent transparent #2992d9 transparent;}
87.5%{border-color: transparent transparent #3498db transparent;}
100%{border-color: transparent transparent #3f9edd transparent;}
}

@-webkit-keyframes animacoloreiz
{
0%{border-color: transparent transparent #59aae0 transparent;}
12.5%{border-color: transparent transparent #1274b6 transparent;}
25%{border-color: transparent transparent #167bbf transparent;}
37.5%{border-color: transparent transparent #1b82c8 transparent;}
50%{border-color: transparent transparent #228bd2 transparent;}
62.5%{border-color: transparent transparent #2992d9 transparent;}
75%{border-color: transparent transparent #3498db transparent;}
87.5%{border-color: transparent transparent #3f9edd transparent;}
100%{border-color: transparent transparent #48a2de transparent;}
}

@keyframes animacoloreiz
{
0%{border-color: transparent transparent #59aae0 transparent;}
12.5%{border-color: transparent transparent #1274b6 transparent;}
25%{border-color: transparent transparent #167bbf transparent;}
37.5%{border-color: transparent transparent #1b82c8 transparent;}
50%{border-color: transparent transparent #228bd2 transparent;}
62.5%{border-color: transparent transparent #2992d9 transparent;}
75%{border-color: transparent transparent #3498db transparent;}
87.5%{border-color: transparent transparent #3f9edd transparent;}
100%{border-color: transparent transparent #48a2de transparent;}
}

@-webkit-keyframes animascale
{
0%{-webkit-transform: scale(1);}
100%{-webkit-transform: scale(1.2);}
}

@keyframes animascale
{
0%{-webkit-transform: scale(1);}
100%{-webkit-transform: scale(1.2);}
}

4.6 修改layout.pug

修改[Blogroot]\node_modules\hexo-theme-butterfly\layout\includes\layout.pug
1.

在实际操作过程中，发现已经完成了更改：

• 那应该不需要动了，继续往下吧

4.7 修改var.styl

修改[Blogroot]\node_modules\hexo-theme-butterfly\source\css\var.styl

修改为:

      // preloader
     $preloader-bg = hexo-config('preloader.enable') && hexo-config('preloader.load_color') ? convert(hexo-config('preloader.load_color')) : #37474f

4.8 修改_config.butterfly.yml

原来是这样的：

现在：

# Loading Animation (加載動畫)加载动画  
preloader:  
  enable: true # true|false  
  load_color: '#000000' # '#37474f'  
  load_style: triangles # default|gear|triangles  
  load_image:  # url  
  source: 1  
  # pace theme (see https://codebyzach.github.io/pace/)  
  pace_css_url:

然后hexo三连看一下效果

hexo clean && hexo generate && hexo deploy