Hexo-Fluid主题添加音乐页面

效果预览：https://bynote.cn/playlist/

如果你想使用音乐页面，很多人都会推荐安装hexo-tag-aplayer这款插件。这款插件通过Hexo独有的标签外挂，我们可以很方便的写入一些参数，插件就会帮我们生成对应的html。
例如：
如果使用插件，在markdown中要这样写

{% meting "000PeZCQ1i4XVs" "tencent" "artist" "theme:#3F51B5" "mutex:true" "preload:auto" %}

其会被渲染为

<div id="aplayer-uxAIfEUs" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-mode="circulation" data-autoplay="false" data-mutex="true" data-listmaxheight="340px" data-preload="auto" data-theme="#3F51B5"></div>

1.安装音乐插件

安装插件

npm install --save hexo-tag-aplayer

在主题配置文件_config.yml中custom下引入插件依赖的js和css。

custom_js:- //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js  #/APlayer#/APlayer依赖- //cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js  #/APlayer依赖
custom_css:- //cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css   #/APlayer依赖

然后在网站的根目录下的配置文件_config.yml中填上以下代码：

# aplayer
aplayer:  meting: true  asset_inject: false

2.建立音乐页面

使用命令创建音乐界面，比如命名为playlist。

hexo new page playlist

打开网站根目录source\playlist\index.md根据hexo-tag-aplayer文档书写即可。
自建或者用别人的歌单https://y.qq.com/n/yqq/playlist/7724497259.html#stat=y_new.profile.create_playlist.click&dirid=3 按照一下格式书写即可。

{% meting "7724497259" "tencent" "playlist" "theme:#3F51B5" "mutex:true" "preload:auto" %}

有关

{% meting %}

的选项列表如下:

选项默认值描述
id 必须值歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song, playlist, album, search, artist
fixed false 开启固定模式
mini false 开启迷你模式
loop all 列表循环模式：all, one,none
order list 列表播放模式： list, random
volume 0.7 播放器音量
lrctype 0 歌词格式类型
listfolded false 指定音乐播放列表是否折叠
storagename metingjs LocalStorage 中存储播放器设定的键名
autoplay true 自动播放，移动端浏览器暂时不支持此功能
mutex true 该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight 340px 播放列表的最大长度
preload auto 音乐文件预载入模式，可选项： none, metadata, auto
theme #ad7a86 播放器风格色彩设置
关于如何设置自建的 Meting API 服务器地址，以及其他 MetingJS 配置，请参考章节自定义配置

…更多参数可以参考Aplayer文档

3.添加音乐页面到导航菜单内即可

  menu:- { key: "音乐", link: "/playlist/", icon: "iconfont icon-music" }