之前写过一篇文章，是将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.js中container: 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