前言

关于页和音乐页面一直有些单调,我一直想动手改改,但苦于找不到好的参考案例,结果就一直搁置下来了。最近终于看到了一些不错的参考案例,决定借鉴一下,给页面来个小改造。接下来是我参考的 Anzhiyu的关于页和音乐页面。

关于页

页面展示
img.png
img_1.png
img_3.png
img_2.png

美化步骤

1)在_data目录下方创建about.yml文件,输入以下内容:

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
- class_name: 关于页
subtitle: 生活明朗,万物可爱✨
avatarImg: https://qiniu.aimiliy.top/randomAvatar/Linghua11716458333487309.jpg
avatarSkills:
left:
- 📱 手机数码达人
- 🔍 高级CV工程师
- 💡 创新科技探索者
- 🛠️ DIY 技术狂人
right:
- 干饭第一名 🍚
- 资深二次元 🌟
- 实干派,结果导向 🏆
- 内敛低调实力派 💪
name: MuXiaoChen🍊
description: 是一名 后端开发工程师、个人博主
aboutsiteTips:
tips: 追求
title1: 源于
title2: 热爱而去 感受
word:
- 学习
- 生活
- 程序
- 体验
statistic:
link: /archives
text: 文章隧道
cover: https://cdn.aimiliy.top/backImg/tongji1.webp
map:
title: 我现在住在
StrengthenTitle: 中国,武汉市
background: https://cdn.aimiliy.top/backImg/17287214234481.webp
backgroundDark:
selfInfo:
selfInfoTips1: 生于
selfInfoContentYear: 2001
selfInfoTips2: 专业
selfInfoContent2: 计科
selfInfoTips3: 职业
selfInfoContent3: 后端
personalities:
author_name: 提倡者
personality_type: INFJ-A
photo_url: https://cdn.aimiliy.top/backImg/girl_rain_anime_153417_2560x1440.webp
personality_img: https://cdn.aimiliy.top/backImg/diplomats_INFJ_goethe.svg
name_url: https://www.16personalities.com/ch/infj-%E4%BA%BA%E6%A0%BC
game:
game_tips: 爱好游戏
game_title: 原神
game_uid: "UID: 501727771"
game_bg: https://cdn.aimiliy.top/backImg/64433bf26e25d.webp
comic:
comic_tips: 爱好番剧
comic_title: 追番
comic_list:
- name: 咒术回战
href: https://www.bilibili.com/bangumi/media/md28229899/?spm_id_from=666.25.b_6d656469615f6d6f64756c65.1
cover: https://cdn.aimiliy.top/about/zshz.webp
- name: 咒术回战 第二季
href: https://www.bilibili.com/bangumi/media/md20310848/?spm_id_from=666.25.b_6d656469615f6d6f64756c65.1
cover: https://cdn.aimiliy.top/about/zshz2.webp
- name: 夏目友人帐
href: https://www.bilibili.com/bangumi/media/md1660/?spm_id_from=666.25.b_6d656469615f6d6f64756c65.1
cover: https://cdn.aimiliy.top/about/xmyrz.webp
- name: OVERLORD
href: https://www.bilibili.com/bangumi/media/md8792/?spm_id_from=666.25.b_6d656469615f6d6f64756c65.1
cover: https://cdn.aimiliy.top/about/overlord2.webp
- name: 凡人修仙传
href: https://www.bilibili.com/bangumi/media/md28223043/?spm_id_from=666.25.b_6d656469615f6d6f64756c65.1
cover: https://cdn.aimiliy.top/about/frxxz.webp
like:
like_tips: 关注偏好
like_title: 数码科技
like_bg: https://cdn.aimiliy.top/backImg/638f5f05ce1f7.webp
like_bottom: 手机、电脑软硬件
music:
music_tips: 音乐偏好
music_title: HOYO-MiX、纯音乐
music_bg: https://cdn.aimiliy.top/backImg/HOYO-MIX.webp
music_link: /life/music
reward_list:
# - name: 海阔蓝
# amount: 8.8
# datatime: 2023-03-28

具体参数以及对应说明请查看anzhiyu文档

