胶囊播放器的歌曲列表的显示

前提条件

此教程必须完成安知鱼的butterfly魔改aplayer音乐,才可使用.
同时你的_config.anzhiyu.yml为

1
2
3
4
5
6
7
8
9
# 左下角音乐配置项
# https://github.com/metowolf/MetingJS
nav_music:
enable: true
console_widescreen_music: true
id: 8041247628
server: netease
all_playlist: https://music.163.com/#/playlist?id=8041247628
#.....

效果预览

code

添加JS

具体添加自定义CSS/JS的方法可以参考Hexo博客添加自定义css和js文件

1
2
3
bottom:
# 自定义js
- <script data-pjax src="/js/fix.js"></script>

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

function reloadfix() {
var centerConsoleBtn = document.getElementById("center");
var aplayerList = document.querySelector("#nav-music .aplayer-list");
aplayerList.style.display = "none";
var consoleElement = document.getElementById("console");
var consoleElement = document.getElementById("console");
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName === "class") {
var classList = mutation.target.classList;
if (!classList.contains("show")) {
aplayerList.style.display = "none";
}else{
aplayerList.style.display = "block";
}
}
}
,);
});


observer.observe(consoleElement, { attributes: true });
}
window.onload = reloadfix;
// 如果使用了pjax在加上下面这行代码
document.addEventListener('pjax:complete', reloadfix);

应用

最后直接

1
hexo cl ; hexo g ; hexo d

即可