Butterfly主题美化

ymktchic

发布于 2022-01-18 17:14:23

1.5K0

发布于 2022-01-18 17:14:23

文章被收录于专栏：ymktchicymktchic

添加星空背景

新建js文件

在butterfly/source/js/创建一个universe.js文件。

function dark() {window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var n,e,i,h,t=.05,s=document.getElementById("universe"),o=!0,a="180,184,240",r="226,225,142",d="226,225,224",c=[];function f(){n=window.innerWidth,e=window.innerHeight,i=.216*n,s.setAttribute("width",n),s.setAttribute("height",e)}function u(){h.clearRect(0,0,n,e);for(var t=c.length,i=0;i<t;i++){var s=c[i];s.move(),s.fadeIn(),s.fadeOut(),s.draw()}}function y(){this.reset=function(){this.giant=m(3),this.comet=!this.giant&&!o&&m(10),this.x=l(0,n-10),this.y=l(0,e),this.r=l(1.1,2.6),this.dx=l(t,6*t)+(this.comet+1-1)*t*l(50,120)+2*t,this.dy=-l(t,6*t)-(this.comet+1-1)*t*l(50,120),this.fadingOut=null,this.fadingIn=!0,this.opacity=0,this.opacityTresh=l(.2,1-.4*(this.comet+1-1)),this.do=l(5e-4,.002)+.001*(this.comet+1-1)},this.fadeIn=function(){this.fadingIn&&(this.fadingIn=!(this.opacity>this.opacityTresh),this.opacity+=this.do)},this.fadeOut=function(){this.fadingOut&&(this.fadingOut=!(this.opacity<0),this.opacity-=this.do/2,(this.x>n||this.y<0)&&(this.fadingOut=!1,this.reset()))},this.draw=function(){if(h.beginPath(),this.giant)h.fillStyle="rgba("+a+","+this.opacity+")",h.arc(this.x,this.y,2,0,2*Math.PI,!1);else if(this.comet){h.fillStyle="rgba("+d+","+this.opacity+")",h.arc(this.x,this.y,1.5,0,2*Math.PI,!1);for(var t=0;t<30;t++)h.fillStyle="rgba("+d+","+(this.opacity-this.opacity/20*t)+")",h.rect(this.x-this.dx/4*t,this.y-this.dy/4*t-2,2,2),h.fill()}else h.fillStyle="rgba("+r+","+this.opacity+")",h.rect(this.x,this.y,this.r,this.r);h.closePath(),h.fill()},this.move=function(){this.x+=this.dx,this.y+=this.dy,!1===this.fadingOut&&this.reset(),(this.x>n-n/4||this.y<0)&&(this.fadingOut=!0)},setTimeout(function(){o=!1},50)}function m(t){return Math.floor(1e3*Math.random())+1<10*t}function l(t,i){return Math.random()*(i-t)+t}f(),window.addEventListener("resize",f,!1),function(){h=s.getContext("2d");for(var t=0;t<i;t++)c[t]=new y,c[t].reset();u()}(),function t(){document.getElementsByTagName('html')[0].getAttribute('data-theme')=='dark'&&u(),window.requestAnimationFrame(t)}()};
dark()

引入CSS文件

在butterfly/source/css/创建一个universe.css文件。


/* 背景宇宙星光  */
#universe{
  display: block;
  position: fixed;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

插入css,js,canvas到inject中

打开Butterfly主题的_config.yml文件，找到配置文件对应的inject部分，插入<canvas id="universe"></canvas>，<link rel="stylesheet" href="/css/universe.css">， <script defer src="/js/universe.js"></script>到对应位置即可

注：unverse.css中的z-index根据实际情况调整，它影响着流星特效的层级，选择适合自己的即可。