2)在主题的page目录下方新建about.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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
if site.data.about
- let aboutData = site.data.about
each item in aboutData
- let subtitle = item.subtitle || config.subtitle
- let avatarImg = item.avatarImg || theme.avatar.img
- let aboutName = item.name || theme.author
- let aboutDescription = item.description || config.description
- let avatarSkills = item.avatarSkills
#about-page
.author-box
if avatarSkills
.author-tag-left
each item in avatarSkills.left
span.author-tag=item
.author-info
span
.author-img
img.no-lightbox(src=url_for(avatarImg) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
if avatarSkills
.author-tag-right
each item in avatarSkills.right
span.author-tag=item
.image-dot
p.p.center.logo.large 关于本站
p.p.center.small=subtitle
.author-content
.author-content-item.myInfoAndSayHello
.title1 你好,很高兴认识你👋
.title2
| 我是
span.inline-word=aboutName
.title1=aboutDescription
.aboutsiteTips.author-content-item
- let { tips, title1, title2, word } = item.aboutsiteTips
.author-content-item-tips= tips
h2
= title1
br
= title2
.mask
each wordItem, index in word
if index < word.length - 2
span(class=(index === 0 ? 'first-tips' : ''))= wordItem
span(data-up)= word[word.length - 2]
|
span(data-show)= word[word.length - 1]
.author-content
if theme.LA.enable
- let cover = item.statistic.cover
.about-statistic.author-content-item
.card-content
.author-content-item-tips 数据
span.author-content-item-title 访问统计
#statistic
.post-tips
| 统计信息来自
a(href='https://invite.51.la/1NzKqTeb?target=V6', target='_blank', rel='noopener nofollow') 51la网站统计
.banner-button-group
- let link = item.statistic.link
- let text = item.statistic.text
a.banner-button(onclick=`pjax.loadUrl("${link}")`)
i.fas.fa-circle-plus
|
span.banner-button-text=text
.author-content-item-group.column.mapAndInfo
- let mapBackground = item.map.background
- let mapBackgroundDark = item.map.backgroundDark
style.
.author-content-item.map {
background-image: url(#{mapBackground});
}
[data-theme='dark'] .author-content-item.map {
background-image: url(#{mapBackgroundDark});
}
.author-content-item.map.single
- let mapTitle = item.map.title
- let mapStrengthenTitle = item.map.StrengthenTitle
span.map-title=mapTitle
b=mapStrengthenTitle
.author-content-item.selfInfo.single
- let { selfInfoTips1, selfInfoContentYear, selfInfoTips2, selfInfoContent2, selfInfoTips3, selfInfoContent3 } = item.selfInfo
div
span.selfInfo-title=selfInfoTips1
|
span.selfInfo-content#selfInfo-content-year(style='color:#43a6c6')=selfInfoContentYear
div
span.selfInfo-title=selfInfoTips2
|
span.selfInfo-content(style='color:#c69043')=selfInfoContent2
div
span.selfInfo-title=selfInfoTips3
|
span.selfInfo-content(style='color:#b04fe6')=selfInfoContent3

.author-content
.author-content-item.personalities
- let {author_name, personality_type, photo_url, personality_img, name_url, personality_type_color} = item.personalities
.author-content-item-tips 性格
span.author-content-item-title= author_name
.title2(style=`color:${personality_type_color ? personality_type_color : "#ac899c"}`)= personality_type
.post-tips
| 在
a(href='https://www.16personalities.com/', target='_blank', rel='noopener nofollow') 16personalities
| 了解更多关于
a(target='_blank', rel='noopener external nofollow', href= name_url)= author_name
.image
img.no-lightbox(src=url_for(personality_img), alt='人格')
.author-content-item.myphoto
span.map-title 风雨花渐落

.author-content
.author-content-item.comic-content
.card-content
- let {comic_tips, comic_title, comic_list} = item.comic
.author-content-item-tips=comic_tips
.author-content-item-title=comic_title
.comic-box
if comic_list
each i in comic_list
a.comic-item(href=i.href, target="_blank", title=i.name)
.comic-item-cover
img(src=i.cover, alt=i.name)
- let {game_tips, game_title, game_uid, game_bg} = item.game
.author-content-item.game-yuanshen(style=`background: url(${game_bg}) top / cover no-repeat;`)
.card-content
.author-content-item-tips=game_tips
span.author-content-item-title=game_title
.content-bottom
.icon-group
.loading-bar(role='presentation', aria-hidden='true' style=`${game_title != "原神" ? "display: none": ""}`)
.tips.game-yuanshen-uid=game_uid
.author-content
- let {music_tips, music_title, music_link, music_bg} = item.music
- let {like_tips, like_title, like_bottom, like_bg} = item.like
.author-content-item.like-technology(style=`background: url(${like_bg}) top / cover no-repeat;`)
.card-content
.author-content-item-tips=like_tips
span.author-content-item-title=like_title
.content-bottom
.tips=like_bottom
.author-content-item.like-music(style=`background: url(${music_bg}) top / cover no-repeat;`)
.card-content
.author-content-item-tips=music_tips
span.author-content-item-title=music_title
.content-bottom
.tips=`跟 ${aboutName} 一起欣赏更多音乐`
.banner-button-group
a.banner-button(onclick=`pjax.loadUrl("${music_link}")`)
i.fas.fa-circle-plus
|
span.banner-button-text 更多推荐

- let cleanContent = page.content ? page.content.replace(/<link[^>]*>|<script[^>]*>.*?<\/script>/gi, '') : ''
if cleanContent
.author-content
.create-site-post.author-content-item.single
!= cleanContent

- let rawData = item.reward_list
if rawData
- let sortedByDate = rawData.slice().sort((a, b) => new Date(b.datatime) - new Date(a.datatime));
.author-content
.author-content-item.single.reward#about-reward
.author-content-item-tips 致谢
span.author-content-item-title 赞赏名单
.author-content-item-description 感谢因为有你们,让我更加有创作的动力。
.reward-list-all
- let reward_list_amount = item.reward_list.sort((a,b)=>b.amount - a.amount)
each item, index in reward_list_amount
.reward-list-item
.reward-list-item-name=item.name
.reward-list-bottom-group
if item.amount >= 50
.reward-list-item-money(style='background:var(--anzhiyu-yellow)')=`¥${item.amount}`
else
.reward-list-item-money=`¥${item.amount + (item.suffix ? item.suffix : "")}`
.datatime.reward-list-item-time(datatime=item.datatime)=new Date(item.datatime).toISOString().slice(0, -14)
.reward-list-updateDate
| 最新更新时间:
time.datatime.reward-list-updateDate-time(datatime=sortedByDate[0].datatime)=new Date(sortedByDate[0].datatime).toISOString().slice(0, -14)
.about-reward
#con
#TA-con(onclick="anzhiyu.rewardShowConsole()")
#text-con
#linght
#TA 为TA充电
#tube-con
svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
path(d='M1 77H234.226L307.006 24H790', stroke='#e5e9ef', stroke-width='20')
path(d='M0 140H233.035L329.72 71H1028', stroke='#e5e9ef', stroke-width='20')
path(d='M1 255H234.226L307.006 307H790', stroke='#e5e9ef', stroke-width='20')
path(d='M0 305H233.035L329.72 375H1028', stroke='#e5e9ef', stroke-width='20')
rect(y='186', width='236', height='24', fill='#e5e9ef')
ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#e5e9ef')
circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#e5e9ef')
circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
#mask
svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
path(d='M1 77H234.226L307.006 24H790', stroke='#f25d8e', stroke-width='20')
path(d='M0 140H233.035L329.72 71H1028', stroke='#f25d8e', stroke-width='20')
path(d='M1 255H234.226L307.006 307H790', stroke='#f25d8e', stroke-width='20')
path(d='M0 305H233.035L329.72 375H1028', stroke='#f25d8e', stroke-width='20')
rect(y='186', width='236', height='24', fill='#f25d8e')
ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#f25d8e')
circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#f25d8e')
circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
#orange-mask
svg(viewBox='0 0 1028 385', fill='none', xmlns='http://www.w3.org/2000/svg')
path(d='M1 77H234.226L307.006 24H790', stroke='#ffd52b', stroke-width='20')
path(d='M0 140H233.035L329.72 71H1028', stroke='#ffd52b', stroke-width='20')
path(d='M1 255H234.226L307.006 307H790', stroke='#ffd52b', stroke-width='20')
path(d='M0 305H233.035L329.72 375H1028', stroke='#ffd52b', stroke-width='20')
rect(y='186', width='236', height='24', fill='#ffd52b')
ellipse(cx='790', cy='25.5', rx='25', ry='25.5', fill='#ffd52b')
circle(r='14', transform='matrix(1 0 0 -1 790 25)', fill='white')
ellipse(cx='790', cy='307.5', rx='25', ry='25.5', fill='#ffd52b')
circle(r='14', transform='matrix(1 0 0 -1 790 308)', fill='white')
p#people
| 共
b=item.reward_list.length
| 人

link(rel="stylesheet" href=url_for(theme.asset.about_css))
script(src=url_for(theme.asset.countup_js))
- const ck = theme.LA.ck
script(defer).
function initAboutPage() {
fetch("https://v6-widget.51.la/v6/#{ck}/quote.js")
.then(res => res.text())
.then(data => {
let title = ["最近活跃", "今日人数", "今日访问", "昨日人数", "昨日访问", "本月访问", "总访问量"];
let num = data.match(/(<\/span><span>).*?(\/span><\/p>)/g);

num = num.map(el => {
let val = el.replace(/(<\/span><span>)/g, "");
let str = val.replace(/(<\/span><\/p>)/g, "");
return str;
});

let statisticEl = document.getElementById("statistic");

// 自定义不显示哪个或者显示哪个,如下为不显示 最近活跃访客 和 总访问量
let statistic = [];
for (let i = 0; i < num.length; i++) {
if (!statisticEl) return;
if (i == 0) continue;
statisticEl.innerHTML +=
"<div><span>" + title[i] + "</span><span id=" + title[i] + ">" + num[i] + "</span></div>";
queueMicrotask(() => {
statistic.push(
new CountUp(title[i], 0, num[i], 0, 2, {
useEasing: true,
useGrouping: true,
separator: ",",
decimal: ".",
prefix: "",
suffix: "",
})
);
});
}

let statisticElement = document.querySelector(".about-statistic.author-content-item");
function statisticUP() {
if (!statisticElement) return;

const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
for (let i = 0; i < num.length; i++) {
if (i == 0) continue;
queueMicrotask(() => {
statistic[i - 1].start();
});
}
observer.disconnect(); // 停止观察元素,因为不再需要触发此回调
}
});
};

const options = {
root: null,
rootMargin: "0px",
threshold: 0
};
const observer = new IntersectionObserver(callback, options);
observer.observe(statisticElement);
}

const selfInfoContentYear = new CountUp("selfInfo-content-year", 0, #{selfInfoContentYear}, 0, 2, {
useEasing: true,
useGrouping: false,
separator: ",",
decimal: ".",
prefix: "",
suffix: "",
});

let selfInfoContentYearElement = document.querySelector(".author-content-item.selfInfo.single");
function selfInfoContentYearUp() {
if (!selfInfoContentYearElement) return;

const callback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
selfInfoContentYear.start();
observer.disconnect(); // 停止观察元素,因为不再需要触发此回调
}
});
};

