加载动画结语
Hexo是一款快速、简洁且高效的静态博客框架,它的加载页是展示个人品牌和风格的重要组成部分。通过定制加载页,你可以为你的网站增添个性化的风格,提升用户体验,以及传达特定的信息。
本文以本站使用的主题 anzhiyu
为例,在本教程中,我们将深入探讨如何更换Hexo加载页,从简单的概念到具体的实施步骤,帮助你轻松地定制属于自己的加载页。
加载页的作用:加载页是指在网页加载完成之前显示的页面,通常用于展示品牌标识、加载进度和欢迎信息。它不仅可以提升用户体验,还可以传达网站的特色和个性。
加载页设计的考虑因素:在定制加载页时,需要考虑网站的整体风格和目标受众。加载页应该与主题风格一致,同时尽量简洁明了,以保持用户的注意力和耐心。
原教程中使用的是butterfly
主题,本教程将以anzhiyu
的格式进行更改,在此,感谢SNTube Studio 整合并提供了详细的配置教程
首页加载预览效果请观看主页
1. 新建文件
themes/anzhiyu/layout/includes/loading/
里,新建文件catloader.pug
,内容如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 #loading-box .cat__scene .cat__main .cat__body .cat__body .cat__tail .cat__head script. const preloader = { endLoading: () => { var loadingBox = document.getElementById('loading-box'); var loadingBoxme = document.getElementById('loading-box-me'); loadingBoxme.addEventListener('animationend', () => {setTimeout(function() {loadingBox.classList.add("loaded");}, 2000) }) }, initLoading: () => { document.getElementById('loading-box').classList.remove("loaded") }, otherendLoading: () => { document.getElementById('loading-box').classList.add("loaded") } } window.addEventListener('load',()=> { preloader.endLoading() }) setTimeout(function(){preloader.otherendLoading();},5000) if (!{theme.pjax && theme.pjax.enable}) { document.addEventListener('pjax:send', () => { preloader.initLoading() }) document.addEventListener('pjax:complete', () => { preloader.otherendLoading() }) }
2. 修改 index.pug
找到themes/anzhiyu/layout/includes/loading/
的index.pug
文件,并替换文件内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if theme.preloader.source === 1 include ./fullpage-loading.pug else if theme.preloader.source === 2 include ./pace.pug else if theme.preloader.source === 3 include ./fullpage-loading.pug include ./pace.pug else if theme.preloader.source === 4 include ./catloader.pug else if theme.preloader.source === 5 include ./catloader.pug include ./pace.pug else include ./fullpage-loading.pug include ./pace.pug
3. 修改 loading.styl
找到themes/anzhiyu/source/css/_global/
,拷贝一份loading.styl
并重命名为default.styl
为了便于后续管理,在此目录下新建load_style
文件夹,将default.styl
放入load_style
文件夹中
修改loading.styl
文件,并替换以下内容
1 2 3 4 5 6 7 8 9 10 11 12 13 if hexo-config ('preloader.enable' ) if hexo-config ('preloader.source' ) == '1' @import './load_style/default' else if hexo-config ('preloader.source' ) == '2' @import './load_style/default' else if hexo-config ('preloader.source' ) == '3' @import './load_style/default' else if hexo-config ('preloader.source' ) == '4' @import './load_style/catloader' else if hexo-config ('preloader.source' ) == '5' @import './load_style/catloader' else @import './load_style/default'
4. 在 load_style
下新建 catloader.styl
友情提示load_style
目录是我们上一步新建的
找到themes/anzhiyu/source/css/_global/load_style/
并新建一个catloader.styl
,内容如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 #loading-box position fixed z-index 1000 width 100vw height 100vh overflow hidden text-align center display : flex; flex-direction : column; min-height : 100% ; margin : 0 ; line-height : 1.4 ; &.loaded z-index -1000 .cat__scene display none .cat__scene display flex flex 1 flex-direction column justify-content flex-start justify-content center align-items center background-color #e6dcdc .cat__main position relative width 100% max-width 20em overflow hidden background-color #e6dcdc &::before content "" display block padding-bottom 100% &:hover & > * -webkit-animation-play-state paused animation-play-state paused &:active & > * -webkit-animation-play-state running animation-play-state running .cat__body , .cat__tail , .cat__head position absolute top 0 left 0 right 0 bottom 0 -webkit-animation cat__rotating 2.79s cubic-bezier (0.65 , 0.54 , 0.12 , 0.93 ) infinite animation cat__rotating 2.79s cubic-bezier (0.65 , 0.54 , 0.12 , 0.93 ) infinite .cat__body ::before , .cat__tail ::before , .cat__head ::before content "" position absolute width 50% height 50% background-size 200% background-repeat no-repeat background-image url ("https://images.weserv.nl/?url=i.imgur.com/M1raXX3.png&il" ) .cat__head &::before top 0 right 0 background-position 100% 0% transform-origin 0% 100% transform rotate (90deg ) .cat__tail -webkit-animation-delay 0.2s animation-delay 0.2s &::before left 0 bottom 0 background-position 0% 100% transform-origin 100% 0% transform rotate (-30deg ) .cat__body -webkit-animation-delay 0.1s animation-delay 0.1s &:nth-of-type (2 ) -webkit-animation-delay 0.2s animation-delay 0.2s &::before right 0 bottom 0 background-position 100% 100% transform-origin 0% 0% @-webkit-keyframes cat__rotating { from { transform : rotate (720deg ); } to { transform : none; } } @keyframes cat__rotating { from { transform : rotate (720deg ); } to { transform : none; } }
5. 修改主题配置文件
preloader
修改说明和选择新样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 # Loading Animation (加载动画) preloader: enable: true # source # 1. fullpage-loading(default) # 2. pace (progress bar) # 3. fullpage-loading + pace # 4. fullpage-loading(clickenter) # 5. fullpage-loading(clickenter) + pace # else fullpage-loading + pace source: 4 # pace theme (see https://codebyzach.github.io/pace/) pace_css_url: avatar: # 自定义头像
6. 这个时候,如果你的文件配置正确,可以执行Hexo的三连命令来查看效果了! 1 hexo clean; hexo g; hexo s
教程参考资料
【Hexo博客】自定义Butterfly主题 Loading 加载动画百里飞洋
自定义加载动画魔改方案,Akilarの糖果屋