网硕互联帮助中心本人的个人博客最近已经正式完成icp备案与公安备案，成功拿到域名并完成解析。
个人博客链接：zefanpo的学习生活记录本 – 探知世界，寻求本心
这是本人博客的实际显示效果（包含播放器实现效果）：
关于hexo博客添加aplayer的教程其实网上有很多，但基本都是连接到腾讯或者网易云平台的音源，导致付费VIP歌曲只能播放30秒，令我非常难受。我就希望能够实现aplayer播放我网页服务器本地上传上去的音乐mp3文件，但是网上相关教程非常少而且不明晰，或者是针对其他主题，又或者是无法实现这种简洁好看的全局吸底效果。所以自己花费了五六个小时研究方法，最后虽然是用笨方法但也是成功实现了，自己踩了很多坑也会稍微提一嘴。
废话不多说，我们直接开始
（本文需要一定hexo博客与butterfly主题的使用基础）
1.安装aplayer插件（其实也许不一定需要但以防万一）
找到自己hexo博客的根目录，以我的目录F:\\hexo-blog为例，打开cmd，输入以下代码安装
npm install –save hexo-tag-aplayer
2.修改_config.yml
前往hexo根目录，找到_config.yml（此为hexo的配置文件），加入以下代码配置
aplayer:
meting: true
asset_inject: false
3.修改_config.butterfly.yml
我在hexo根目录下创建了_config.butterfly.yml，原生butterfly主题的hexo是没有这个文件的，可以去F:\\hexo-blog\\themes\\butterfly目录下把该目录下的_config.yml内容复制过来，并改名_config.butterfly.yml，这是butterfly主题的主题配置文件，和hexo配置文件在一个文件夹下方便操作。
进入该配置文件，找到下列配置并修改为如下：
aplayerInject:
enable: true
per_page: true
4.准备一段aplayer的html配置代码
我的aplayer配置代码示例如下，可以直接参照这个模板：
<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>
<div id='aplayer'></div>
<script>
var ap = new APlayer
({
container: document.getElementById('aplayer'),
showlrc: false,
fixed: true,
loop: 'all',
autoplay: true,
mutex: true,
order: 'random',
audio: [
{
title: 'Searching for a Light',
author: 'Nyte',
url: '/music/Searching for a Light.mp3',
cover: 'http://p2.music.126.net/T3R4QuaDnckGZ5IYSYKvhg==/109951167816942371.jpg'
},
{
title: '未知-memory',
author: 'Moye',
url: '/music/memory.mp3',
cover: 'http://p1.music.126.net/rQGsZnG75FBRCX9v6dZf_g==/18252992533044792.jpg'
}
]
});
ap.init();
</script>
我的音乐文件存放在F:\\hexo-blog\\themes\\butterfly\\source\\music，因此设置url时只需设置/music/音乐文件名.mp3即可，其余配置均可根据自行喜好更改，如需增加音乐列表请在audio项自行增加项目即可，我的配置会使aplayer随机播放循环整个音乐列表并全局吸底，并且不显示歌词（我基本只听纯音乐），如果需要显示歌词请设置showlrc: true，并自行在audio部分增加lrc项并配置歌词文件。cover对应歌曲的封面显示图片，这里提供一种方便快捷的获取方法（以网易云为例）：
打开网易云，进入你需要的对应歌曲的页面：
点击在新标签页中打开图片
复制打开的图片窗口中的这一段即是我们需要的歌曲封面图片链接，黏贴到上面配置代码中的cover一项中即可。
5.叫ai帮你把配置代码变成一整行（以百度为例）
打开百度的ai搜索，叫它帮你把上面的那一大段html代码变成一行并去掉冒号后的空格，如图所示：
有能力的人可以使用chatgpt，体验会更好，没有字数的限制。
总之我们现在拥有了一整行aplayer的html配置代码，复制，找到_config.butterfly.yml文件中的inject配置项，并黏贴至bottom处，如下图所示：
现在，保存文件，运行hexo cl和hexo g -d上传服务器，就可以实现你的全局吸底并且播放本地音源的aplayer了！
6.我自己的踩坑
实际上我自己摸索花的时间远比这套操作要长，问题主要出在最后_config.butterfly.yml文件对bottom的配置中，由于aplayer这段配置代码比较长，我一开始的想法是建立一个html文件用来存放这段代码，然后在bottom处以iframe的方式将这个html文件引入，我也是后来才知道以iframe的方式引入html文件的操作会导致许多难以解决的疑难bug。iframe的使用导致我的aplayer一直被固定在整个博客网页的最左下角而不会随着页面滚动而移动，并且还使得aplayer附近的背景页面出现了部分空白、aplayer部分操作按钮丢失等等奇怪问题。最后我也是灵光一闪想到不要再把aplayer的配置代码放在外部以文件的形式引入，而是直接整合成一行html代码再引入，并且借助ai轻松实现了这个目的，虽然这样使得操作变得繁琐且使得后续对歌单的修改更为不方便，但至少aplayer成功实现了它应有的功能，至少我自己认为还是非常不错的，如果对整个执行过程有疑问也欢迎在评论区提出。
不过，我依然相信这个问题应该有着更好的解决方案，主要还是因为我本人才疏学浅，因而百思不得其解。如果有大佬能够提出更好的解决方案，欢迎在评论区指正，万分感谢。
评论前必须登录！
注册