安装aplayer

npm和github两种方式二选一，拿到dist文件夹就可以了。

npm安装

在hexo博客的文件夹根目录打开git bash，并输入:

npm install --save hexo-tag-aplayer

可以看到在node_module文件夹中多出来一个aplayer文件夹即可

为了方便，将这个dist文件夹复制一份到主题目录下的source文件夹中。

Github下载源码

去github clone源码，并复制dist文件夹到主题下的source。

配置js组件

这一步可以根据教程选择自己喜欢的模式。新建一个music.js（名字随便起），放到主题的source文件夹里（我放在source/js/diy/music.js）例如：

和我选择一样的跟随模式

const ap = new APlayer({container: document.getElementById('aplayer'),fixed: true,autoplay: true, //自动播放audio: [{name: '',artist: '',url: '',cover: '',}, ]
});

选择普通模式

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

等等

搞音乐外链

在一些网站上搜索，例如：https://www.ytmp3.cn/

好用是好用，但是没有cover，逼格不够；包含的音乐也有点少。

自己动手薅

比如说找deca joins的浴室，在页面按F12进入开发者模式，选择Network。
点击播放，找media类型的Request URL就是音乐的URL。
同样的找到想要的cover图片的URL，然后一起填到之前的music.js中。

例如我的：

const ap = new APlayer({container: document.getElementById('aplayer'),fixed: true,autoplay: true, //自动播放audio: [{name: "浴室",artist: 'deca joins',url: 'https://m704.music.126.net/20211212133437/6298f876daf4b3a20b984659f71f8968/jdyyaac/000c/560b/5153/7f43625368aa52c4fbb0f968fa2007d2.m4a?authSecret=0000017dad0be60506550aa4681408a0',cover: 'https://p1.music.126.net/byjfkEIOWI_RmxSKEWTPyw==/18910500486297525.jpg?param=200y200',    },]
});

布置到想要的页面中

因为我用的是fluid主题，作者在_config.yml文件中预留了修改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>

值得注意的是，这里的id=“aplayer”要和上面music.js中的container: document.getElementById(‘aplayer’)填的Id相同。

然后就保存发布即可！

最终效果：

TODO

如何获取歌词lrc，有哪位老哥知道可以和我分享一下。感谢！

hexo博客fluid主题添加aplayer组件相关推荐

为Hexo博客next主题添加友链
为Hexo博客next主题添加友链 20230427153826|left
hexo博客 Maupassant主题添加萌妹纸、萌宠
给hexo博客养一个萌妹子或者萌宠,也是偶然之间发现可以添加可爱的妹纸或者是萌宠,发现挺好玩的,而且作者提供了很多模型供你选择,没事的时候还可以逗一逗 ? 文章目录本博文的简述or解决问题? 获取 ...
hexo博客next主题添加对数学公式的支持
hexo博客默认为markdown格式,但是新搭建的hexo博客不支持公式渲染,下面介绍hexo博客next主题下添加对数学公式支持的方法. 环境说明: hexo版本:5.4.1 next版本: 最新 ...
用Github Pages+Hexo搭建博客之(八)Hexo博客Next主题添加统计文章阅读量（访问量/浏览量/阅读次数）功能
[置顶][专栏]用Github Pages+Hexo搭建博客文章目录 [置顶][专栏][用Github Pages+Hexo搭建博客](https://blog.csdn.net/qq_342439 ...
hexo博客yilia主题添加复制代码块功能
博客中的复制代码块功能还是挺实用的,本文参考自这个博客,感谢并膜拜这位大佬,该博客应该是yilia主题添加复制代码块功能的首创,详细记录了整个过程,看起来比较繁琐(无贬义),所以我单独整理一份最终版 ...
Hexo博客yilia主题添加Gitment评论系统
gitment是imsun利用github上的issues做的评论系统,我这里大力推荐,原因有三: 注册简单,只要填写APP名和主页地址实现方便,只要简单的配置没有广告,这个很重要注册OAuth ...
hexo博客yilia-plus主题更换Beaudar评论插件
文章目录 hexo博客yilia-plus主题更换Beaudar评论插件一.安装Beaudar app. 二.添加到主题中 1.直接拉取仓库到本地. 2. 自己进行配置三. 一些问题 hexo博客 ...
Github pages + Hexo 博客 yilia 主题使用畅言评论系统
文章首发地址:http://www.54tianzhisheng.cn/2017/04/13/Hexo-yilia-changyan/ , 转载请注明出处. 前言 Hexo的Yilia主题由于原来使用 ...
hexo博客yilia主题如何自定义个人博客的背景图片
hexo博客yilia主题博客背景的设置个人博客系列文章目录 hexo博客yilia主题所有文章模块缺失最新解决方案 hexo+yilia博客报错post.categories forEach ...

hexo博客fluid主题添加aplayer组件