if theme.preloader.enable case theme.preloader.load_style when 'gear' include ./load_style/gear.pug when 'ironheart' include ./load_style/ironheart.pug when 'scarecrow' include ./load_style/scarecrow.pug when 'triangles' include ./load_style/triangles.pug when 'wizard' include ./load_style/wizard.pug when 'image' include ./load_style/image.pug default include ./load_style/default.pug
.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 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
if theme.preloader.source === 1 include ./fullpage-loading.pug else if theme.preloader.source === 2 include ./pace.pug else include ./fullpage-loading.pug include ./pace.pug
# Loading Animation (加载动画) preloader: enable: true # source # 1. fullpage-loading # 2. pace (progress bar) # else all source: 3 # pace theme (see https://codebyzach.github.io/pace/) pace_css_url: https://fastly.jsdelivr.net/gh/xlenco/JS-X@main/pace.js/pace.css
动态文字
在文件_config.butterfly.yml中的subtitle下面加文字就行
基本操作
更新
1 2 3 4 5 6 7 8
hexo clean
hexo generate (若要本地预览就先执行 hexo server)
hexo deploy 组合： hexo clean && hexo g && hexo d
快捷命令
1 2 3 4 5
hexo c == hexo clean # 清除缓存 hexo g == hexo generate # 生成静态文件 hexo d == hexo deploy # 部署到github中，更新网页端的内容 hexo s == hexo server # 通过启动本地服务器，预览文章效果 hexo n == hexo new