const options = {
root: null,
rootMargin: "0px",
threshold: 0
};
const observer = new IntersectionObserver(callback, options);
observer.observe(selfInfoContentYearElement);
}

selfInfoContentYearUp();
statisticUP()
});

var pursuitInterval = null;
pursuitInterval = setInterval(function () {
const show = document.querySelector("span[data-show]");
const next = show.nextElementSibling || document.querySelector(".first-tips");
const up = document.querySelector("span[data-up]");

if (up) {
up.removeAttribute("data-up");
}

show.removeAttribute("data-show");
show.setAttribute("data-up", "");

next.setAttribute("data-show", "");
}, 2000);

document.addEventListener("pjax:send", function () {
pursuitInterval && clearInterval(pursuitInterval);
});
}
if (typeof gsap === "object") {
initAboutPage()
} else {
getScript("!{url_for(theme.asset.gsap_js)}").then(initAboutPage);
}

3)创建about.css文件,每个人网站所用的主题不同,样式代码一般不能直接使用,本网站是基于hexo-butterfly主题的,需要根据各自网站的实际情况进行修改。

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
#about-page {
display: flex;
flex-direction: column;
align-items: center;
}

.author-box {
display: flex;
position: relative;
align-items: center;
margin: 0 0 16px 0;
user-select: none;
}

.author-tag-left {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-right: 30px;
}

@keyframes floating {
0% {
transform: translate(0, -4px);
}

50% {
transform: translate(0, 4px);
}

100% {
transform: translate(0, -4px);
}
}

@media screen and (max-width: 768px) {
.author-tag-left {
display: none;
}
}

.author-tag-left .author-tag:first-child,
.author-tag-left .author-tag:last-child {
margin-right: -16px;
}

.author-tag-right {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 30px;
}

@media screen and (max-width: 768px) {
.author-tag-right {
display: none;
}
}

.author-tag-right .author-tag:first-child,
.author-tag-right .author-tag:last-child {
margin-left: -16px;
}

.author-tag {
transform: translate(0,-4px);
padding: 1px 8px;
border-radius: 40px;
margin-top: 6px;
font-size: 14px;
font-weight: 700;
box-shadow: 0 5px 12px -5px rgba(102, 68, 68, 0);
animation: 6s ease-in-out 0s infinite normal none running floating;
}

[data-theme=dark] .author-tag {
border: 1px solid #525252!important;
background: #343434e8!important;
}

[data-theme=light] .author-tag {
border: 1px solid #d3d3d3 !important;
background: var(--hh-trans-color) !important;
}

.author-info {
position: relative;
width: 189px;
height: 189px;
background: rgba(253, 253, 253, 0.8);
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}

.author-info::before{
content: '';
position: absolute;
width: 500px;
height: 500px;
background-image: conic-gradient(transparent, transparent, transparent, #8758FF);
animation: animate 4s linear infinite;
animation-delay: -2s;
}
.author-info::after{
content: '';
position: absolute;
width: 500px;
height: 500px;
background-image: conic-gradient(transparent, transparent, transparent, #5CB8E4);
animation: animate 4s linear infinite;
}

.author-info span{
position: absolute;
inset: 5px;
border-radius: 50%;
background: rgba(253, 253, 253, 0.8);
z-index: 1;
}

.author-tag:nth-child(1) {
animation-delay: 0s;
}

.author-tag:nth-child(2) {
animation-delay: 0.6s;
}

.author-tag:nth-child(3) {
animation-delay: 1.2s;
}

.author-tag:nth-child(4) {
animation-delay: 1.8s;
}

.author-img {
margin: auto;
border-radius: 50%;
width: 180px;
height: 180px;
overflow: hidden;
z-index: 10;
}


@keyframes animate {
0% {
transform: rotate(0)
}

100% {
transform: rotate(360deg)
}
}

.image-dot {
width: 30px;
height: 30px;
background: #6bdf8f;
position: absolute;
border-radius: 50%;
border: 6px solid rgba(253, 253, 253, 0.9);
top: 50%;
left: 50%;
z-index: 20;
transform: translate(51px, 54px);
}

[data-theme=dark] .author-img img {
filter: brightness(.9) !important;
}

.author-img img {
border-radius: 50%;
overflow: hidden;
width: 180px;
height: 180px;
}

@media screen and (max-width: 768px) {
.author-img:before {
bottom: -5px;
right: -5px;
}
}

.author-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-top: 1rem;
}

#about-page .myInfoAndSayHello {
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
background: linear-gradient(130deg, #3134f3cc 0, #00dbebcc 80%);
background-size: 200%;
animation: gradient 15s ease infinite;
width: 59%;
}

.author-content-item {
width: 49%;
border-radius: 24px;
box-shadow: 0 8px 16px -4px #00000050;
position: relative;
padding: 1rem 2rem;
overflow: hidden;
}

[data-theme=light] .author-content-item {
background-color: var(--hh-trans-color) !important;
border: 1px solid #d3d3d3 !important;
}

[data-theme=dark] .author-content-item {
border: 1px solid #525252 !important;
background-color: #343434e8 !important;
}


#about-page .myInfoAndSayHello .title1 {
opacity: 0.8;
line-height: 1.3;
}

#about-page .myInfoAndSayHello .title2 {
font-size: 36px;
font-weight: 700;
line-height: 1.1;
margin: 0.5rem 0;
}

.inline-word {
word-break: keep-all;
white-space: nowrap;
}

.author-content-item.aboutsiteTips {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
width: 39%;
}

