前言

昨天逛博客的时候发现一个夜间模式的星空效果,看着很不错,然后我就借鉴了一下(老借鉴人了)。
具体效果你可以直接打开我网站的夜间模式,注意,我设置了手机端不显示,只能电脑查看。

本文适用butterfly主题,其他主题自行修改代码。

正文

其实扒的过程很简单,一个个删除元素,很快就定位到了代码。
js和css文件创建和引入问题看这篇文章:Hexo博客添加自定义css和js文件

创建js文件

首先我们先在source/js(没有此文件夹的直接创建,更新主题不会覆盖掉)下新建一个js文件,命名为universe.js,然后粘贴如下代码。其他名字也行,这样好区分。

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

然后再在source/css(没有此文件夹的直接创建,更新主题不会覆盖掉)文件夹下创建一个自定义的css文件,例如我的是style.css,用来存放我修改的css。已经有的就直接用,然后粘贴如下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#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: 1;
}

引入

注意:如果你的css没有引入,先引入css
打开主题的配置文件_config.butterfly.yml,找到injecthead,输入以下代码:

1
- <link rel="stylesheet" href="/css/style.css?version=220002"> # 添加?version=220002是为了每次修改css后,更改其值用户就会自动发起新的请求,不会使用本地缓存。问号后面可以跟任意内容,只要使其内容和上次不同就可以。

然后找到injectbottom,输入以下代码:

1
2
3
# 夜间模式背景
- <canvas id="universe"></canvas> # 创建画布
- <script src="/js/universe.js"></script> # 引入js

完成

打开你的夜间模式,就能看到效果了。
因为我觉得手机端使用这个效果怪怪的,所以我把手机端的效果隐藏掉了,有需要的可以在刚才的自定义css文件夹里添加如下内容:

1
2
3
4
5
6
7
8
9
@media screen and (max-width: 768px) {
#universe {
display: none;
}
/* 下面这个是切换手机背景的代码,有需要的可以使用,没需要的删了就行 */
#web_bg {
background-image: url("https://img.vm.laomishuo.com/image/2021/05/2021053107390019.jpeg");
}
}

这段代码的意思就是当媒体宽度小于768px时,就会隐藏掉#universe元素。大于768px就会失效,即显示此元素。

ok,结束,有什么问题可以评论或者私聊我。