Acrylic主题魔改之网页地址栏动画

博主所使用Hexo版本:6.3.0,Acrylic主题版本:1.1.2,版本不同可能会有不同,注意你的版本

效果:使用这个后,浏览器左上角的历史回退功能将失效,如影响功能。 请斟酌使用

202371212543

1、增加js文件

找到主题文件夹,也就是themes/Acrylic。再深入里面的source/js,在js文件夹下新建一个urlAnimate.js。文件名随意,但是等会引入的时候必须对应文件名

urlAnimate.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
window.onload = function (){
let loop1 = function() {
var e = ['🏻', '🏼', '🏽', '🏾', '🏿'];
var s = '',
i, m;

for (i = 0; i < 10; i ++) {
m = Math.floor(e.length * ((Math.sin((Date.now()/100) + i)+1)/2));
s += '👶' + e[m];
}

location.hash = s;

setTimeout(loop1, 50);
}

var f = ['🌑', '🌘', '🌗', '🌖', '🌝', '🌔', '🌓', '🌒'],
d = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
m = 0;
let loop2 = function() {

var s = '', x = 0;

if (!m) {
while (d[x] == 4) {
x ++;
}

if (x >= d.length) m = 1;
else {
d[x] ++;
}
}
else {
while (d[x] == 0) {
x ++;
}

if (x >= d.length) m = 0;
else {
d[x] ++;

if (d[x] == 8) d[x] = 0;
}
}

d.forEach(function (n) {
s += f[n];
});

location.hash = s;

setTimeout(loop2, 50);
}

let loop3 = function() {
var i, n, s = '';

for (i = 0; i < 10; i++) {
n = Math.floor(Math.sin((Date.now()/200) + (i/2)) * 4) + 4;

s += String.fromCharCode(0x2581 + n);
}

window.location.hash = s;

setTimeout(loop3, 50);
}

let myArray = [loop1, loop2, loop3];
let randomIndex = Math.floor(Math.random() * myArray.length);
myArray[randomIndex]();

}

2、引入js文件

找到文件themes/Acrylic/layout/partial/head.ejs,在最后一个link标签后加入以下代码:

1
<%- js('/js/urlAnimate.js') %>

3、使用后发现bug

使用这个后,浏览器左上角的历史回退功能将失效,如影响功能。 请斟酌使用