.aboutsiteTips h2 {
margin-right: auto;
font-size: 36px;
font-family: Helvetica;
line-height: 1.06;
letter-spacing: -0.02em;
color: var(--font-color);
margin-top: 0;
}

.aboutsiteTips .mask {
height: 36px;
position: relative;
overflow: hidden;
margin-top: 4px;
}

.aboutsiteTips .mask span {
display: block;
box-sizing: border-box;
position: absolute;
top: 36px;
background-size: 100% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-repeat: no-repeat;
}

.aboutsiteTips .mask span[data-show] {
transform: translateY(-100%);
transition: 0.5s transform ease-in-out;
}

.aboutsiteTips .mask span[data-up] {
transform: translateY(-200%);
transition: 0.5s transform ease-in-out;
}

.aboutsiteTips .mask span:nth-child(1) {
background-image: linear-gradient(45deg, #0ecffe 50%, #07a6f1);
}

.aboutsiteTips .mask span:nth-child(2) {
background-image: linear-gradient(45deg, #18e198 50%, #0ec15d);
}

.aboutsiteTips .mask span:nth-child(3) {
background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c);
}

.aboutsiteTips .mask span:nth-child(4) {
background-image: linear-gradient(45deg, #fa7671 50%, #f45f7f);
}

@media screen and (max-width: 768px) {
.author-content-item.map {
margin-bottom: 0;
}
}

#about-page .about-statistic {
min-height: 380px;
width: 39%;
background:url(https://cdn.aimiliy.top/backImg/tongji1.webp) no-repeat top;
background-size: cover;
color: rgb(255,253,253,0.92);
overflow: hidden;
}

.author-content-item .card-content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
display: flex;
flex-direction: column;
padding: 1rem 2rem;
}

.author-content-item .card-content .author-content-item-title {
margin-bottom: 0.5rem;
}

.author-content-item .author-content-item-title {
font-size: 36px;
font-weight: 700;
line-height: 1;
}

#statistic {
font-size: 16px;
border-radius: 15px;
width: 100%;
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
margin-top: 1rem;
margin-bottom: 2rem;
}

#statistic div span:first-child {
opacity: 0.8;
font-size: .6rem;
}

#statistic div span:last-child {
font-weight: 700;
font-size: 34px;
line-height: 1;
white-space: nowrap;
}

#statistic div {
display: flex;
justify-content: space-between;
flex-direction: column;
width: 50%;
margin-bottom: 0.5rem;
}

@media screen and (max-width: 1300px) {
.author-content-item.selfInfo {
height: 70%;
}
}

.post-tips {
color: #999;
font-size: 14px;
position: absolute;
bottom: 1rem;
left: 2rem;
}

.post-tips a {
color: #999 !important;
border: none !important;
}

.author-content-item .card-content .banner-button-group {
position: absolute;
bottom: 1.5rem;
right: 2rem;
}

.author-content-item .card-content .banner-button-group .banner-button {
height: 40px;
width: 124px;
border-radius: 20px;
justify-content: center;
background: rgba(255,253,253,0.9);
color: var(--font-color) !important;
text-decoration: none !important;
display: flex;
align-items: center;
z-index: 1;
cursor: pointer;
}

[data-theme=dark] .author-content-item .card-content .banner-button-group .banner-button {
background: #1d1b26ec;
}

.author-content-item .card-content .banner-button-group .banner-button i, .author-content-item .card-content .banner-button-group .banner-button svg {
margin-right: 8px;
font-size: 1rem;
}

.author-content-item .card-content .banner-button-group .banner-button .banner-button-text {
margin-left: 4px;
}

#about-page .author-content-item .card-content .banner-button-group .banner-button i, #about-page .author-content-item .card-content .banner-button-group .banner-button svg {
font-size: 22px;
margin-right: 0.25rem;
height: 40px;
max-width: 40px;
display: flex;
border-radius: 50px;
align-items: center;
justify-content: center;
}

.author-content-item .card-content .banner-button-group .banner-button:hover {
background: var(--theme-color);
}

.author-content-item .card-content .banner-button-group .banner-button:hover i, .author-content-item .card-content .banner-button-group .banner-button:hover svg .author-content-item.personalities {
background: none !important;
}

.author-content-item.personalities {
width: 59%;
}

.author-content-item.personalities .image {
position: absolute;
right: 30px;
top: 10px;
width: 220px;
transition: transform 2s cubic-bezier(0.13, 0.45, 0.21, 1.02);
}

.author-content-item.personalities .image img {
display: block;
margin: 0 auto 20px;
max-width: 100%;
transition: filter 375ms ease-in 0.2s;
}

.author-content-item.personalities:hover .image {
transform: rotate(-10deg);
}

.author-content-item.myphoto {
background-image:url(https://cdn.aimiliy.top/backImg/girl_rain_anime_153417_2560x1440.webp);
height: 60%;
min-height: 240px;
position: relative;
overflow: hidden;
width: 39%;
/*display: flex;*/
/*align-items: center;*/
/*justify-content: center;*/
max-height: 400px;
background-size: cover;
}

.author-content-item.map .map-title, .author-content-item.myphoto .map-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: .5rem 2rem;
color: var(--font-color);
background: rgba(255, 255, 255, 0.6);
backdrop-filter: saturate(180%) blur(2px);
-webkit-backdrop-filter: blur(20px);
transition: 1s ease-in-out;
font-size: 20px;
}

[data-theme=dark] .author-content-item.map .map-title {
background: rgba(0,0,0, 0.6);
}

[data-theme=dark] .author-content-item.myphoto .map-title{
background: rgba(0,0,0, 0.6);
}

.author-content-item.myphoto img {
position: absolute;
min-width: 100%;
object-fit: cover;
transition: 0.6s;
animation: coverIn 2s ease-out forwards;
transition: transform 2s ease-out !important;
}

.author-content-item.myphoto:hover img {
transform: scale(1.1);
}

.author-content-item:hover .card-background-icon {
transform: rotate(20deg);
}

.author-content-item.personalities .title2 {
font-size: 36px;
font-weight: 700;
line-height: 1.1;
}

