Fluid主题添加音乐功能

本文最后更新于:2024年6月18日 早上

本文大部分配置参考林慕凡的博文,感谢作者的详细讲解。
作者:林慕凡
原文地址:https://blog.csdn.net/weixin_43471926/article/details/109798928?spm=1001.2014.3001.5502

效果预览: https://blog.jishuqin.cn/playlist/

一、安装插件

执行命令,为Hexo安装hexo-tag-aplayer插件。

1
npm install --save hexo-tag-aplayer

二、添加配置

安装好插件之后,在主题配置文件_config.fluid.yml 中的 custom 添加下面 js 和 css 依赖。

注意:cdn.jsdelivr.net 域名有时会被墙,最好把文件部到自己的OSS,或者保存到博客的js、css目录下。

1
2
3
4
5
6
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依赖

添加完成后在hexo根目录下的配置文件_config.yml 中添加以下配置。

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

三、创建音乐页面

1
hexo new page playlist
  1. 打开 /根目录/source/playlist/index.md编辑页面,参考 hexo-tag-aplayer 官方文档书写。

复制歌单的链接,然后复制歌单的id,例如:https://music.163.com/#/playlist?id=8158874729&userid=499215828,这个歌单的id就是8158874729,而且是网易云的歌单,参考下面例子。

1
2
3
4
5
<!-- 简单示例 (id, server, type)  -->
{% meting "8158874729" "netease" "playlist" %}

<!-- 进阶示例 -->
{% meting "8158874729" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:auto" "theme:#3F51B5""order:random"%}
  1. 下面是有关meting的部分选项配置,具体可参看官方文档
选项 默认值 描述
id 必须值 歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server 必须值 音乐平台: netease, tencent, kugou, xiami, baidu
type 必须值 song,playlist, album, search, artist
  1. 添加音乐页面到导航菜单内。

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

“觉得不错的话,给点打赏吧 ୧(๑•̀⌄•́๑)૭ ”

微信二维码

微信支付

支付宝二维码

支付宝支付

Fluid主题添加音乐功能
https://blog.jishuqin.cn/posts/eeaa9988/
作者
顾梦
发布于
2023年3月5日
更新于
2024年6月18日
许可协议