最近把博客的主题换成了AnZhiYu主题。什么都挺好,但是为了让它更适合自己,所以我除了根据官方文档把一些数据更换为自己博客的以外,又对主题本身做了点改动。现在把改动的过程记录在这里。

需要说明的是,以下所有代码均是参考他人的成果后写出的,在此我非常感谢各位大神的贡献。由于我没有接受过任何系统的编程教育,所以下面的代码可能不够“优雅”,实际运行也会有很多bug,不足之处还请各位多多指教。

一、加入小电台

(一)魔改MetingJS

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
class MetingJSElement extends HTMLElement {

connectedCallback() {
if (window.APlayer && window.fetch) {
this._init()
if (this.meta.choice == 'music') {
this._parseMusic()
}
if (this.meta.choice == 'radio') {
this._parseRadio()
}
}
}

disconnectedCallback() {
if (!this.lock) {
this.aplayer.destroy()
}
}

_camelize(str) {
return str
.replace(/^[_.\- ]+/, '')
.toLowerCase()
.replace(/[_.\- ]+(\w|$)/g, (m, p1) => p1.toUpperCase())
}

_init() {
let config = {}
for (let i = 0; i < this.attributes.length; i += 1) {
config[this._camelize(this.attributes[i].name)] = this.attributes[i].value
}
let keys = [
'server', 'type', 'id', 'api', 'auth', 'choice',
'auto', 'lock',
'name', 'title', 'artist', 'author', 'url', 'cover', 'pic', 'lyric', 'lrc',
]
this.meta = {}
for (let key of keys) {
this.meta[key] = config[key]
delete config[key]
}
this.config = config

this.api = this.meta.api || window.meting_api || 'https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r'
this.pllstapi = 'https://netease.project.ac.cn/dj/:type?rid=:id&r=:r'
if (this.meta.auto) this._parse_link()
}

_parse_link() {
let rules = [
['music.163.com.*song.*id=(\\d+)', 'netease', 'song'],
['music.163.com.*album.*id=(\\d+)', 'netease', 'album'],
['music.163.com.*artist.*id=(\\d+)', 'netease', 'artist'],
['music.163.com.*playlist.*id=(\\d+)', 'netease', 'playlist'],
['music.163.com.*discover/toplist.*id=(\\d+)', 'netease', 'playlist'],
['y.qq.com.*song/(\\w+).html', 'tencent', 'song'],
['y.qq.com.*album/(\\w+).html', 'tencent', 'album'],
['y.qq.com.*singer/(\\w+).html', 'tencent', 'artist'],
['y.qq.com.*playsquare/(\\w+).html', 'tencent', 'playlist'],
['y.qq.com.*playlist/(\\w+).html', 'tencent', 'playlist'],
['xiami.com.*song/(\\w+)', 'xiami', 'song'],
['xiami.com.*album/(\\w+)', 'xiami', 'album'],
['xiami.com.*artist/(\\w+)', 'xiami', 'artist'],
['xiami.com.*collect/(\\w+)', 'xiami', 'playlist'],
]

for (let rule of rules) {
let patt = new RegExp(rule[0])
let res = patt.exec(this.meta.auto)
if (res !== null) {
this.meta.server = rule[1]
this.meta.type = rule[2]
this.meta.id = res[1]
return
}
}
}

_parseMusic() {
if (this.meta.url) {
let result = {
name: this.meta.name || this.meta.title || 'Audio name',
artist: this.meta.artist || this.meta.author || 'Audio artist',
url: this.meta.url,
cover: this.meta.cover || this.meta.pic,
lrc: this.meta.lrc || this.meta.lyric || '',
type: this.meta.type || 'auto',
}
if (!result.lrc) {
this.meta.lrcType = 0
}
if (this.innerText) {
result.lrc = this.innerText
this.meta.lrcType = 2
}
this._loadPlayer([result])
return
}

let url = this.api
.replace(':server', this.meta.server)
.replace(':type', this.meta.type)
.replace(':id', this.meta.id)
.replace(':auth', this.meta.auth)
.replace(':r', Math.random())

fetch(url)
.then(res => res.json())
.then(result => this._loadPlayer(result))
}

async _fetchRadioPlaylist() {
let pllsturl = this.pllstapi
.replace(':type', this.meta.type)
.replace(':id', this.meta.id)
.replace(':r', Math.random())
const pllstres = await fetch(pllsturl)
const pllstdata = pllstres.json()
return pllstdata
}

_parseRadio() {
this._fetchRadioPlaylist().then(pllstdata => {
const djplaylist = []
for (var i = 0; i <= pllstdata.programs.length - 1; i++) {
const count = {
author: "",
lrc: "",
pic: "",
title: "",
url: ""
}
count['author'] = pllstdata.programs[i].dj.nickname
count['lrc'] = '[00:00.00]\u200B' + pllstdata.programs[i].description
count['pic'] = pllstdata.programs[i].coverUrl
count['title'] = pllstdata.programs[i].name
this.rid = pllstdata.programs[i].mainTrackId
let songurl = 'https://netease.project.ac.cn/song/url?id=:rid&r=:r'
.replace(':rid', this.rid)
.replace(':r', Math.random())
fetch(songurl)
.then(data1 => data1.json())
.then(res1 => {
count['url'] = res1.data[0].url.replace(/http/, 'https')
})
djplaylist.push(count)
}
setTimeout(() => {
this._loadPlayer(djplaylist),
3000
})
})
}

_loadPlayer(data) {

let defaultOption = {
audio: data,
mutex: true,
lrcType: '',
storageName: ''
}
if (this.meta.choice == 'music') {
defaultOption['lrcType'] = 3
defaultOption['storageName'] = 'metingjs'
}
if (this.meta.choice == 'radio') {
defaultOption['lrcType'] = 1
defaultOption['storageName'] = 'metingradiojs'
}

if (!data.length) return

let options = {
...defaultOption,
...this.config,
}
for (let optkey in options) {
if (options[optkey] === 'true' || options[optkey] === 'false') {
options[optkey] = (options[optkey] === 'true')
}
}

let div = document.createElement('div')
options.container = div
this.appendChild(div)

this.aplayer = new APlayer(options)
}

}

