keep主题添加音乐播放器
之前使用 wordpress 搭建博客的时候，一直都会使用音乐播放器，然后现在换成 Github 搭建博客了，依然有这个想法，但是在网上查了很长时间都没找到一篇完整的针对 keep 主题添加音乐播放器的文章，但是功夫不负有心人，我还是成功搞好了，但还是有一点小问题：切换页面的时候音乐播放器会重新加载，导致音乐无法继续播放，并且音乐也会被刷新，不过好在经过改进，播放器刷新的速度快了很多，所以影响不会太大
首先，安装 APlayer 和 MetingJS 插件：
1
2
| npm install aplayer --save
npm install hexo-tag-aplayer --save
|
在 hexo 的配置文件添加：
1
2
3
| aplayer:
enable: true
meting: true
|
然后修改footer.ejs文件，在themes\keep\layout\_partial\footer.ejs文件中添加：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!-- 保持播放器组件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.min.js"></script>
<meting-js
id="网易云歌单的ID"
class="global-music"
server="netease"
type="playlist"
fixed="true"
autoplay="false"
order="random"
theme="#42b983"
style="position: fixed; bottom: 20px; left: 20px; z-index: 9999;">
</meting-js>
|
至于网易云歌单的 id，大家可以在网页登录自己的网易云，找到自己的歌单，然后查看 URL，最后的 id 参数就是歌单 id
然后在keep/source/css/style.styl中添加：
1
2
3
| .aplayer-fixed
z-index 9999 !important // 确保播放器位于最上层
bottom 20px !important // 调整播放器位置，防止被文章挡住
|
这一步是确保音乐播放器位于最上层，这样无论翻到哪个位置，都可以点击到音乐播放器
最后就是要修改一下自己的pjax.ejs文件，这个文件位于：keep\layout_partial\pjax目录下面：
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
| <%- __js('js/libs/pjax.min.js') %>
<script>
window.addEventListener('DOMContentLoaded', () => {
window.pjax = new Pjax({
selectors: [
'head title',
'.page-container',
'.pjax'
],
history: true,
debug: false,
cacheBust: false,
timeout: 0,
analytics: false,
currentUrlFullReload: false,
scrollRestoration: false,
});
document.addEventListener('pjax:send', () => {
KEEP.utils.pjaxProgressBarStart()
let oldPlayer = document.querySelector('.global-music');
if (oldPlayer) {
let audio = oldPlayer.querySelector('audio');
if (audio) {
window.aplayerState = {
paused: audio.paused,
currentTime: audio.currentTime,
volume: audio.volume,
songUrl: audio.src
};
}
}
});
document.addEventListener('pjax:complete', () => {
KEEP.utils.pjaxProgressBarEnd()
let newPlayer = document.querySelector('.global-music');
if (newPlayer && window.aplayerState) {
let audio = newPlayer.querySelector('audio');
if (audio && audio.src === window.aplayerState.songUrl) {
audio.currentTime = window.aplayerState.currentTime;
audio.volume = window.aplayerState.volume;
if (!window.aplayerState.paused) {
audio.play();
}
}
}
window.pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script'))
KEEP.initExecute()
});
});
</script>
|
这一步其实是为了确保我点击其他页面的时候，播放器不会被刷新，音乐可以接着播放，然后试了一下没啥用，嘶，太难受了，这里将这个代码发出来是希望大家可以纠正一下，然后给一点优化的建议，感谢！！！
既然无法保证切换页面的时候音乐不变，那就优化速度，下面是优化速度的代码：
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
| <%- __js('js/libs/pjax.min.js') %>
<script>
window.addEventListener('DOMContentLoaded', () => {
window.pjax = new Pjax({
selectors: [
'head title',
'.page-container',
'.pjax'
],
history: true,
debug: false,
cacheBust: false,
timeout: 0,
analytics: false,
currentUrlFullReload: false,
scrollRestoration: false,
});
document.addEventListener('pjax:send', () => {
KEEP.utils.pjaxProgressBarStart()
});
document.addEventListener('pjax:complete', () => {
KEEP.utils.pjaxProgressBarEnd()
window.pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script'))
KEEP.initExecute()
let oldMeting = document.querySelector('.global-music');
if (oldMeting) {
let newMeting = oldMeting.cloneNode();
oldMeting.parentNode.replaceChild(newMeting, oldMeting);
}
});
});
</script>
|