效果参考自[Justlovesmile](https://blog.justlovesmile.top/posts/6a260bf6.html

在公告添加两个小人

在Butterfly/layout/includes/widget/card_announcement.pug下添加如下代码

 .xpand(style='height:200px;')
  canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;')
script(src='https://cdn.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople1.js')
script(src='https://cdn.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/zdog.dist.js')
script#rendered-js(src='https://cdn.jsdelivr.net/gh/xiaopengand/blogCdn@latest/xzxr/twopeople.js')
style.
  .card-widget.card-announcement {
  margin: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  }
  canvas {
  display: block;
  margin: 0 auto;
  cursor: move;
  }

巫师预加载动画

修改butterfly\layout\includes\loading\loading.pug，直接复制以下代码替换所有原代码。

if theme.preloader.enable
  #loading-box
    .loading-left-bg
    .loading-right-bg
    case theme.preloader.load_style
      when 'wizard'
        .wizard-scene
          .wizard-objects
            .wizard-square
            .wizard-circle
            .wizard-triangle
          .wizard
            .wizard-body
            .wizard-right-arm
              .wizard-right-hand
            .wizard-left-arm
              .wizard-left-hand
            .wizard-head
              .wizard-beard
              .wizard-face
                .wizard-adds
              .wizard-hat
                .wizard-hat-of-the-hat
                .wizard-four-point-star.--first
                .wizard-four-point-star.--second
                .wizard-four-point-star.--third
      when 'ironheart'
        .iron-container.iron-circle
          .iron-box1.iron-circle.iron-center
          .iron-box2.iron-circle.iron-center
          .iron-box3.iron-circle.iron-center
          .iron-box4.iron-circle.iron-center
          .iron-box5.iron-circle.iron-center
          .iron-box6.iron-circle
            .iron-coil(style='--i: 0')
            .iron-coil(style='--i: 1')
            .iron-coil(style='--i: 2')
            .iron-coil(style='--i: 3')
            .iron-coil(style='--i: 4')
            .iron-coil(style='--i: 5')
            .iron-coil(style='--i: 6')
            .iron-coil(style='--i: 7')
      when 'scarecrow'
        .scarecrow
          .scarecrow__hat
            .scarecrow__ribbon
          .scarecrow__head
            .scarecrow__eye
            .scarecrow__eye
            .scarecrow__mouth
            .scarecrow__pipe
          .scarecrow__body
            .scarecrow__glove.scarecrow__glove--l
            .scarecrow__sleeve.scarecrow__sleeve--l
            .scarecrow__bow
            .scarecrow__shirt
            .scarecrow__coat
            .scarecrow__waistcoat
            .scarecrow__sleeve.scarecrow__sleeve--r
            .scarecrow__glove.scarecrow__glove--r
            .scarecrow__coattails
            .scarecrow__pants
          .scarecrow__arms
          .scarecrow__leg   
      when 'image'
        - var loadimage = theme.preloader.load_image ? theme.preloader.load_image : theme.error_img.post_page
        img.load-image(src=url_for(loadimage) alt='')
      default
        .spinner-box
          .configure-border-1
            .configure-core
          .configure-border-2
            .configure-core
          .loading-word= _p('loading')

此处第一行的if用于判断preloader功能是否打开。下面的case和when则是根据配置项的内容加载指定的页面元素。default表示默认使用butterfly自带的旋转盒子动画。

修改butterfly\source\css\_layout\loading.styl，复制以下代码替换全部内容。

if hexo-config('preloader.enable')
  .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)

  if hexo-config('preloader.load_style') == 'wizard'
    #loading-box
      position fixed
      z-index 1000
      display -webkit-box
      display flex
      -webkit-box-align center
      align-items center
      -webkit-box-pack center
      justify-content center
      -webkit-box-orient vertical
      -webkit-box-direction normal
      flex-direction column
      flex-wrap wrap
      width 100vw
      height 100vh
      overflow hidden

      &.loaded
        .wizard-scene
          display none

    .wizard-scene
      position fixed
      z-index 1001
      display -webkit-box
      display flex

    .wizard
      position relative
      width 190px
      height 240px

    .wizard-body
      position absolute
      bottom 0
      left 68px
      height 100px
      width 60px
      background #3f64ce
      &::after
        content ""
        position absolute
        bottom 0
        left 20px
        height 100px
        width 60px
        background #3f64ce
        -webkit-transform skewX(14deg)
        transform skewX(14deg)

    .wizard-right-arm
      position absolute
      bottom 74px
      left 110px
      height 44px
      width 90px
      background #3f64ce
      border-radius 22px
      -webkit-transform-origin 16px 22px
      transform-origin 16px 22px
      -webkit-transform rotate(70deg)
      transform rotate(70deg)
      -webkit-animation right_arm 10s ease-in-out infinite
      animation right_arm 10s ease-in-out infinite
      .right-hand
        position absolute
        right 8px
        bottom 8px
        width 30px
        height 30px
        border-radius 50%
        background #f1c5b4
        -webkit-transform-origin center center
        transform-origin center center
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)
        -webkit-animation right_hand 10s ease-in-out infinite
        animation right_hand 10s ease-in-out infinite
      .wizard-right-hand
        &::after
          content ""
          position absolute
          right 0px
          top -8px
          width 15px
          height 30px
          border-radius 10px
          background #f1c5b4
          -webkit-transform translateY(16px)
          transform translateY(16px)
          -webkit-animation right_finger 10s ease-in-out infinite
          animation right_finger 10s ease-in-out infinite

    .wizard-left-arm
      position absolute
      bottom 74px
      left 26px
      height 44px
      width 70px
      background #3f64ce
      border-bottom-left-radius 8px
      -webkit-transform-origin 60px 26px
      transform-origin 60px 26px
      -webkit-transform rotate(-70deg)
      transform rotate(-70deg)
      -webkit-animation left_arm 10s ease-in-out infinite
      animation left_arm 10s ease-in-out infinite
      .wizard-left-hand
        position absolute
        left -18px
        top 0
        width 18px
        height 30px
        border-top-left-radius 35px
        border-bottom-left-radius 35px
        background #f1c5b4
        &::after
          content ""
          position absolute
          right 0
          top 0
          width 30px
          height 15px
          border-radius 20px
          background #f1c5b4
          -webkit-transform-origin right bottom
          transform-origin right bottom
          -webkit-transform scaleX(0)
          transform scaleX(0)
          -webkit-animation left_finger 10s ease-in-out infinite
          animation left_finger 10s ease-in-out infinite

    .wizard-head
      position absolute
      top 0
      left 14px
      width 160px
      height 210px
      -webkit-transform-origin center center
      transform-origin center center
      -webkit-transform rotate(-3deg)
      transform rotate(-3deg)
      -webkit-animation head 10s ease-in-out infinite
      animation head 10s ease-in-out infinite
      .wizard-beard
        position absolute
        bottom 0
        left 38px
        height 106px
        width 80px
        border-bottom-right-radius 55%
        background #ffffff
        &::after
          content ""
          position absolute
          top 16px
          left -10px
          width 40px
          height 20px
          border-radius 20px
          background #ffffff
      .wizard-face
        position absolute
        bottom 76px
        left 38px
        height 30px
        width 60px
        background #f1c5b4
        &::before
          content ""
          position absolute
          top 0px
          left 40px
          width 20px
          height 40px
          border-bottom-right-radius 20px
          border-bottom-left-radius 20px
          background #f1c5b4
        &::after
          content ""
          position absolute
          top 16px
          left -10px
          width 50px
          height 20px
          border-radius 20px
          border-bottom-right-radius 0px
          background #ffffff
        .wizard-adds
          position absolute
          top 0px
          left -10px
          width 40px
          height 20px
          border-radius 20px
          background #f1c5b4
          &::after
            content ""
            position absolute
            top 5px
            left 80px
            width 15px
            height 20px
            border-bottom-right-radius 20px
            border-top-right-radius 20px
            background #f1c5b4
      .wizard-hat
        position absolute
        bottom 106px
        left 0
        width 160px
        height 20px
        border-radius 20px
        background #3f64ce
        &::before
          content ""
          position absolute
          top -70px
          left 50%
          -webkit-transform translatex(-50%)
          transform translatex(-50%)
          width 0
          height 0
          border-style solid
          border-width 0 34px 70px 50px
          border-color transparent transparent #3f64ce transparent
        &::after
          content ""
          position absolute
          top 0
          left 0
          width 160px
          height 20px
          background #3f64ce
          border-radius 20px
        .wizard-hat-of-the-hat
          position absolute
          bottom 78px
          left 79px
          width 0
          height 0
          border-style solid
          border-width 0 25px 25px 19px
          border-color transparent transparent #3f64ce transparent
          &::after
            content ""
            position absolute
            top 6px
            left -4px
            width 35px
            height 10px
            border-radius 10px
            border-bottom-left-radius 0px
            background #3f64ce
            -webkit-transform rotate(40deg)
            transform rotate(40deg)
        .wizard-four-point-star
          position absolute
          width 12px
          height 12px
          &::after
            -webkit-transform rotate(156.66deg) skew(45deg)
            transform rotate(156.66deg) skew(45deg)
          &.--first
            bottom 28px
            left 46px
          &.--second
            bottom 40px
            left 80px
          &.--third
            bottom 15px
            left 108px

    .wizard-head .wizard-hat .wizard-four-point-star::after, .wizard-head .wizard-hat .wizard-four-point-star::before
      content ""
      position absolute
      background #ffffff
      display block
      left 0
      width 141.4213%
      top 0
      bottom 0
      border-radius 10%
      -webkit-transform rotate(66.66deg) skewX(45deg)
      transform rotate(66.66deg) skewX(45deg)

    .wizard-objects
      position relative
      width 200px
      height 240px

    .wizard-square
      position absolute
      bottom -60px
      left -5px
      width 120px
      height 120px
      border-radius 50%
      -webkit-transform rotate(-360deg)
      transform rotate(-360deg)
      -webkit-animation path_square 10s ease-in-out infinite
      animation path_square 10s ease-in-out infinite
      &::after
        content ""
        position absolute
        top 10px
        left 0
        width 50px
        height 50px
        background #9ab3f5

    .wizard-circle
      position absolute
      bottom 10px
      left 0
      width 100px
      height 100px
      border-radius 50%
      -webkit-transform rotate(-360deg)
      transform rotate(-360deg)
      -webkit-animation path_circle 10s ease-in-out infinite
      animation path_circle 10s ease-in-out infinite
      &::after
        content ""
        position absolute
        bottom -10px
        left 25px
        width 50px
        height 50px
        border-radius 50%
        background #c56183

    .wizard-triangle
      position absolute
      bottom -62px
      left -10px
      width 110px
      height 110px
      border-radius 50%
      -webkit-transform rotate(-360deg)
      transform rotate(-360deg)
      -webkit-animation path_triangle 10s ease-in-out infinite
      animation path_triangle 10s ease-in-out infinite
      &::after
        content ""
        position absolute
        top 0
        right -10px
        width 0
        height 0
        border-style solid
        border-width 0 28px 48px 28px
        border-color transparent transparent #89beb3 transparent


    /** 10s animation - 10% = 1s */
    @-webkit-keyframes right_arm
      0%
        -webkit-transform rotate(70deg)
        transform rotate(70deg)
      10%
        -webkit-transform rotate(8deg)
        transform rotate(8deg)
      15%
        -webkit-transform rotate(20deg)
        transform rotate(20deg)
      20%
        -webkit-transform rotate(10deg)
        transform rotate(10deg)
      25%
        -webkit-transform rotate(26deg)
        transform rotate(26deg)
      30%
        -webkit-transform rotate(10deg)
        transform rotate(10deg)
      35%
        -webkit-transform rotate(28deg)
        transform rotate(28deg)
      40%
        -webkit-transform rotate(9deg)
        transform rotate(9deg)
      45%
        -webkit-transform rotate(28deg)
        transform rotate(28deg)
      50%
        -webkit-transform rotate(8deg)
        transform rotate(8deg)
      58%
        -webkit-transform rotate(74deg)
        transform rotate(74deg)
      62%
        -webkit-transform rotate(70deg)
        transform rotate(70deg)

    @keyframes right_arm
      0%
        -webkit-transform rotate(70deg)
        transform rotate(70deg)
      10%
        -webkit-transform rotate(8deg)
        transform rotate(8deg)
      15%
        -webkit-transform rotate(20deg)
        transform rotate(20deg)
      20%
        -webkit-transform rotate(10deg)
        transform rotate(10deg)
      25%
        -webkit-transform rotate(26deg)
        transform rotate(26deg)
      30%
        -webkit-transform rotate(10deg)
        transform rotate(10deg)
      35%
        -webkit-transform rotate(28deg)
        transform rotate(28deg)
      40%
        -webkit-transform rotate(9deg)
        transform rotate(9deg)
      45%
        -webkit-transform rotate(28deg)
        transform rotate(28deg)
      50%
        -webkit-transform rotate(8deg)
        transform rotate(8deg)
      58%
        -webkit-transform rotate(74deg)
        transform rotate(74deg)
      62%
        -webkit-transform rotate(70deg)
        transform rotate(70deg)

    @-webkit-keyframes left_arm
      0%
        -webkit-transform rotate(-70deg)
        transform rotate(-70deg)
      10%
        -webkit-transform rotate(6deg)
        transform rotate(6deg)
      15%
        -webkit-transform rotate(-18deg)
        transform rotate(-18deg)
      20%
        -webkit-transform rotate(5deg)
        transform rotate(5deg)
      25%
        -webkit-transform rotate(-18deg)
        transform rotate(-18deg)
      30%
        -webkit-transform rotate(5deg)
        transform rotate(5deg)
      35%
        -webkit-transform rotate(-17deg)
        transform rotate(-17deg)
      40%
        -webkit-transform rotate(5deg)
        transform rotate(5deg)
      45%
        -webkit-transform rotate(-18deg)
        transform rotate(-18deg)
      50%
        -webkit-transform rotate(6deg)
        transform rotate(6deg)
      58%
        -webkit-transform rotate(-74deg)
        transform rotate(-74deg)
      62%
        -webkit-transform rotate(-70deg)
        transform rotate(-70deg)

    @keyframes left_arm
      0%
        -webkit-transform rotate(-70deg)
        transform rotate(-70deg)
      10%
        -webkit-transform rotate(6deg)
        transform rotate(6deg)
      15%
        -webkit-transform rotate(-18deg)
        transform rotate(-18deg)
      20%
        -webkit-transform rotate(5deg)
        transform rotate(5deg)
      25%
        -webkit-transform rotate(-18deg)
        transform rotate(-18deg)
      30%
        -webkit-transform rotate(5deg)
        transform rotate(5deg)
      35%
        -webkit-transform rotate(-17deg)
        transform rotate(-17deg)
      40%
        -webkit-transform rotate(5deg)
        transform rotate(5deg)
      45%
        -webkit-transform rotate(-18deg)
        transform rotate(-18deg)
      50%
        -webkit-transform rotate(6deg)
        transform rotate(6deg)
      58%
        -webkit-transform rotate(-74deg)
        transform rotate(-74deg)
      62%
        -webkit-transform rotate(-70deg)
        transform rotate(-70deg)

    @-webkit-keyframes right_hand
      0%
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)
      10%
        -webkit-transform rotate(-20deg)
        transform rotate(-20deg)
      15%
        -webkit-transform rotate(-5deg)
        transform rotate(-5deg)
      20%
        -webkit-transform rotate(-60deg)
        transform rotate(-60deg)
      25%
        -webkit-transform rotate(0deg)
        transform rotate(0deg)
      30%
        -webkit-transform rotate(-60deg)
        transform rotate(-60deg)
      35%
        -webkit-transform rotate(0deg)
        transform rotate(0deg)
      40%
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)
      45%
        -webkit-transform rotate(-60deg)
        transform rotate(-60deg)
      50%
        -webkit-transform rotate(10deg)
        transform rotate(10deg)
      60%
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)


    @keyframes right_hand
      0%
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)
      10%
        -webkit-transform rotate(-20deg)
        transform rotate(-20deg)
      15%
        -webkit-transform rotate(-5deg)
        transform rotate(-5deg)
      20%
        -webkit-transform rotate(-60deg)
        transform rotate(-60deg)
      25%
        -webkit-transform rotate(0deg)
        transform rotate(0deg)
      30%
        -webkit-transform rotate(-60deg)
        transform rotate(-60deg)
      35%
        -webkit-transform rotate(0deg)
        transform rotate(0deg)
      40%
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)
      45%
        -webkit-transform rotate(-60deg)
        transform rotate(-60deg)
      50%
        -webkit-transform rotate(10deg)
        transform rotate(10deg)
      60%
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)

    @-webkit-keyframes right_finger
      0%
        -webkit-transform translateY(16px)
        transform translateY(16px)
      10%
        -webkit-transform none
        transform none
      50%
        -webkit-transform none
        transform none
      60%
        -webkit-transform translateY(16px)
        transform translateY(16px)

    @keyframes right_finger
      0%
        -webkit-transform translateY(16px)
        transform translateY(16px)
      10%
        -webkit-transform none
        transform none
      50%
        -webkit-transform none
        transform none
      60%
        -webkit-transform translateY(16px)
        transform translateY(16px)

    @-webkit-keyframes left_finger
      0%
        -webkit-transform scaleX(0)
        transform scaleX(0)
      10%
        -webkit-transform scaleX(1) rotate(6deg)
        transform scaleX(1) rotate(6deg)
      15%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      20%
        -webkit-transform scaleX(1) rotate(8deg)
        transform scaleX(1) rotate(8deg)
      25%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      30%
        -webkit-transform scaleX(1) rotate(7deg)
        transform scaleX(1) rotate(7deg)
      35%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      40%
        -webkit-transform scaleX(1) rotate(5deg)
        transform scaleX(1) rotate(5deg)
      45%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      50%
        -webkit-transform scaleX(1) rotate(6deg)
        transform scaleX(1) rotate(6deg)
      58%
        -webkit-transform scaleX(0)
        transform scaleX(0)

    @keyframes left_finger
      0%
        -webkit-transform scaleX(0)
        transform scaleX(0)
      10%
        -webkit-transform scaleX(1) rotate(6deg)
        transform scaleX(1) rotate(6deg)
      15%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      20%
        -webkit-transform scaleX(1) rotate(8deg)
        transform scaleX(1) rotate(8deg)
      25%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      30%
        -webkit-transform scaleX(1) rotate(7deg)
        transform scaleX(1) rotate(7deg)
      35%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      40%
        -webkit-transform scaleX(1) rotate(5deg)
        transform scaleX(1) rotate(5deg)
      45%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      50%
        -webkit-transform scaleX(1) rotate(6deg)
        transform scaleX(1) rotate(6deg)
      58%
        -webkit-transform scaleX(0)
        transform scaleX(0)

    @-webkit-keyframes head
      0%
        -webkit-transform rotate(-3deg)
        transform rotate(-3deg)
      10%
        -webkit-transform translatex(10px) rotate(7deg)
        transform translatex(10px) rotate(7deg)
      50%
        -webkit-transform translatex(0px) rotate(0deg)
        transform translatex(0px) rotate(0deg)
      56%
        -webkit-transform rotate(-3deg)
        transform rotate(-3deg)

    @keyframes head
      0%
        -webkit-transform rotate(-3deg)
        transform rotate(-3deg)
      10%
        -webkit-transform translatex(10px) rotate(7deg)
        transform translatex(10px) rotate(7deg)
      50%
        -webkit-transform translatex(0px) rotate(0deg)
        transform translatex(0px) rotate(0deg)
      56%
        -webkit-transform rotate(-3deg)
        transform rotate(-3deg)
    /** 10s animation - 10% = 1s */
    @-webkit-keyframes path_circle
      0%
        -webkit-transform translateY(0)
        transform translateY(0)
      10%
        -webkit-transform translateY(-100px) rotate(-5deg)
        transform translateY(-100px) rotate(-5deg)
      55%
        -webkit-transform translateY(-100px) rotate(-360deg)
        transform translateY(-100px) rotate(-360deg)
      58%
        -webkit-transform translateY(-100px) rotate(-360deg)
        transform translateY(-100px) rotate(-360deg)
      63%
        -webkit-transform rotate(-360deg)
        transform rotate(-360deg)

    @keyframes path_circle
      0%
        -webkit-transform translateY(0)
        transform translateY(0)
      10%
        -webkit-transform translateY(-100px) rotate(-5deg)
        transform translateY(-100px) rotate(-5deg)
      55%
        -webkit-transform translateY(-100px) rotate(-360deg)
        transform translateY(-100px) rotate(-360deg)
      58%
        -webkit-transform translateY(-100px) rotate(-360deg)
        transform translateY(-100px) rotate(-360deg)
      63%
        -webkit-transform rotate(-360deg)
        transform rotate(-360deg)

    @-webkit-keyframes path_square
      0%
        -webkit-transform translateY(0)
        transform translateY(0)
      10%
        -webkit-transform translateY(-155px) translatex(-15px) rotate(10deg)
        transform translateY(-155px) translatex(-15px) rotate(10deg)
      55%
        -webkit-transform translateY(-155px) translatex(-15px) rotate(-350deg)
        transform translateY(-155px) translatex(-15px) rotate(-350deg)
      57%
        -webkit-transform translateY(-155px) translatex(-15px) rotate(-350deg)
        transform translateY(-155px) translatex(-15px) rotate(-350deg)
      63%
        -webkit-transform rotate(-360deg)
        transform rotate(-360deg)

    @keyframes path_square
      0%
        -webkit-transform translateY(0)
        transform translateY(0)
      10%
        -webkit-transform translateY(-155px) translatex(-15px) rotate(10deg)
        transform translateY(-155px) translatex(-15px) rotate(10deg)
      55%
        -webkit-transform translateY(-155px) translatex(-15px) rotate(-350deg)
        transform translateY(-155px) translatex(-15px) rotate(-350deg)
      57%
        -webkit-transform translateY(-155px) translatex(-15px) rotate(-350deg)
        transform translateY(-155px) translatex(-15px) rotate(-350deg)
      63%
        -webkit-transform rotate(-360deg)
        transform rotate(-360deg)

    @-webkit-keyframes path_triangle
      0%
        -webkit-transform translateY(0)
        transform translateY(0)
      10%
        -webkit-transform translateY(-172px) translatex(10px) rotate(-10deg)
        transform translateY(-172px) translatex(10px) rotate(-10deg)
      55%
        -webkit-transform translateY(-172px) translatex(10px) rotate(-365deg)
        transform translateY(-172px) translatex(10px) rotate(-365deg)
      58%
        -webkit-transform translateY(-172px) translatex(10px) rotate(-365deg)
        transform translateY(-172px) translatex(10px) rotate(-365deg)
      63%
        -webkit-transform rotate(-360deg)
        transform rotate(-360deg)

    @keyframes path_triangle
      0%
        -webkit-transform translateY(0)
        transform translateY(0)
      10%
        -webkit-transform translateY(-172px) translatex(10px) rotate(-10deg)
        transform translateY(-172px) translatex(10px) rotate(-10deg)
      55%
        -webkit-transform translateY(-172px) translatex(10px) rotate(-365deg)
        transform translateY(-172px) translatex(10px) rotate(-365deg)
      58%
        -webkit-transform translateY(-172px) translatex(10px) rotate(-365deg)
        transform translateY(-172px) translatex(10px) rotate(-365deg)
      63%
        -webkit-transform rotate(-360deg)
        transform rotate(-360deg)
  else if hexo-config('preloader.load_style') == 'ironheart'
    #loading-box
      position fixed
      z-index 1000
      display -webkit-box
      display flex
      -webkit-box-align center
      align-items center
      -webkit-box-pack center
      justify-content center
      -webkit-box-orient vertical
      -webkit-box-direction normal
      flex-direction column
      flex-wrap wrap
      width 100vw
      height 100vh
      overflow hidden

      &.loaded
        .iron-container
          display none

      .iron-circle
        border-radius 50%

      .iron-center
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)

      .iron-container
        z-index 1001
        position relative
        width 300px
        height 300px
        border 1px solid rgb(18, 20, 20)
        background-color #384c50
        box-shadow 0 0 32px 8px rgb(18, 20, 20), 0 0 4px 1px rgb(18, 20, 20) inset
        .iron-box1
          width 238px
          height 238px
          background-color rgb(22, 26, 27)
          box-shadow 0 0 4px 1px #52fefe
        .iron-box2
          width 220px
          height 220px
          background-color #fff
          box-shadow 0 0 5px 1px #52fefe, 0 0 5px 4px #52fefe inset
        .iron-box3
          width 180px
          height 180px
          background-color #073c4b
          box-shadow 0 0 5px 4px #52fefe, 0 0 6px 2px #52fefe inset
        .iron-box4
          width 120px
          height 120px
          border 1px solid #52fefe
          background-color #fff
          box-shadow 0 0 2px 1px #52fefe, 0 0 10px 5px #52fefe inset
        .iron-box5
          width 70px
          height 70px
          border 5px solid #1b4e5f
          box-shadow 0 0 7px 5px #52fefe, 0 0 10px 10px #52fefe inset
        .iron-box6
          position relative
          width 100%
          height 100%
          animation ironrotate 3s linear infinite
          .iron-coil
            position absolute
            width 30px
            height 20px
            top calc(50% - 110px)
            left calc(50% - 15px)
            background-color #073c4b
            box-shadow 0 0 5px #52fefe inset
            transform rotate(calc(var(--i) * 45deg))
            transform-origin center 110px
    @keyframes ironrotate
    	0%
    		transform rotate(0)
    	100%
    		transform rotate(360deg)

  else if hexo-config('preloader.load_style') == 'scarecrow'
    #loading-box
      position fixed
      z-index 1000
      display -webkit-box
      display flex
      -webkit-box-align center
      align-items center
      -webkit-box-pack center
      justify-content center
      -webkit-box-orient vertical
      -webkit-box-direction normal
      flex-direction column
      flex-wrap wrap
      width 100vw
      height 100vh
      overflow hidden
      &.loaded
        .scarecrow
          display none
      .scarecrow
        z-index 1001
        position relative
        animation hop 0.2s ease-in alternate infinite

      .scarecrow__hat
        position relative
        border-top-left-radius 5px
        border-top-right-radius 5px
        border-top 45px solid #515559
        border-left 1px solid transparent
        border-right 1px solid transparent
        width 55px
        margin 0 auto -3px
        z-index 1
        &:before
          content ""
          position absolute
          top -87px
          right -23px
          background-color #515559
          width 9px
          height 55px
          border-radius 100%
          transform rotate(50deg)
        &:after
          content ""
          position absolute
          top 12px
          left -15px
          background-color #515559
          width 85px
          height 10px
          border-radius 40% 40% 70% 70%

      .scarecrow__ribbon
        width 55px
        height 12px
        background-color #d996b5
        margin 0 auto

      .scarecrow__head
        position relative
        background-color #f2f2f2
        width 70px
        height 55px
        margin 0 auto
        border-radius 50%
        display flex
        justify-content space-around
        flex-flow row wrap

      .scarecrow__eye
        width 6px
        height 6px
        background-color #000
        border-radius 50%
        margin 20px 5px 0

      .scarecrow__mouth
        width 45px
        height 15px
        background-color #fff
        border-radius 50%

      .scarecrow__pipe
        position absolute
        top 40px
        left 60px
        width 40px
        height 2px
        background-color #8c8070
        &:before
          content ""
          position absolute
          width 9px
          height 17px
          background-color #8c8070
          border-radius 3px
          left 40px
          top -7px

      .scarecrow__body
        position relative
        width 250px
        z-index 1

      .scarecrow__coat
        position absolute
        top 15px
        left 0
        right 0
        margin-left auto
        margin-right auto
        border-top 100px solid #515559
        border-left 5px solid transparent
        border-right 5px solid transparent
        width 75px

      .scarecrow__bow
        position absolute
        top 20px
        left 0
        right 0
        margin-left auto
        margin-right auto
        background-color #3a485d
        width 10px
        height 10px
        z-index 3
        border-radius 2px
        &:before
          content ""
          position absolute
          top -10px
          left -25px
          width 0
          height 10px
          border-top 10px solid transparent
          border-left 25px solid #5a6b8c
          border-bottom 10px solid transparent
          border-radius 8px
        &:after
          content ""
          position absolute
          top -10px
          right -25px
          width 0
          height 10px
          border-top 10px solid transparent
          border-right 25px solid #5a6b8c
          border-bottom 10px solid transparent
          border-radius 8px

      .scarecrow__shirt
        position absolute
        top 8px
        left 0
        right 0
        margin-left auto
        margin-right auto
        width 30px
        height 35px
        z-index 2
        &:before
          content ""
          position absolute
          top 0
          left -5px
          height 100%
          width 70%
          background-color #dbb2c2
          transform skew(1deg, 35deg)
          border-bottom-left-radius 90px
          border-top-left-radius 15px
          border-bottom-right-radius 15px
          border-top-right-radius 10px
        &:after
          content ""
          position absolute
          top 0
          right -5px
          height 100%
          width 70%
          background-color #dbb2c2
          transform skew(-1deg, -35deg)
          border-top-right-radius 15px
          border-bottom-right-radius 90px
          border-bottom-left-radius 15px
          border-top-left-radius 10px

      .scarecrow__waistcoat
        position absolute
        top 15px
        left -1px
        right 0
        margin-left auto
        margin-right auto
        width 35px
        height 50px
        &:before
          content ""
          position absolute
          top 0
          left -4px
          height 100%
          width 65%
          background-color #83a6bc
          transform skew(0deg, 40deg)
          border-bottom-left-radius 90px
          border-top-left-radius 90px
          border-bottom-right-radius 15px
        &:after
          content ""
          position absolute
          top 0
          right -5px
          height 100%
          width 65%
          background-color #83a6bc
          transform skew(0deg, -40deg)
          border-top-right-radius 90px
          border-bottom-right-radius 90px
          border-bottom-left-radius 15px

      .scarecrow__coattails
        position absolute
        top 105px
        left 0
        right 0
        margin-left auto
        margin-right auto
        width 75px
        height 120px
        z-index 1
        &:before
          content ""
          position absolute
          top 0
          left 8px
          height 100%
          width 60%
          background-color #515559
          transform-origin top
          transform skew(-25deg, 30deg) rotate(0deg)
          border-bottom-left-radius 50px
          border-bottom-right-radius 5px
          animation coattails-left 0.2s ease-in alternate infinite
        &:after
          content ""
          position absolute
          top 0
          right 8px
          height 100%
          width 60%
          background-color #515559
          transform-origin top
          transform skew(25deg, -30deg) rotate(0deg)
          border-bottom-right-radius 50px
          border-bottom-left-radius 5px
          animation coattails-right 0.2s ease-in alternate infinite

      .scarecrow__pants
        position absolute
        top 115px
        left 0
        right 0
        margin-left auto
        margin-right auto
        width 50px
        height 150px
        &:before
          content ""
          position absolute
          top 0
          left -8px
          height 100%
          width 60%
          background-color #393c3e
          transform rotate(0deg)
          transform-origin top
          animation pants 0.5s linear alternate infinite
        &:after
          content ""
          position absolute
          top 0
          right -8px
          height 100%
          width 60%
          background-color #393c3e
          transform rotate(0deg)
          transform-origin top
          animation pants 0.3s linear alternate infinite

      .scarecrow__sleeve
        position absolute
        top 15px
        background-color #515559
        width 80px
        height 25px

      .scarecrow__sleeve--l
        left 10px
        &:before
          content ""
          position absolute
          top -3px
          left -22px
          width 0
          height 25px
          border-top 3px solid transparent
          border-left 25px solid #515559
          border-bottom 3px solid transparent
          border-radius 3px

      .scarecrow__sleeve--r
        right 10px
        &:before
          content ""
          position absolute
          top -3px
          right -22px
          width 0
          height 25px
          border-top 3px solid transparent
          border-right 25px solid #515559
          border-bottom 3px solid transparent
          border-radius 3px

      .scarecrow__glove
        position absolute
        top 12px
        width 0px
        height 12px
        &:before
          content ""
          position absolute
          top -7px
          border-radius 100%
          background-color #f2f2f2
          width 35px
          height 15px

      .scarecrow__glove--l
        border-top 3px solid transparent
        border-right 20px solid #f2f2f2
        border-bottom 3px solid transparent
        left -50px
        &:before
          transform-origin right
          left -30px
          transform rotate(0deg)
          animation glove-l 0.2s linear alternate infinite

      .scarecrow__glove--r
        border-top 3px solid transparent
        border-left 20px solid #f2f2f2
        border-bottom 3px solid transparent
        right -50px
        &:before
          transform-origin left
          right -30px
          transform rotate(0deg)
          animation glove-r 0.2s linear alternate infinite

      .scarecrow__arms
        position absolute
        left 50%
        transform translate(-50%, -50%)
        background-color #8c8070
        width 350px
        height 8px
        border-radius 5px
        margin 20px auto

      .scarecrow__leg
        position relative
        background-color #8c8070
        width 8px
        height 380px
        border-bottom-left-radius 5px
        border-bottom-right-radius 5px
        margin 0 auto

    @keyframes hop
      0%
        transform translateY(-10px)
      100%
        transform translateY(10px)

    @keyframes coattails-left
      0%
        transform skew(-25deg, 30deg) rotate(-3deg)
      100%
        transform skew(-25deg, 30deg) rotate(3deg)

    @keyframes coattails-right
      0%
        transform skew(25deg, -30deg) rotate(3deg)
      100%
        transform skew(25deg, -30deg) rotate(-3deg)

    @keyframes pants
      0%
        transform rotate(3deg)
      100%
        transform rotate(-3deg)

    @keyframes glove-l
      0%
        transform rotate(-50deg)
      100%
        transform rotate(-30deg)

    @keyframes glove-r
      0%
        transform rotate(50deg)
      100%
        transform rotate(30deg)
  else if hexo-config('preloader.load_style') == 'image'
    #loading-box
      position fixed
      z-index 1000
      display -webkit-box
      display flex
      -webkit-box-align center
      align-items center
      -webkit-box-pack center
      justify-content center
      -webkit-box-orient vertical
      -webkit-box-direction normal
      flex-direction column
      flex-wrap wrap
      width 100vw
      height 100vh
      overflow hidden

      .load-image
        position fixed
        z-index 1001
        display flex

      &.loaded
        .load-image
          display none
  else
    #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 .8rem

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

