如何给自己的主题加上音频

2023/1/14 2023/2/13 主题发展 hexo

主要文档

添加音频使用hexo-tag-aplayer插件，可查看官方中文文档
按照步骤进行
如果没有安装npm，可查看链接https://blog.csdn.net/Cleve_baby/article/details/125632341 进行安装

1.使用npm

在终端输入

npm install aplayer

如果安装失败，就手动安装

sudo npm install aplayer

2.安装yarn

 npm install -g yarn

安装完成后执行

 yarn add aplayer

到这里插件安装就完成了

3.添加代码到body里面

html代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<div id="aplayer"></div>
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>

js代码-播放器

这个需要先创建一个1.js文件，直接加入代码的话可能会失效

 const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg'
    }]
});

采用外链的形式添加到html里面

<script src="1.js"></script>

js代码-模块管理器

建一个2.js文件，添加以下代码

import 'APlayer/dist/APlayer.min.css';
import APlayer from 'APlayer';
const ap = new APlayer(options);

同上加到html里面

 <script src="2.js"></script>

到这里就可以看见播放器出现在页面了
2023-2
样式可以调成自己喜欢的，或者加入多首歌都可查看官方中文文档

无奈的地方

这个音频加入后可以正常播放，但是在网站内切换页面的时候会中断，音乐体验感大打折扣，折腾了七八个小时，看了大量资料，都是使用pjax来解决这个问题
然后我的主题不支持pjax，只有next主题和少部分butterfly可以使用pjax，我还得多学习一下pjax，早日给俺滴主题加上pjax🥹
要是有大佬能解决这个问题，尽管踢我，十分谢🙏🏻

LOADING...