胶囊播放器的歌曲列表的显示
胶囊播放器的歌曲列表的显示
Luminet前提条件
此教程必须完成安知鱼的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
#.....
效果预览
添加JS
具体添加自定义CSS/JS的方法可以参考Hexo博客添加自定义css和js文件1
2
3bottom:
# 自定义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
即可