惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Recent Announcements
Recent Announcements
博客园 - Franky
博客园 - 三生石上(FineUI控件)
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Apple Machine Learning Research
Apple Machine Learning Research
云风的 BLOG
云风的 BLOG
人人都是产品经理
人人都是产品经理
博客园 - 【当耐特】
L
LangChain Blog
Stack Overflow Blog
Stack Overflow Blog
H
Help Net Security
爱范儿
爱范儿
罗磊的独立博客
博客园_首页
美团技术团队
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
月光博客
月光博客
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
量子位
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 叶小钗
V
Visual Studio Blog
T
Tailwind CSS Blog

热爱生活与梦想

迁移LeanCloud的Waline评论数据到TiDB/Neon 25年江浙地区暑假自驾游之感慨 使用阿里云灵码继续完成构建 SSL 证书管理器 亲手给儿子做的棒棒糖摩天轮六一礼物 使用腾讯云 CodeBuddy 构建 SSL 证书管理器 修复代码块默认高度相关缺陷 HugoNexT4.7.2 新功能和升级提示 改善代码块折叠和选中功能 支持Github风格的警告样式 给文章添加摘要和过期提示功能 回顾24年的过去总结 修复Mathjax行内显示公式的问题 给Hugo文章增加阅读更多跳转的锚点定位功能 Win10隐匿的VPN设置和L2TP连接常见错误 Go语言中“糟糕”的日期时间格式化设计 DaoCloud道客提供的免费Docker镜像代理服务 感谢万能淘宝让自己吃到喜欢的美食 WSL运行时遇到未知异常错误无法使用 隐藏的换行符导致Base64加密解密失败 MySQL自带客户端直接免密登录操作 Linux系统中删除目录软链接的注意项 Java程序调用外网API时CA问题 如何不关机重启WSL2恢复虚拟服务 在Windows上安装Podman容器平台做虚拟化 记一次无法弹出移动硬盘的记录 为友情链接添加自动检测脚本 重新激活Github的2FA认证 Linux中使用tar压缩命令排除文件 继续小米手环的健康生活之旅 一次意外的“坠机”引发了我对手机保护壳的深思
新增音乐短代码功能支持
凡梦星尘 · 2025-01-06 · via 热爱生活与梦想

文字描述是人类自我表达的一种方式,而音乐也是另一种表达的方式,给文章添加上音乐作为背景,或许更能让读者深切体会到作者的情境引起共鸣之意。通过 APlayer MetingJS 库能够很轻松的实现在文章中内嵌音乐的播放功能,同时也支持多种音乐平台的音乐播放,下面就来看看具体的操作方法和实现效果吧。

在Hugo NexT主题中支持在文章的任意位置中直接使用music短代码来实现音乐的嵌入(单曲效果如上),也是支持在一篇文章中同时插入多个音乐播放器,其中所涉及到的参数说明如下所示:

参数名默认说明
id必选音乐 ID,即音乐在音乐平台的唯一标识符
server必选音乐平台,支持 neteasetencentkugoubaiduxiami 平台
type必选播放类型,目前支持 songplaylistalbumsearchartist 类型
auto可选音乐的地址,仅支持 server 参数中的平台
theme#448aff播放器的主题色,默认为 #448aff
url自定的音乐源 URL,默认为空
name音乐名称,默认为空
artist音乐作者,默认为空
cover音乐封面 URL,默认为空
fixedfalse固定播放器,默认为 false
minifalse显示小播放器,默认为 false
autoplayfalse自动播放,默认为 false
loopall循环播放,支持allonenone,默认为 all
orderlist播放顺序listrandom,支持默认为 list
volume0.7音量,默认为 0.7
mutextrue有多个音乐播放时,是否只开启当前播放器,默认为 true
list-foldedfalse列表折叠,默认为 false
list-max-height340px列表最大高度,默认为:340px

最后在需要使用音乐播放器的位置插入代码和效果如下:

1
{{< music server="netease" type="playlist" id="7273286178" autoplay="true" list-max-height="140" >}}

注意

不过比较遗憾的是各大音乐平台只是支持非VIP部分的音乐进行外链播放,所以使用上还是稍微有些不太方便。不过好在MetingJS库支持自定义的音乐源,用户可自行上传音乐(注意版权问题,请自行负责)或使用其他共享频道来播放。

终于是让Hugo NexT主题的用户可以使用音乐播放器功能,相信这会是有不少用户喜爱且期待已久的功能,希望大家能够喜欢它 🥰。