.author-content-item.map {
min-height: 160px;
max-height: 400px;
position: relative;
overflow: hidden;
margin-bottom: 0.5rem;
height: 60%;
transition: 1s ease-in-out;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.author-content-item.single {
width: 100%;
}

.author-content-item.map .map-title b {
color: var(--font-color);
}

.author-content-item.selfInfo {
display: flex;
min-height: 100px;
max-height: 400px;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
height: -webkit-fill-available;
height: 40%;
}

.author-content-item.selfInfo div {
display: flex;
flex-direction: column;
margin: 0.5rem 0.5rem 0.5rem 0;
min-width: 120px;
flex: 1;
}

.author-content-item.selfInfo .selfInfo-title {
opacity: 0.8;
font-size: 12px;
line-height: 1;
margin-bottom: 8px;
}

.author-content-item.selfInfo .selfInfo-content {
font-weight: 700;
font-size: 34px;
line-height: 1;
}

.author-content-item-group.column.mapAndInfo {
width: 59%;
}

.author-content-item.map:hover ,
.author-content-item.myphoto:hover{
background-size: 120%;
transition: 4s ease-in-out;
background-position-x: 0;
background-position-y: 36%;
}

.author-content-item.map:hover .map-title,
.author-content-item.myphoto:hover .map-title {
bottom: -100%;
}


.author-content-item-group.column {
display: flex;
flex-direction: column;
width: 49%;
justify-content: space-between;
}

.post-tips a:hover {
color: var(--theme-color) !important;
background: none !important;
}

.author-content-item.single.reward .reward-list-updateDate {
color: #999;
font-size: 14px;
}

.author-content-item .author-content-item-tips {
opacity: 0.8;
font-size: 12px;
margin-bottom: 0.5rem;
}

.author-content-item.game-yuanshen {
background-size: cover;
min-height: 300px;
overflow: hidden;
color: var(--font-color);
width: 59%;
}

.author-content-item .content-bottom {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
}

.author-content-item .content-bottom .icon-group {
display: flex;
position: relative;
}

.author-content-item .content-bottom .icon-group i {
display: inline-block;
width: 143px;
height: 18px;
margin-right: 0.5rem;
}


.author-content-item.game-yuanshen::after {
box-shadow: 0 -69px 203px 11px #575d8b inset;
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.author-content-item.comic-content {
width: 39%;
min-height: 300px;
overflow: hidden;
}

.author-content-item.comic-content .comic-box {
display: flex;
width: 120%;
height: 100%;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
}

.author-content-item.comic-content .author-content-item-tips, .author-content-item.comic-content .author-content-item-title {
z-index: 2;
color: #fff;
pointer-events: none;
}


.author-content-item.game-yuanshen .author-content-item-tips,
.author-content-item.game-yuanshen .author-content-item-title,
.author-content-item.game-yuanshen .tips,
.author-content-item.like-technology .author-content-item-tips,
.author-content-item.like-technology .author-content-item-title,
.author-content-item.like-technology .tips,
.author-content-item.like-music .author-content-item-tips,
.author-content-item.like-music .author-content-item-title,
.author-content-item.like-music .tips
{
z-index: 2;
color: #fff;
pointer-events: none;
}

.author-content-item.comic-content .comic-item {
height: 100%;
color: white;
width: 20%;
transform: skew(-10deg, 0deg);
transition: 0.8s;
position: relative;
overflow: hidden;
}

.author-content-item.comic-content .comic-item:hover {
width: 46%;
}

.author-content-item.comic-content .comic-item:hover .comic-item-cover {
left: 16%;
transform: skew(10deg, 0deg) scale(1.6);
}

.author-content-item.comic-content .comic-item .comic-item-cover {
position: absolute;
top: 0;
left: -50%;
height: 100%;
transform: skew(10deg, 0deg);
object-fit: cover;
transition: scale 0.2s, all 0.8s;
}

.author-content-item.comic-content .comic-item .comic-item-cover img {
height: 100%;
transition: 0.8s;
max-width: none;
border-radius: 0px;
}

.author-content-item.comic-content::after {
box-shadow: 0 -48px 203px 11px #fbe9b8 inset;
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
}

.author-content-item.like-technology {
min-height: 230px;
color: var(--anzhiyu-white);
}

.author-content-item.like-music {
min-height: 400px;
color: var(--anzhiyu-white);
overflow: hidden;
}

.author-content-item.like-music::after {
box-shadow: 0 -69px 203px 11px #453e38 inset;
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
}

@media screen and (max-width: 1200px) {
.author-content-item.personalities .image {
width: 180px;
}
}

@media screen and (max-width: 768px) {

.author-content.author-content-item.like-music.content-bottom.tips {
display: none;
}

.author-content-item.game-yuanshen .content-bottom {
padding-bottom: 10px;
}

.author-content-item.game-yuanshen .game-yuanshen-uid {
display: none;
}

.author-content {
margin-top: 0;
}

.author-content-item {
width: 100% !important;
margin-top: 1rem;
padding: 1rem;
}

.author-content-item.map {
margin-bottom: 0;
}

.author-content-item-group.column {
width: 100% !important;
}

.author-content-item.selfInfo {
height: 95%;
}

.author-content-item.personalities {
height: 200px;
}

.post-tips {
left: auto;
}

.author-content-item.personalities .image {
width: 125px;
}

.site-card-group > a {
width: 100% !important;
}

body[data-type='about'] .post-reward {
display: none;
}

.reward-list-item {
width: 100% !important;
}

.author-content-item .card-content .banner-button-group {
right: 1rem;
bottom: 1rem;
}


#selfInfo-content-year {
width: 90px;
}
}

@media screen and (min-width: 768px) and (max-width: 896px) {
.author-content-item.like-music .content-bottom .tips {
display: none;
}
}

/* 赞赏的css */
.reward-list-all {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-top: 1rem;
margin-bottom: 0.5rem;
margin-left: -0.25rem;
margin-right: -0.25rem;
}

.reward-list-item {
padding: 1rem;
border-radius: 12px;
border: 1px solid #e3e8f7;
width: calc((100% / 5) - 0.5rem);
margin: 0 0.25rem 0.5rem 0.25rem;
box-shadow: 0 8px 16px -4px rgba(44,45,48,0.047);

+maxWidth1200() {
width: calc((100% / 3) - 0.5rem);
}
}

.reward-list-item .reward-list-item-name {
font-size: 1rem;
font-weight: 700;
line-height: 1;
margin-bottom: 0.5rem;
}

.reward-list-item .reward-list-bottom-group {
display: flex;
align-items: center;
justify-content: space-between;
}

.reward-list-item .reward-list-item-money {
padding: 4px;
background: var(--font-color);
color: var(--card-bg);
font-size: 12px;
line-height: 1;
border-radius: 4px;
margin-right: 4px;
white-space: nowrap;
}

.reward-list-item .reward-list-item-time {
font-size: 12px;
color: var(--font-color);
white-space: nowrap;
}

.loading-bar {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 62.5px;
transform: translate(-25%, -50%) scale(0.5);
transition: all 0.5s;
user-select: none;
overflow: hidden;
}

.loading-bar::after {
content: '';
position: absolute;
top: 500px;
left: 0;
filter: drop-shadow(0 -500px 0 #ece5d8);
width: 500px;
height: 62.5px;
background: url('https://yuanshen.site/imgs/loading-bar.png') no-repeat left 100%;
background-size: 500px 62.5px;
background-position-x: 0;
}

.author-content-item.game-yuanshen:hover .loading-bar::after {
animation: loading-bar 3.5s cubic-bezier(0.28, 0.11, 0.32, 1) infinite forwards;
}

@media screen and (max-width: 719px) {
.loading-bar .loading-bar {
display: none;
}
}

@media screen and (max-width: 719px) and (orientation: landscape) {
.loading-bar .loading-bar {
display: block !important;
transform: translate(-50%, -50%) scale(0.7) !important;
}
}

@supports not (filter: drop-shadow(0 0 0 #fff)) {
.loading-bar:before {
content: 'Your browser does not support the animation';
}
}

@keyframes loading-bar {
0% {
width: 0;
background-size: 500px 62.5px;
}

16.6% {
}

33.2% {
}

49.8% {
}

66.4% {
}

83% {
width: 475px;
}

83.1% {
width: 475px;
}

83.2% {
width: 475px;
}

83.3% {
width: 475px;
}

83.4% {
width: 475px;
}

83.5% {
width: 475px;
}

83.6% {
width: 475px;
}

83.7% {
width: 475px;
}

83.8% {
width: 475px;
}

83.9% {
width: 475px;
}

84% {
width: 475px;
}

85% {
width: 475px;
}

86% {
width: 475px;
}

87% {
width: 475px;
}

100% {
width: 500px;
}
}

4)修改layout/page.pug文件,添加如下代码,并在你的关于页,并添加type: “about”:

1
2
when 'about'
include includes/page/about.pug

5)在主题配置文件的CDN中添加如下JS插件,并添加1LA的统计配置,当然如果你用的是其他的统计工具,也可以修改对应的源代码

1
2
gsap_js: https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/gsap/3.9.1/gsap.min.js
countup_js: https://cdn.aimiliy.top/npm/js/countup.js
1
2
3
4
LA:
enable: true
ck: xxxxxxxx # 51LA CK
LingQueMonitorID: xxxxxxxxx # 灵雀监控ID

6)以上操作完成后,重新构建即可

