Hexo-Butterfly音乐播放器的添加

插件的安装与配置

安装 hexo-tag-aplayer 这款插件。执行如下指令:

1
npm install --save hexo-tag-aplayer

插件配置方式为修改Hexo 的配置文件中进行如下修改。就是你的Hexo根目录下的_config.yml文件。

1
2
3
aplayer:
meting: true
asset_inject: false

开启主题配置文件中的aplayerInject如下所示

1
2
3
4
# Inject the css and script (aplayer/meting) 
aplayerInject:
enable: true
per_page: true

普通界面播放器

1
{% meting "7422861869" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:400px" "preload:none" "theme:#ad7a86"%}

常用的选项如下所示:
server可选:netease(网易云音乐),tencent(QQ音乐),kugou(酷狗音乐),xiami(虾米音乐),baidu(百度音乐)。建议网易云
type可选:song(歌曲),playlist(歌单),album(专辑),search(搜索关键字),artist(歌手)。添加单曲选的歌曲,歌单选择playlist,可以自行尝试。
id获取示例: 打开网易云音乐,选择喜欢的歌单,在网页版打开,获取歌单list,填入即可。使用的时候将上边的ID号换为自己喜欢的歌单即可。注意歌单中不能包括VIP音乐,否则无法解析。建议单独建立一个歌单,以后有喜欢的音乐添加进去,网页也会自动同步添加。
lrcType设置为 -1默认显示歌词,放在fixed模式下比较合适。

也可以直接添加HTMI格式。

1
<div class="aplayer" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-preload="auto" data-theme="#3F51B5"></div>

全局吸底Aplayer模式

把 aplayer代码 插入到主题配置文件的 inject.bottom 即可。

1
2
3
4
inject:
head:
bottom:
- <div class="aplayer no-destroy" data-id="7422861869" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-lrcType="-1"> </div>

需要修改的参数就只有data-id、data-server、data-type、data-autoplay=”true”、data-lrcType=”-1”一些常用的参数,可以自行根据需要修改。

最后,如果你想切换页面时,音乐不会中断。请把主题配置文件的 pjax 设为 true即可。

1
2
3
pjax:
enable: ture
exclude:

Aplayer完整配置可选参数表
下面是官方所示的完整可选配置参数。

Name Default Description
container document.querySelector(‘.aplayer’) player container
fixed false enable fixed mode, see more details
mini false enable mini mode, see more details
autoplay false audio autoplay
theme ‘#b7daff’ main color
loop ‘all’ player loop play, values: ‘all’, ‘one’, ‘none’
order ‘list’ player play order, values: ‘list’, ‘random’
preload ‘auto’ values: ‘none’, ‘metadata’, ‘auto’
volume 0.7 default volume, notice that player will remember user setting, default volume will not work after user set volume themselves
audio - audio info, should be an object or object array
audio.name - audio name
audio.artist - audio artist
audio.url - audio url
audio.cover - audio cover
audio.lrc - see more details
audio.theme - main color when switching to this audio, it has priority over the above theme
audio.type ‘auto’ values: ‘auto’, ‘hls’, ‘normal’ or other custom type, see more details
customAudioType - see more details
mutex true prevent to play multiple player at the same time, pause other players when this player start play
lrcType 0 see more details
listFolded false indicate whether list should folded at first
listMaxHeight - list max height
storageName ‘aplayer-setting’ localStorage key that store player setting