console.log('\n %c MetingJS v2.0.1 %c https://github.com/metowolf/MetingJS \n', 'color: #fadfa3; background: #030307; padding:5px 0;', 'background: #fadfa3; padding:5px 0;')

if (window.customElements && !window.customElements.get('meting-js')) {
window.MetingJSElement = MetingJSElement
window.customElements.define('meting-js', MetingJSElement)
}

保存后,将js文件存放在在线平台上供调用。

(二)更改主题内相关文件

1.更改_config.anzhiyu.yml

1
2
3
4
5
6
7
8
9
menu:
我的:
# 添加以下内容:
小电台: /radio/ || anzhiyu-icon-radio

CDN:
option:
# 添加meting_js:
meting_js: https://example.com/XX.js # 路径为保存于在线平台上的魔改MetingJS路径

2.更改themes/anzhiyu文件夹内文件

①修改source/js/utils.js

A.将

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 获取自定义播放列表
getCustomPlayList: function () {
if (!window.location.pathname.startsWith("/music/")) {
return;
}
const urlParams = new URLSearchParams(window.location.search);
const userId = "网易云歌单id";
const userServer = "netease";
const anMusicPageMeting = document.getElementById("anMusic-page-meting");
if (urlParams.get("id") && urlParams.get("server")) {
const id = urlParams.get("id");
const server = urlParams.get("server");
anMusicPageMeting.innerHTML = `<meting-js id="${id}" server=${server} type="playlist" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list" list-max-height="calc(100vh - 169px)!important"></meting-js>`;
} else {
anMusicPageMeting.innerHTML = `<meting-js id="${userId}" server="${userServer}" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list" list-max-height="calc(100vh - 169px)!important"></meting-js>`;
}
anzhiyu.changeMusicBg(false);
},