修改butterfly\layout\includes\layout.pug。

butterfly_v3.0.0-v3.5.1

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

butterfly_v3.6.0+

    body
-     if theme.preloader
+     if theme.preloader.enable
        !=partial('includes/loading/loading', {}, {cache: true})

修改butterfly\source\css\var.styl。

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

修改[Blogroot]\_config.butterfly.yml的preloader配置项。

    # Loading Animation (加載動畫)
-   preloader: true
+   preloader:
+     enable: true # true|false
+     load_color: '#000000' # '#37474f'
+     load_style: wizard # # spinner-box|wizard|ironheart|scarecrow|image
+     load_image:  # url

配置项参数说明：

enable：控制加载动画的开关，取值有true和false，true开启，false关闭。
load_color：该配置项为自定义加载动画背景颜色。默认值为#37474f,使用时注意用’’包起来，不然会被识别成注释符。这个配置项最大的作用是配合load_image使用的图片的背景色，可以用取色器提取自定义图片的主要色调，以达到图片和背景融为一体的效果。
load_style：控制加载动画的样式，目前提供三种类型。
- spinner-box是主题原版的盒子加载动画
- wizard是巫师施法加载动画
- ironheart是钢铁侠核心加载动画
- scarecrow是稻草人跳动加载动画
- image为自定义添加静态图片或gif作为加载动画。
load_image：该配置项的生效前提是load_style设置为image,内容填写图床链接或者本地相对地址。

补充说明

如果出现预加载动画无限施法的情况下，在butterfly/includes/loading-js.pug下添加如下代码以打断施法。

window.addEventListener('load',()=> {preloader.endLoading()})
  setTimeout(function(){preloader.endLoading();}, 200);

之所以会出现线上无限加载，是因为线上加载资源是从你的服务器或者部署托管站点拉取资源，和网速有很大关系，当加载超时的时候，浏览器不再请求重新加载，而关闭动画的方法迟迟等不到资源加载完毕的信号，所以就会出现卡加载动画的现象。

参考来源Akilarの糖果屋

在线聊天功能

屏幕移到下方可以看到这个图标，点击一下就可以和我聊天啦！

插入方法

插入方法很简单，基于butterfly主题的强大，内置了多种在线聊天工具，这里我选择的是crisp。几步就可以完成。

# crisp
# https://crisp.chat/en/
crisp:
  enable: false
  website_id: xxxxxxxx

找到website_id。打开crisp并注册账号。
按照以下步骤找到网站id并贴入yml中，将enable改成true即可

在里面也可以调整聊天框的外观和行为，根据个人需要即可

就先到这里，后续有添加再更新…

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

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

css

canvas

javascript

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

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

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

css

canvas

javascript