博客魔改教程总结(一) | Fomalhaut🥝

注： 该效果仅在dark mode下生效。

  1. 在[BlogRoot]/source/js目录下新建universe.js，输入以下代码：
1
2
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()
  1. 在[BlogRoot]/source/css目录下新建universe.css，输入以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 背景宇宙星光  */  
#universe{  
  display: block;  
  position: fixed;  
  margin: 0;  
  padding: 0;  
  border: 0;  
  outline: 0;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: 100%;  
  pointer-events: none;  
  /* 这个是调置顶的优先级的，-1在文章页下面，背景上面，个人推荐这种 */  
  z-index: -1;  
}
  1. 在主题配置文件_config.butterfly.yml的inject配置项下填入：
1
2
3
4
5
6
inject:
  head:  
   - <link rel="stylesheet" href="/css/universe.css">  
  bottom:  
   - <canvas id="universe"></canvas>  
   - <script defer src="/js/universe.js"></script>
  1. 重新编译即可看到效果。