之前写过一篇文章,是将APlayer音乐播放器放到左侧的(详见:hexo+yilia添加背景音乐),但是在手机端时,因为左侧边栏会被隐藏,因此也就会将播放器给隐藏掉。也就会是说手机端不能显示该播放器。

这里换一种方式,直接添加到整个页面中,使其在手机端也能使用。

说明

1. 如果你第一次安装APlayer音乐播放器,我建议你先看一下上面的那篇文章(如果你不介意手机端不能使用,按照那篇文章来也是OK的😬),这里不再详细介绍APlayer。
2. 如果你之前有按照我上面的文章进行配置,建议先删除之前的配置,不然可能会有冲突。

安装步骤

1.添加插件

找到对应H:\Hexo\themes\yilia\layout\layout.ejs的文件,在<body><div id="container"之间添加:

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
<!-- 《添加--APlayer音乐播放器,详见: https://aplayer.js.org/#/zh-Hans/ -->
<% if(theme.aplayer.enable) { %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">

<div id="aplayer" style="text-align:left;z-index: 10;"></div>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>

<!-- 为方便修改,添加一个配置文件,修改时直接修改配置文件即可。 -->
<script type="text/javascript" src="<%- url_for('js/APlayer_config.js') %>"></script>

<!-- 根据封面自适应主题色,主要是作用于进度条 -->
<script type="text/javascript">
const colorThief = new ColorThief();
const setTheme = (index) => {
if (!ap.list.audios[index].theme) {
colorThief.getColorAsync(ap.list.audios[index].cover, function(color) {
ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
});
}
};
setTheme(ap.list.index);
ap.on('listswitch', (data) => {
setTheme(data.index);
});
</script>
<% } %>

注意

1. js/APlayer_config.js文件是APlayer的配置文件,需要自己新建,位置为:themes\yilia\source\js\APlayer_config.js,如果不懂参考之前的文章。

2.这里的<div id="aplayer"id需要与js/APlayer_config.jscontainer: document.getElementById('aplayer')的id一致。

2.添加样式

H:\Hexo\themes\yilia\source\main.0cf68a.css任意位置添加如下代码:

1
2
3
4
5
@media screen and (max-width: 800px) {
.aplayer {
opacity:0.8;
}
}

效果图

PC端:




手机端:

参考:为hexo博客yilia模版添加aplayer音乐播放器


【转载】:https://www.yansheng.xyz/article/bf60dd05.html