Butterfly主题美化
添加星空背景
新建js文件
在butterfly/source/js/创建一个universe.js文件。
1 | 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)}()}; |
引入CSS文件
在butterfly/source/css/创建一个universe.css文件。
1 |
|
插入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下添加如下代码
1 | .xpand(style='height:200px;') |
巫师预加载动画
- 修改
butterfly\layout\includes\loading\loading.pug，直接复制以下代码替换所有原代码。
1 | if theme.preloader.enable |
此处第一行的if用于判断preloader功能是否打开。下面的case和when则是根据配置项的内容加载指定的页面元素。default表示默认使用butterfly自带的旋转盒子动画。
- 修改
butterfly\source\css\_layout\loading.styl，复制以下代码替换全部内容。
1 | if hexo-config('preloader.enable') |
- 修改
butterfly\layout\includes\layout.pug。
- butterfly_v3.0.0-v3.5.1
1 | body |
- butterfly_v3.6.0+
1 | body |
- 修改
butterfly\source\css\var.styl。
1 | // preloader |
- 修改
[Blogroot]\_config.butterfly.yml的preloader配置项。
1 | # Loading Animation (加載動畫) |
配置项参数说明：
- 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下添加如下代码以打断施法。
1 | window.addEventListener('load',()=> {preloader.endLoading()}) |
- 之所以会出现线上无限加载，是因为线上加载资源是从你的服务器或者部署托管站点拉取资源，和网速有很大关系，当加载超时的时候，浏览器不再请求重新加载，而关闭动画的方法迟迟等不到资源加载完毕的信号，所以就会出现卡加载动画的现象。
参考来源Akilarの糖果屋
在线聊天功能
屏幕移到下方可以看到这个图标，点击一下就可以和我聊天啦！
插入方法
- 插入方法很简单，基于butterfly主题的强大，内置了多种在线聊天工具，这里我选择的是crisp。几步就可以完成。
1 | # crisp |
- 找到website_id。打开crisp并注册账号。
- 按照以下步骤找到网站id并贴入yml中，将enable改成true即可
在里面也可以调整聊天框的外观和行为，根据个人需要即可
就先到这里，后续有添加再更新…
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 JnyLife！
评论
简介
博主22届本科毕业，前端攻城狮，在这里分享知识与日常总结。
我的技术栈：
我的技术栈：
