Fluid主题添加音乐页面

本文最后更新于:2020年11月23日 上午

效果预览: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" }

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!