效果图

1、安装 hexo-tag-aplayer 插件

1
npm install --save hexo-tag-aplayer

2、修改主题配置文件_config.butterfly.yml里的aplayerInject参数，假如无就添加

1
2
3
4
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true # 开启音乐播放器
  per_page: true #每个页面都有Aplayer

3、修改根目录下_config.yml里的aplayer参考，假如无就添加

1
2
3
aplayer:
  asset_inject: false
  meting: true

4、添加音乐播放器，在\camel52\source\music\index.md文件修改和添加以下内容，日期可以改成自己当前的

1
2
3
4
5
6
7
8
9
10
11
12
---
title: music
date: 2024-07-04 16:57:08
type: music
aplayer: true
top_img: false
comments: false
aside: false

---

{% meting "4392384889" "tencent" "playlist" "autoplay" "mutex:false" "listmaxheight:600px" "preload:none" "theme:*#ad7a86"%}

假如使用网易云音乐的改为

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

教程感谢君凉夜

安知鱼是这样设置的

1
meting-js(id="8152976493" server="netease" type="playlist" mutex="true" preload="auto" theme="var(--anzhiyu-main)" order="list")

可以改为

1
{% meting-js(id="8152976493" server="netease" type="playlist" autoplay="true" mutex="true" preload="auto" theme="#ad7a86" order="list")%}

我的其他歌单

1
{% meting "9266296292" "tencent" "playlist" "autoplay" "mutex:false" "listmaxheight:600px" "preload:none" "theme:*#ad7a86"%}
1
{% meting "8152976493" "netease" "playlist" "autoplay:false" "mutex:false" "listmaxheight:400px" "preload:none" "theme:#ad7a86"%}

另一个大佬牛奶咖啡的歌单

1
{% meting "523845661" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:500px" "preload:auto" %}