hexo如何添加音乐播放器
安装aplayer
1、npm和github两种方式二选一，拿到dist文件夹就可以了。
1.1npm安装（第一种方法安装）
在hexo博客的文件夹根目录打开git bash，并输入:
npm install --save hexo-tag-aplayer
可以看到在node_module文件夹中多出来一个aplayer文件夹即可
为了方便，将这个dist文件夹复制一份到主题目录下的source文件夹中。
1.2Github下载源码（第二种方法安装）
去github clone源码，并复制dist文件夹到主题下的source。
配置js组件
这一步可以根据教程选择自己喜欢的模式。新建一个music.js（名字随便起），放到主题的source文件夹里（我放在source/js/diy/music.js）例如：
和我选择一样的跟随模式
1 | |
选择普通模式
1 | |
等等
搞音乐外链
在一些网站上搜索，例如：https://www.ytmp3.cn/
好用是好用，但是没有cover，逼格不够；包含的音乐也有点少。
自己动手薅
比如说找*Ngay Tho (Remix)*的浴室，在页面按F12进入开发者模式，
因个人的浏览器而定选择Network。
点击播放，找media类型的Request URL就是音乐的URL。
同样的找到想要的cover图片的URL，然后一起填到之前的music.js中。
例如我的：
const ap = new APlayer({
container: document.getElementById('aplayer'),
lrcType: 3,
fixed: true,
autoplay: true, //自动播放
audio: [
{
name: "爱如潮水",
artist: '张信哲',
url: 'https://m801.music.126.net/20240114230849/4278582de446b0733e4679dfd3b6e43e/jdyyaac/565a/0e0b/540e/a018f512139a628140c5cdfb1bb47e72.m4a',
cover: 'https://p1.music.126.net/xt_oovsCzByJNCVOZLWgkA==/2946691201348447.jpg?param=200y200',
},
{
name: 'Ngay Tho (Remix)',
artist: '无忧',
url: 'https://m801.music.126.net/20240115004135/7a99a2eb2f00cbca9c53fcbf78cdb634/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/5415126558/0438/27e9/0261/fb50d2c575e99bee52e84fc65ee507eb.m4a',
cover: 'https://p2.music.126.net/vveHW4P1RYjCo_YO20lcQg==/109951165562089246.jpg?param=200y200',
lrc: '[00:00.00]时间不会等谁 直到我意识到\n[00:00.30]爱情就像个愚蠢的笑话\n[00:00.33]还是你天真地相信我?\n[00:00.39]花瓣凋零 细雨飘洒\n心因你跳跃 脑海都是你的身影\n躺下两个多小时了 但我还未进入梦乡\n我的脑袋还在想些什么\n以前每晚都会打个电话\n现在已经忘了你的声音\n在你耳边低语\n我爱你 都是谎言\n那是因为你太天真了以为是个梦\n因为你太天真了以为爱情是一场梦\n时间不会等谁 直到我意识到\n 爱情就像个愚蠢的笑话\n 还是你天真地相信我?\n花瓣凋零 细雨飘洒\n心因你跳跃 脑海都是你的身影\n躺下两个多小时了 但我还未进入梦乡\n我的脑袋还在想些什么\n 以前每晚都会打个电话\n现在已经忘了你的声音\n在你耳边低语\n我爱你 都是谎言\n那是因为你太天真了以为是个梦\n因为你太天真了以为爱情是一场梦\n因为你太天真了以为爱情是一场梦[00:04.17]',
}
]
});
custom_head: ''
custom_html: '<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/js/diy/music.js"></script>'
container: document.getElementById(‘aplayer’)填的Id相同。
然后就保存发布即可！
最终效果：
2、卸载–save hexo-tag-aplayer插件
2.1卸载命令
1 | |
2.2卸载之后会产生一堆问题
如下问题困扰了自己很久
问题描述：
2.2.1.问题描述，自己的hexo-fluid主题配置了–save
hexo-tag-aplayer音乐播放插件，打开总是显示
播放歌曲报错
2.2.2.于是就有了卸载插件的想法，用npm卸载了–save hexo- tag-aplayer插件，结果卸载不完全，就手动删除了本地仓库与远程仓库–savehexo-tag-aplayer的各个配置
2.2.3.结果现在每次用edge浏览器打开自己的博客网站，https://dzq88.github.io 控制台就有好几个报错
2.2.4.报错内容如下:
浏览器get不到以下内容
这是打开自己的博客网页在浏览器控制台所遇到的三个问题
（1）GET https://dzq88.github.io/dist/APlayer.min.css net::ERR_ABORTED 404 (Not Found)
dzq88.github.io/:932
（2）GET https://dzq88.github.io/dist/APlayer.min.js net::ERR_ABORTED 404 (Not Found)
dzq88.github.io/:932
（3）GET https://dzq88.github.io/js/diy/music.js net::ERR_ABORTED 404 (Not Found)
1 | |
3、解决问题的方法：
3.1在五一时请教了七夏浅笑
得到的答复如下：
我這邊也沒有辦法看到你的主題原始碼喔，不過可
以看到不是動態插入的，但是不能確定是不是在
hexo g生成的時候插入的，需要看原始碼才知道
的。
你可以把整個資料夾在VSCode之類的編輯器中
打開，然後使用全域檢索的功能搜尋「 aplayer」
關鍵字進行排查。
3.2按照 七夏浅笑给的建议排查
（1）打开自己的编辑器VSCode
在Visual Studio Code内按快捷键 Ctrl + k + o 打开HEXO博客源码文件夹内的themes文件夹
然后再在Visual Studio Code内按快捷键 Ctrl+ Shift + F，打开Visual Studio Code全局搜索，在弹出的搜索框内输入APlayer进行全文件夹搜索，在搜索的结果处 Ctrl+鼠标单击，自己定位去到内容处修改。
搜索结果如下：
在fluid的config.yml发现了要找的信息
1 | |
（2）最终排除错误
打开源码仓库，删除博客源码文件夹themes/fluid/_config.yml文件夹内的如下代码保存本地与远程仓库即可
1 | |
4、总结
4.1每当自己遇到棘手的问题时，应该如何办？
先自己排查问题的原因，然后试着自己查资料排查处理问题！
如果试着自己尽力排查还是解决不了，这时应该多向有经验的人去请教
在请教的同时，自己应该把所遇问题的实际情况描述清楚给被请教的人听或看
只有这样，被请教的人才好给出合理的建议
最后，无论问题是否得到解决，应该把结果反馈给被请教者，并同时送上感谢！