安装aplayer
在博客文件夹根目录打开git bash 并执行以下命令
1 | npm install --save hexo-tag-aplayer |
安装完之后会发现/node_modules下多了一个aplayer

将其中的dist文件夹复制粘贴到主题目录下source文件中。
创建aplayer播放器样式
新建一个music.js 文件,并输入以下内容,放到主题的source文件夹中(我放在source/js/diy/music.js)
1 | const ap = new APlayer({ |

更多aplayer播放器参数配置信息请查看hexo上的aplayer应用
部署到页面
如果你只需要在主页面吸底显示,则将以下代码添加到主题文件下的\layout\_partial\footer.ejs即可
1 | <link rel="stylesheet" href="/dist/APlayer.min.css"> |
如果你想要实现全局吸底,请将以上代码移动到主题文件下的layout\_partial\footer-other.ejs

使用pjax实现全局播放
将以下代码放入layout/layout.ejs 文件中的在head标签里面,body标签外(比如在开头)
1 | <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> |

然后在layout.ejs中添加上id="pjax-container"并退出保存。

然后打开主题文件下的layout\_partial\header.ejs ,并在其中也加上id="pjax-container"并退出保存。

再打开\layout\_partial\nav.ejs,也在其中加上id="pjax-container",并退出保存。

此时,如果还不行,请进行以下步骤
打开主题文件下的layout\plug-in\aplayer.ejs,将其中的内容全部注释。
至此,Ok。附一张效果图

写在最后
作为一个小白,为了在自己博客上添加一个音乐播放器,我两天尝试了n种方法,终于找到了一种适配flexblock主题的方案。本文是在a-c-dream大佬的教程基础上,解决从文章返回首页时,卡片的封面加载不出来问题。