14、添加音乐

一、添加音乐列表

第一步：安装插件

1
yarn --save hexo-tag-aplayer

第二步：Fluid的配置文件中添加js和css

1
2
3
4
5
custom_js:
  - //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js  #/APlayer#/APlayer依赖
  - //cdn.jsdelivr.net/gh/metowolf/[email protected]/dist/Meting.min.js  #/APlayer依赖
custom_css:
  - //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css   #/APlayer依赖

第三步：全局配置

1
2
3
4
# aplayer
aplayer:  
  meting: true  
  asset_inject: false

第四步：建立音乐页面

1
hexo new page playlist

第五步：打开source\playlist\index.md

音乐主页
1
2
3
4
5
6
7
---
title: playlist
date: 2024-01-29 19:55:35
---

{% meting "9222697135" "netease" "playlist" "theme:#555" "mutex:true" "listmaxheight:1000px" "preload:auto" %}

拖拉式音乐列表

在你的footer的content添加下面代码

1
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="9222697135" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
参数含义

data-id: 表示歌单后面的id，分享给好友之后的歌单的uid等等，比方说：QQ音https://y.qq.com/n/ryqq/playlist/9138587524中的9138587524

二、MetingJS参数

引用：[APlayer & MetingJS 音乐播放器使用指南 - 流纹 - 博客园 (cnblogs.com)](https://www.cnblogs.com/lwk9527/p/17425769.html#:~:text=lrc-type%3D [歌词类型，默认0],list-folded%3D [列表是否折叠，默认false] list-max-height%3D列表最大高度%2C默认340px)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--MetingJS参数详情-->

<!--
id='外链播放器id',必须参数
type=[song=单曲, playlist=歌单, album=专辑, search=搜索结果, artist=艺术家],必须参数
server=[netease=网易云音乐, tencent=QQ音乐, kugou=酷狗音乐, xiami=虾米音乐, baidu=百度音乐],必须参数
fixed=启用固定模式，固定在左下角,默认false
mini=启用迷你模式,默认false
preload=[none,metadata,auto]
mutex=[互斥锁，默认true],默认false
order=[random=随机播放,list=列表播放]
loop=[all=全部循环, one=循环一次 ,none=不循环]
volume=[音量，默认0.7]
lrc-type=[歌词类型，默认0]
list-folded=[列表是否折叠，默认false]
list-max-height=列表最大高度,默认340px
storage-name=本地存储存储密钥，用于存储播放器设置,默认metingjs
-->