說明：該配置基于Butterfly主題版本為 4.2.0，基本參考官方教程，不修改pug文件，主題已經集成了相關的設置，該博文對其部分內容進行補充。參考鏈接在文章末尾給出。
我的個人博客主頁：GuoDong の Blog ，鏡像 Gitee 。CSDN在渲染可能與個人博客渲染不同，歡迎點擊我的主頁。博客會在兩個平臺同步更新。歡迎點擊我的主頁。

文章目錄

• 插件的安裝與配置
• 普通界面播放器
• 全局吸底Aplayer模式
• 演示
• • 1，普通列表模式
  • 2，單曲播放
  • 3，迷你模式
• 附錄
• • 參考鏈接
  • Aplayer完整配置可選參數表

插件的安裝與配置

安裝 hexo-tag-aplayer 這款插件。執行如下指令：

npm install --save hexo-tag-aplayer

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

aplayer:meting: trueasset_inject: false

開啟主題配置文件中的aplayerInject如下所示

# Inject the css and script (aplayer/meting) aplayerInject:enable: trueper_page: true

主題配置文件的就是自己建立的_config.butterfly.yml文件。建議使用vscode，可以進行全局搜索。更加方便進行修改。
至此就已經可以使用了。下面介紹兩種最常用的使用。

普通界面播放器

以本博客為例，在博客的音樂頁面（\source\music\index.md文件）添加如下：

{% 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模式下比較合適。

基本上修改的參數以上就已經足夠了。ID獲取的方式如下。完整的參數表見附錄，也可以去參考鏈接中查看。

也可以直接添加HTMI格式。

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

需要修改的參數已經給出，可以自行修改。

全局吸底Aplayer模式

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

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即可。

pjax:enable: tureexclude:

演示

1，普通列表模式

對應代碼注意這里將 "listmaxheight:100px"列表高度調整為100，為了方便展示

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

{% meting “7422861869” “netease” “playlist” “autoplay” “mutex:false” “listmaxheight:100px” “preload:none” “theme:#ad7a86”%}

2，單曲播放

插入單曲使用如下方式

<div class="aplayer no-destroy" data-id="1441758494" data-server="netease" data-type="song" data-autoplay="true" data-lrcType="-1"> </div>

3，迷你模式

<div class="aplayer no-destroy" data-id="1441758494" data-server="netease" data-type="song" data-mini="true" data-autoplay="true" data-lrcType="-1"> </div>

附錄

參考鏈接

hexo-tag-aplayer的GitHub地址
aplayer官方說明文檔
butterfly官方教程

Aplayer完整配置可選參數表

下面是官方所示的完整可選配置參數。

NameDefaultDescription

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

總結

以上是生活随笔為你收集整理的Hexo-Butterfly音乐播放器的添加的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。