音乐馆

页面展示
img.png
img_1.png

美化步骤

说明:这个是基于aplayers和metingjs插件的魔改
功能描述:在切换歌曲的同时并切换对应背景,切换歌单,随机播放等
1)在主题的page目录下方创建music.pug,输入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

link(rel="stylesheet" href=url_for(theme.asset.music_css))
script(defer data-pjax src=url_for(theme.asset.music_js))
#anMusic-page
if page.content
!= page.content
#anMusicSwitching(title="切换歌单")
svg.icon(style="pointer-events: none;width:20px;height:20px;fill:#fff")
use(xlink:href='#icon-repeat')
#anMusicRefreshBtn(title="刷新歌单")
svg.icon(style="pointer-events: none;width:20px;height:20px;fill:#fff")
use(xlink:href='#icon-arrows-rotate')
#anMusicBtnGetSong(title="随机单曲")
svg.icon(style="pointer-events: none;width:20px;height:20px;fill:#fff")
use(xlink:href='#icon-shuffle')

创建背景元素,修改xxx/layout/includes/layout.pug

1
2
3
4
  body
if theme.background
#web_bg
+ #an_music_bg

2)随后分别创建music.js,music.css,分别输入以下内容并在主题配置文件的CDN中添加对应链接music_css: x,music_js: x
music.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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
var music = [
{id: "xxxx", type: "playlist", server: "netease"} //对应metingJs的配置字段
];

const defaultMusic = {id: "xxx", type: "playlist", server: "netease"}; // 默认歌单
let localMusic = JSON.parse(localStorage.getItem("localMusic")) || defaultMusic; // 当前正在播放的歌单

if (!localStorage.getItem("defaultMusic")) {
localStorage.setItem("defaultMusic", JSON.stringify(defaultMusic));
}

if (!localStorage.getItem("localMusic")) {
localStorage.setItem("localMusic", JSON.stringify(localMusic));
}

let musicVolume = 0.8; // 初始音量
const muxiaochen = {
// 音乐节目切换背景
changeMusicBg: function (isChangeBg = true) {
if (window.location.pathname != "/life/music/") {
return;
}
const anMusicBg = document.getElementById("an_music_bg");

if (isChangeBg) {
const musiccover = document.querySelector("#anMusic-page .aplayer-pic");
anMusicBg.style.backgroundImage = musiccover.style.backgroundImage;
} else {
// 第一次进入,绑定事件,改背景
let timer = setInterval(() => {
const musiccover = document.querySelector("#anMusic-page .aplayer-pic");
// 确保player加载完成
if (musiccover) {
clearInterval(timer);
anMusicBg.style.backgroundImage = musiccover.style.backgroundImage;
// 绑定事件
muxiaochen.addEventListenerMusic();
// 确保第一次能够正确替换背景
muxiaochen.changeMusicBg();
}
}, 100);
}
},
addEventListenerMusic: function () {
const anMusicPage = document.getElementById("anMusic-page");
const aplayerIconMenu = anMusicPage.querySelector(".aplayer-info .aplayer-time .aplayer-icon-menu");
const anMusicBtnGetSong = anMusicPage.querySelector("#anMusicBtnGetSong");
const anMusicRefreshBtn = anMusicPage.querySelector("#anMusicRefreshBtn");
const anMusicSwitchingBtn = anMusicPage.querySelector("#anMusicSwitching");
const metingAplayer = window.aplayers[0]; // 获取Aplayer对象,需要根据插件使用情况调整
//初始化音量
metingAplayer.volume(0.8, true);
metingAplayer.on("loadeddata", function () { //loadedata时间,监听音乐是否切换,如果切换则修改对应背景
muxiaochen.changeMusicBg();
});

aplayerIconMenu.addEventListener("click", function () {
document.getElementById("menu-mask").style.display = "block";
document.getElementById("menu-mask").style.animation = "0.5s ease 0s 1 normal none running to_show";
anMusicPage.querySelector(".aplayer.aplayer-withlist .aplayer-list").style.opacity = "1";
});
function anMusicPageMenuAask() {
if (window.location.pathname != "/life/music/") {
document.getElementById("menu-mask").removeEventListener("click", anMusicPageMenuAask);
return;
}
anMusicPage.querySelector(".aplayer-list").classList.remove("aplayer-list-hide");
}
document.getElementById("menu-mask").addEventListener("click", anMusicPageMenuAask);
// 监听增加单曲按钮
anMusicBtnGetSong.addEventListener("click", () => {
const anMusicPage = document.getElementById("anMusic-page");
const metingAplayer = window.aplayers[0];
const allAudios = metingAplayer.list.audios;
const randomIndex = Math.floor(Math.random() * allAudios.length);
// 随机播放一首
metingAplayer.list.switch(randomIndex);
});
anMusicRefreshBtn.addEventListener("click", () => {
muxiaochen.refreshMusicList();
});
anMusicSwitchingBtn.addEventListener("click", () => {
muxiaochen.changeMusicList();
});
// 监听键盘事件
//空格控制音乐
document.addEventListener("keydown", function (event) {
//暂停开启音乐
if (event.code === "Space") {
event.preventDefault();
metingAplayer.toggle();
}
//切换下一曲
if (event.keyCode === 39) {
event.preventDefault();
metingAplayer.skipForward();
}
//切换上一曲
if (event.keyCode === 37) {
event.preventDefault();
metingAplayer.skipBack();
}
//增加音量
if (event.keyCode === 38) {
if (musicVolume <= 1) {
musicVolume += 0.1;
metingAplayer.volume(musicVolume, true);
}
}
//减小音量
if (event.keyCode === 40) {
if (musicVolume >= 0) {
musicVolume += -0.1;
metingAplayer.volume(musicVolume, true);
}
}
});
},
refreshMusicList: async function () {
const metingAplayer = window.aplayers[0];
let songs = [];
localMusic = defaultMusic;
localStorage.setItem("localMusic", JSON.stringify(defaultMusic));
// metingjs后端api,需要切换自己的metingjs后端api或者使用原始公共api
let url = `https://twikoo.aimiliy.top/music/api?server=${localMusic.server}&type=${localMusic.type}&id=${localMusic.id}&auth=undefined&r=${Math.random() * Date.now()}`;
songs = await muxiaochen.fetchSongs(url);
if (songs.length > 0) {
metingAplayer.list.clear();
metingAplayer.list.add(songs);
}
},
// 切换歌单
changeMusicList: async function () {
const metingAplayer = window.aplayers[0];
let songs = [];
let randomMusic = Math.floor(Math.random() * music.length);
while (JSON.parse(localStorage.getItem("localMusic")).id === music[randomMusic].id) {
randomMusic = Math.floor(Math.random() * music.length);
}
localMusic = music[randomMusic];
localStorage.setItem("localMusic", JSON.stringify(music[randomMusic]));
// metingjs后端api,需要切换自己的metingjs后端api或者使用原始公共api
let url = `https://twikoo.aimiliy.top/music/api?server=${music[randomMusic].server}&type=${music[randomMusic].type}&id=${music[randomMusic].id}&auth=undefined&r=${Math.random() * Date.now()}`;
songs = await muxiaochen.fetchSongs(url);
if (songs.length > 0) {
metingAplayer.list.clear();
metingAplayer.list.add(songs);
}
},
async fetchSongs(url) {
let songs = []; // 默认初始化为空数组
try {
const response = await fetch(url);
if (!response.ok) {
songs = []
}
songs = await response.json();
} catch (error) {
console.error("获取歌曲时出错:", error.message);
songs = []; // 出现异常时确保 songs 为空数组
}
return songs;
}
};
muxiaochen.changeMusicBg(false);