处修改为:

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
// 获取自定义播放列表
getCustomPlayList: function () {
if (!window.location.pathname.startsWith("/music/")) {
return;
}
const urlParams = new URLSearchParams(window.location.search);
const userId = "122732544";
const userServer = "netease";
const anMusicPageMeting = document.getElementById("anMusic-page-meting");
if (urlParams.get("id") && urlParams.get("server")) {
const id = urlParams.get("id");
const server = urlParams.get("server");
anMusicPageMeting.innerHTML = `<meting-js id="${id}" server=${server} type="playlist" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list" list-max-height="calc(100vh - 169px)!important" choice="music"></meting-js>`;
} else {
anMusicPageMeting.innerHTML = `<meting-js id="${userId}" server="${userServer}" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list" list-max-height="calc(100vh - 169px)!important" choice="music"></meting-js>`;
}
anzhiyu.changeMusicBg(false);
},
// 获取自定义电台播放列表
getCustomRadioPlayList: function () {
if (!window.location.pathname.startsWith("/radio/")) {
return;
}
const urlParams = new URLSearchParams(window.location.search);
const userId = "968397564";
const anMusicPageMeting = document.getElementById("anMusic-page-meting");
if (urlParams.get("id")) {
const id = urlParams.get("id");
anMusicPageMeting.innerHTML = `<meting-js id="${id}" type="program" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list" list-max-height="calc(100vh - 169px)!important" choice="radio"></meting-js>`;
} else {
anMusicPageMeting.innerHTML = `<meting-js id="${userId}" type="program" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list" list-max-height="calc(100vh - 169px)!important" choice="radio"></meting-js>`;
}
anzhiyu.changeMusicBg(false);
},

B.将function anMusicPageMenuAask()函数修改为

1
2
3
4
5
function anMusicPageMenuAask() {
if (window.location.pathname != "/music/" && window.location.pathname !="/radio/") {
document.getElementById("menu-mask").removeEventListener("click", anMusicPageMenuAask);
return;
}

②修改source/js/main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
anzhiyu.initIndexEssay();
anzhiyu.changeTimeInEssay();
anzhiyu.removeBodyPaceClass();
anzhiyu.qrcodeCreate();
anzhiyu.changeTimeInAlbumDetail();
anzhiyu.reflashEssayWaterFall();
anzhiyu.sayhi();
anzhiyu.stopImgRightDrag();
anzhiyu.addNavBackgroundInit();
anzhiyu.setValueToBodyType();
anzhiyu.catalogActive();
anzhiyu.tagsPageActive();
anzhiyu.categoriesBarActive();
anzhiyu.topCategoriesBarScroll();
anzhiyu.switchRightClickMenuHotReview();
anzhiyu.getCustomPlayList();
anzhiyu.addEventListenerConsoleMusicList(false);
anzhiyu.initPaginationObserver();

处添加 anzhiyu.getCustomRadioPlayList();

③修改layout/includes/music.pug


meting-js(id=nav_music_id server=nav_music_server type="playlist" mutex="true" preload="none" theme="var(--anzhiyu-main)" data-lrctype="0" order="random")
处修改为
meting-js(id=nav_music_id server=nav_music_server type="playlist" mutex="true" preload="none" theme="var(--anzhiyu-main)" data-lrctype="0" order="random" choice="music")

④修改layout/includes/page/essay.pug


meting-js(id=item.aplayer.id, server=item.aplayer.server, type="song", mutex="true",preload="none", theme="var(--anzhiyu-main)", data-lrctype="0", order="list")
处修改为
meting-js(id=item.aplayer.id, server=item.aplayer.server, type="song", mutex="true",preload="none", theme="var(--anzhiyu-main)", data-lrctype="0", order="list", choice="music")

⑤修改layout/includes/third-party/aplayer.pug


script(src=url_for(theme.asset.meting_js))
处修改为
script(src=url_for(theme.CDN.option.meting_js))

3.创建source/radio/index.md文件

1
2
3
4
5
6
7
8
---
title: 小电台(β)
date: 2023-09-17 19:59:43
type: music
top_img: false
comments: false
aside: false
---

二、更改左下角音乐相关文件

(一)更改_config.anzhiyu.yml

1
2
3
4
5
6
7
nav_music:
enable: true
console_widescreen_music: false # 宽屏状态控制台显示音乐而不是标签 enable为true 控制台依然会显示
id: 1991309787
server: netease
type: song # 添加type,参见https://github.com/metowolf/MetingJS/README.md中Option部分。
all_playlist: https://music.163.com/#/album?id=153603295

(二)更改layout/includes/music.pug

1
2
3
4
5
6
7
- const nav_music_id = theme.nav_music.id
- const nav_music_server = theme.nav_music.server
- const nav_music_type = theme.nav_music.type #对应_config.anzhiyu.yml
#nav-music
a#nav-music-hoverTips(onclick='anzhiyu.musicToggle()' accesskey="m") 播放音乐
#console-music-bg
meting-js(id=nav_music_id server=nav_music_server type=nav_music_type mutex="true" preload="none" theme="var(--anzhiyu-main)" data-lrctype="0" order="random" choice="music") #对应_config.anzhiyu.yml