部署

安知鱼教程很清楚

此次仅说明几个不太清楚的地方和一些问题的解决方法

  • 安知鱼教程(点击查看)

  • 效果(点击查看)

  • 需要引入meting会与原来的aplayer冲突

    • 如果你使用了aplayer的音乐播放器
    • 原来的播放器会失效
    • 需要更改为meting的引入方式
  • 易出错的地方主要出现在js和css文件引入上

易错

第一个引入meting.js

butterflyconfig文件最下面(config里有很多不同插件的CDN引入,注意分辨)

正确的设置如下(注意缩进,meting_js是属于在option下引入)

CDN
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
# CDN
# Don't modify the following settings unless you know how they work
# 非必要請不要修改
CDN:
# The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
# option: local/jsdelivr/unpkg/cdnjs/custom
# Dev version can only choose. ( dev版的主題只能設置為 local )

internal_provider: local

# The CDN provider of third party scripts (第三方 js 的 cdn 配置)
# option: local/jsdelivr/unpkg/cdnjs/custom
# when set it to local, you need to install hexo-butterfly-extjs
third_party_provider: jsdelivr

# Add version number to url, true or false
version: false

# Custom format
# For example: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
custom_format:
option:
pjax:
enable: ture
exclude:
# 对于一些第三方插件,有些并不支持 pjax 。 你可以把网页加入到 exclude 里,这个网页会被 pjax 排除在外。 点击该网页会重新加载网站
#meting_js: https://npm.elemecdn.com/hexo-anzhiyu-music@1.0.1/assets/js/Meting2.min.js

# main_css:
# main:
# utils:
# translate:
# local_search:
# algolia_js:
# algolia_search:
# instantsearch:
# docsearch_js:
# docsearch_css:
# pjax:
# gitalk:
# gitalk_css:
# blueimp_md5:
# valine:
# disqusjs:
# disqusjs_css:
# twikoo:
# waline_js:
# waline_css:
# giscus:
# sharejs:
# sharejs_css:
# mathjax:
# katex:
# katex_copytex:
# mermaid:
# canvas_ribbon:
# canvas_fluttering_ribbon:
# canvas_nest:
# lazyload:
# instantpage:
# typed:
# pangu:
# fancybox_css:
# fancybox:
# medium_zoom:
# snackbar_css:
# snackbar:
# activate_power_mode:
# fireworks:
# click_heart:
# ClickShowText:
# fontawesome:
# flickr_justified_gallery_js:
# flickr_justified_gallery_css:
# aplayer_css:
# aplayer_js:
# meting_js:
# prismjs_js:
# prismjs_lineNumber_js:
# prismjs_autoloader:
# artalk_js:
# artalk_css:
# busuanzi:
# abcjs_basic_js:

创建页面

创建页面, 新建 source/music/index.md 文件

1
2
3
4
5
6
7
8
9
---
title: 音乐馆
date: 2021-04-24 21:41:30
type: music
aplayer: true
top_img: false
comments: false
aside: false
---

按照安知鱼的教程

创建页面,新建themes/butterfly/layout/includes/page/music.pug,并方便后续可以使用 css 将页面(page)本身的样式给去除。此处可以自行修改server和歌单 id,我的 id 是 8152976493,歌单 id 是对应的服务商的歌单页面路径最后面的那个数字。

1
2
#anMusic-page
meting-js(id="8152976493" server="netease" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list")

其他按照安知鱼的设置即可

js/css引入

直接在

1
2
inject:
head:

下添加

1
2
# 自定义js
- <script async data-pjax src="/js/anzhiyu.js"></script>
1
2
# 自定义css
- <link rel="stylesheet" href="/css/music.css">

这个js是负责加载页面背景图anzhiyu.js

博客目录\source\js\anzhiyu.js下创建

anzhiyu.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
var anzhiyu = {
// 音乐节目切换背景
changeMusicBg: function (isChangeBg = true) {
if (window.location.pathname != "/music/") {
return;
}
const anMusicBg = document.getElementById("an_music_bg");

if (isChangeBg) {
// player listswitch 会进入此处
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加载完成
console.info(anMusicBg);
if (musiccover) {
clearInterval(timer);
anMusicBg.style.backgroundImage = musiccover.style.backgroundImage;
// 绑定事件
anzhiyu.addEventListenerChangeMusicBg();

// 暂停nav的音乐
if (
document.querySelector("#nav-music meting-js").aplayer &&
!document.querySelector("#nav-music meting-js").aplayer.audio.paused
) {
anzhiyu.musicToggle();
}
}
}, 100);
}
},
addEventListenerChangeMusicBg: function () {
const anMusicPage = document.getElementById("anMusic-page");
const aplayerIconMenu = anMusicPage.querySelector(".aplayer-info .aplayer-time .aplayer-icon-menu");

anMusicPage.querySelector("meting-js").aplayer.on("loadeddata", function () {
anzhiyu.changeMusicBg();
console.info("player loadeddata");
});

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";
});

document.getElementById("menu-mask").addEventListener("click", function () {
if (window.location.pathname != "/music/") return;
anMusicPage.querySelector(".aplayer-list").classList.remove("aplayer-list-hide");
});
},
};

// 调用
anzhiyu.changeMusicBg(false);

css文件music.css

博客目录\source\css\music.css下创建

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
#page:has(#anMusic-page) {
border: 0;
box-shadow: none !important;
padding: 0 !important;
background: transparent !important;
}
#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);
}
body:has(#anMusic-page) #an_music_bg {
display: block;
}

body:has(#anMusic-page) {
background: rgb(13, 13, 13);
}

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

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

#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: 14px;
color: #fff;
}
#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: var(--anzhiyu-white) !important;
}
#anMusic-page .aplayer-info .aplayer-controller .aplayer-thumb {
-webkit-transform: none;
transform: none;
background: #fff !important;
}
#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;
}

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

#anMusic-page .aplayer-info .aplayer-time .aplayer-icon path {
fill: var(--anzhiyu-white);
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: var(--anzhiyu-white);
}

#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: var(--anzhiyu-white);
}

body:has(#anMusic-page) .s-sticker div {
color: var(--anzhiyu-white) !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: 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;
}
}

问题

出现跨域问题

自建API或者使用其他人的公益API。

安知鱼教程

开放API

在官方的meting api挂掉以后涌现了一大批优秀的公益api

在安知鱼主题中只需在CDN.option.meting_api 填入下面中的任何一个即可


meting_js没办法和原生的aplayer兼容,引入这个Meting2_js后,左下角的贴底全局音乐播放不了了

如果你使用了aplayer的音乐播放器
原来的播放器会失效,Aplayer音乐都不显示了
需要更改为meting的引入方式

meting引入方式

1
- <meting-js id="${id}" server=${server} type="playlist" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list"></meting-js>

aplayer教程

引入后没有磁吸,而是显示在底部

参数使用和之前一样的,只不过去除前缀data-,应该是fixed模式。

添加fixed模式


背景全黑,无任何显示

打开F12 控制台一直返回null

确保cdn选项中的meting被正确引入

参见上面的meting引入(检查格式,及引入方式)


建议

js/css文件建议保存在本地再用绝对路径添加