music.css

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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
#page:has(#anMusic-page) {
border: 0;
box-shadow: none !important;
padding: 0 !important;
background: transparent !important;
}

body:has(#anMusic-page) #an_music_bg{
display: block !important;
}

body:has(#anMusic-page) #myscoll{
display: none;
}

#an_music_bg {
display: none;
filter: blur(63px);
opacity: 0.6;
position: fixed;
z-index: -999;
background-attachment: local;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
transform: rotate(0deg);
}


#menu-mask {
position: fixed;
z-index: 102;
display: none;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.6);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: blur(20px);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: .6s ease 0s 1 normal none running to_show;
-moz-animation: .6s ease 0s 1 normal none running to_show;
-o-animation: .6s ease 0s 1 normal none running to_show;
-ms-animation: .6s ease 0s 1 normal none running to_show;
animation: .6s ease 0s 1 normal none running to_show;
-webkit-transform-style: preserve-3d;
}

body:has(#anMusic-page) .main-hero-waves-area, #page-site-info{
display: none;
}
body:has(#anMusic-page) {
background: rgb(13, 13, 13);
}

[data-theme=light] body:has(#anMusic-page) #page-header:before{
background-color: rgba(255, 255, 255, 0) !important;
}


body:has(#anMusic-page) #page-header:not(.not-top-img):before {
background-color: rgba(255, 255, 255, 0) !important;
}


body:has(#anMusic-page) .not-home-page{
height: 60px !important;
}

#anMusic-page .aplayer {
display: flex;
flex-direction: row-reverse;
background: rgba(0, 0, 0, 0);
border: none;
box-shadow: none;
font-family: unset;
}

body:has(#anMusic-page) #web_bg {
display: none;
}
body:has(#anMusic-page) #footer,
body:has(#anMusic-page) #nav-music {
display: none;
}

#anMusic-page .aplayer-body {
width: 40%;
height: 75vh;
}

#anMusic-page ol > li:hover {
background: #ffffff33;
border-radius: 6px;
}
#anMusic-page .aplayer-pic {
float: none;
width: 180px;
height: 180px;
border-radius: 12px;
margin: auto;
left: 0;
right: 0;
}

#anMusic-page .aplayer-info {
margin: 0 20px 0 20px;
border-bottom: none;
}

#anMusic-page .aplayer-info .aplayer-music {
text-align: center;
height: auto;
margin: 15px;
white-space: normal;
}

#anMusic-page .aplayer-info .aplayer-music .aplayer-author,
#anMusic-page .aplayer-info .aplayer-music .aplayer-title {
font-size: 2rem;
font-weight: 700;
color: #fff;
}

#anMusic-page .aplayer-info .aplayer-lrc {
height: 800%;
margin-top: 80px;
mask-image: linear-gradient(to bottom, #000, #000, #000, #000, #000, #000, #000, #000, #000, #000, #0000, #0000);
}
#anMusic-page .aplayer-info .aplayer-lrc p {
font-size: 16px;
color: #fff;
margin: 15px !important;
}
#anMusic-page .aplayer .aplayer-lrc:after,
#anMusic-page .aplayer .aplayer-lrc:before {
display: none;
}

/* 控制器 */
#anMusic-page .aplayer-info .aplayer-controller {
position: fixed;
max-width: 1500px;
margin: auto;
left: 0;
right: 0;
bottom: 50px;
}
#anMusic-page .aplayer-info .aplayer-controller .aplayer-bar-wrap {
margin: 0 160px 0 150px;
}
#anMusic-page .aplayer-info .aplayer-controller .aplayer-played {
background: #fff !important;
height: 6px;
border-radius: 4px;
}
#anMusic-page .aplayer-info .aplayer-controller .aplayer-thumb {
width: 20px !important;
height: 20px !important;
margin-top: -7px !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-o-transform: none !important;
-ms-transform: none !important;
transform: none !important;
background: #fff !important;
}

#anMusic-page .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
height: 6px;
border-radius: 4px;
}

#anMusic-page .aplayer .aplayer-body .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
height: 6px;
border-radius: 4px;
}

#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-back,
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-forward,
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-play {
display: inline;
position: fixed;
}
#anMusic-page .aplayer-info .aplayer-time {
position: absolute;
width: 100%;
bottom: 21px;
height: 0;
display: flex;
justify-content: flex-end;
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-time-inner {
margin-right: 18px;
margin-top: -8px;
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-back {
position: absolute;
left: 0;
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-play {
position: absolute;
left: 40px;
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-forward {
position: absolute;
left: 80px;
}

#anMusic-page .aplayer-info .aplayer-time .aplayer-icon {
width: 2rem;
height: 2rem;
margin-left: 15px;
margin-top: -2px;
}

#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-menu {
display: none;
}

#anMusic-page .aplayer-info .aplayer-time .aplayer-icon path {
fill: #fff;
opacity: 0.8;
}

#anMusic-page .aplayer-list {
width: 60%;
max-height: none !important;
height: 100%;
}
#anMusic-page ol {
max-height: 75vh !important;
padding-right: 25px;
}
#anMusic-page ol > li {
border-top: 1px solid transparent;
font-size: 14px;
}
#anMusic-page ol > li.aplayer-list-light {
background: rgb(255 255 255 / 20%);
border-radius: 6px;
}

#anMusic-page ol > li span {
color: #fff;
}

#anMusic-page ol > li.aplayer-list-light .aplayer-list-cur {
display: none;
}
#anMusic-page ol > li span.aplayer-list-author {
opacity: 0.6;
}

/* 导航栏 */
.page:has(#anMusic-page) #nav {
backdrop-filter: none !important;
background: 0 0 !important;
border-bottom: none !important;
}

.page:has(#anMusic-page) #page-header.not-top-img #nav a,
.page:has(#anMusic-page) #page-header #nav .back-home-button {
color: #fff;
}

body:has(#anMusic-page) .s-sticker div {
color: #fff !important;
}

body:has(#anMusic-page) .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon.aplayer-icon-loop {
margin-right: 15px;
}

[data-theme="dark"] .page:has(#anMusic-page) #page-header:before {
background-color: transparent;
}


@media screen and (max-width: 1400px) {
body #anMusic-page #anMusicBtnGetSong,body #anMusic-page #anMusicRefreshBtn,body #anMusic-page #anMusicSwitching {
right:7vw
}

body #anMusic-page #anMusicSwitching {
bottom: 100px
}

body #anMusic-page #anMusicRefreshBtn {
bottom: 160px
}

body #anMusic-page #anMusicBtnGetSong {
bottom: 220px
}
}

#anMusic-page #anMusicBtnGetSong,#anMusic-page #anMusicRefreshBtn,#anMusic-page #anMusicSwitching {
position: fixed;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
width: 50px;
height: 50px;
bottom: 100px;
padding: 5px;
background: rgba(255,255,255,0.2);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 50%;
color: #fff;
text-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-o-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-o-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
cursor: pointer;
z-index: 2
}

#anMusic-page #anMusicBtnGetSong {
right: 11vw
}

#anMusic-page #anMusicRefreshBtn {
right: 7vw
}

#anMusic-page #anMusicSwitching {
right: 15vw
}

@media screen and (max-width: 768px) {
#anMusic-page div#anMusicBtnGetSong {
right:80px;
bottom: 155px
}

#anMusic-page div#anMusicRefreshBtn {
right: 20px;
bottom: 155px
}

#anMusic-page div#anMusicSwitching {
right: 140px;
bottom: 155px
}
}
/* **** 移动端样式 ***** */
@media screen and (max-width: 768px) {
body:has(#anMusic-page) #rightside {
display: none;
}
body:has(#anMusic-page) #content-inner,
body:has(#anMusic-page) #page {
z-index: auto;
}
/* 歌曲列表 */
#anMusic-page .aplayer-list {
position: fixed;
z-index: 1002;
width: 100%;
bottom: -76%;
left: 0;
background: var(--sidebar-bg);
height: auto;
border-radius: 15px 15px 0px 0px;
padding: 15px 0px;
}
#anMusic-page .aplayer-list.aplayer-list-hide {
bottom: 0% !important;
}
#anMusic-page ol {
max-height: 60vh !important;
padding-right: 0px;
}
#anMusic-page ol > li {
display: flex;
margin: 0 10px;
}
#anMusic-page ol > li span {
color: var(--font-color);
}
#anMusic-page ol > li span.aplayer-list-title {
width: 30%;
}
#anMusic-page ol > li.aplayer-list-light {
background: #33a673;
padding: 5px 20px;
border-radius: 10px;
}
#anMusic-page ol > li.aplayer-list-light span {
color: #fff;
}
#anMusic-page ol > li span.aplayer-list-title {
max-width: 55%;
width: auto;
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
-webkit-box-orient: vertical;
}
#anMusic-page ol > li span.aplayer-list-author {
position: absolute;
right: 10px;
width: auto;
max-width: 35%;
display: -webkit-box;
-webkit-line-clamp: 1;
overflow: hidden;
-webkit-box-orient: vertical;
}
#anMusic-page ol > li.aplayer-list-light span.aplayer-list-author {
right: 15px;
}
/* 歌词信息 */
#anMusic-page .aplayer-body {
width: 100%;

position: fixed;
margin: auto;
left: 0;
right: 0;
top: 100px;
}
#anMusic-page .aplayer-info .aplayer-lrc {
margin-top: 40px;
height: auto;
max-height: 200%;
min-height: 100%;
mask-image: linear-gradient(to bottom, #000, #000, #000, #000, #0000, #0000);
}
#anMusic-page .aplayer-info .aplayer-lrc p.aplayer-lrc-current {
color: #33a673;
}
/* 控制按键和进度条 */
#anMusic-page .aplayer-info .aplayer-controller {
width: 100%;
bottom: 100px;
}
#anMusic-page .aplayer-info .aplayer-controller .aplayer-bar-wrap {
margin: 0 30px;
}
#anMusic-page .aplayer-info .aplayer-time {
bottom: -40px;
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-time-inner {
position: absolute;
width: 100%;
margin-right: 0;
margin-top: -33px;
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-time-inner .aplayer-dtime {
position: absolute;
right: 30px;
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-time-inner .aplayer-ptime {
position: absolute;
left: 35px;
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-back {
margin: auto;
right: 110px;
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-play {
margin: auto;
right: 0;
left: 0;
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-forward {
margin: auto;
left: 110px;
right: 0;
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-order {
position: absolute;
left: 22px;
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-loop {
position: absolute;
right: 25px;
}
#anMusic-page .aplayer-info .aplayer-time .aplayer-icon-menu {
display: inline;
position: absolute;
right: 25px;
top: -90px;
}
#anMusic-page .aplayer-volume-bar-wrap {
bottom: 0px;
right: 7px;
}
#anMusic-page .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap {
left: -66px;
}
}

3)修改layout/page.pug文件,然后在你的音乐页面添加type:“music”

1
2
when 'music'
include includes/page/music.pug

4)在你的对应音乐页面的index.md下添加你的初始歌单配置信息,示例:

1
{% meting "xxxxx" "netease" "playlist" "mutex:true" "preload:auto" "theme:var(--font-color)" "order:list" "listmaxheight:320px" %}

5)注意:由于每个人metingJs插件版本不同,所以需要根据系统的情况修改以下源代码,如果你使用的是meting标签来构建歌单的,则无需改动。由于不同代码挂载Aplayer方式不同,如果你使用的是其他方式,那么就需要看一下上方源代码中能否获取Aplayer对象,对应代码const metingAplayer = window.aplayers[0];
判断能否获取该对象很简单,页面初始化后在前端console中打印window.aplayers[0],看输出是否为以下内容即可:
img.png