新增音乐短代码功能支持

发表于： 2025年01月06日分类于：博客点滴/主题开发

字数： 764 阅读：≈ 2分钟浏览：评论：

温馨提醒

总结摘要

分享下如何在 Hugo NexT 主题中给文章添加音乐播放器嵌入的支持，让你的文章增加有音乐背景不一样的风采。

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

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

参数名	默认	说明
id	必选	音乐 ID，即音乐在音乐平台的唯一标识符
server	必选	音乐平台，支持 `netease`、 `tencent`、 `kugou`、 `baidu` 和 `xiami` 平台
type	必选	播放类型，目前支持 `song` 、 `playlist`、 `album`、 `search` 和 `artist` 类型
auto	可选	音乐的地址，仅支持 server 参数中的平台
theme	`#448aff`	播放器的主题色，默认为 `#448aff`
url	空	自定的音乐源 URL，默认为空
name	空	音乐名称，默认为空
artist	空	音乐作者，默认为空
cover	空	音乐封面 URL，默认为空
fixed	`false`	固定播放器，默认为 `false`
mini	`false`	显示小播放器，默认为 `false`
autoplay	`false`	自动播放，默认为 `false`
loop	`all`	循环播放，支持`all`、`one` 和 `none`，默认为 `all`
order	`list`	播放顺序`list` 和 `random`，支持默认为 `list`
volume	`0.7`	音量，默认为 `0.7`
mutex	`true`	有多个音乐播放时，是否只开启当前播放器，默认为 `true`
list-folded	`false`	列表折叠，默认为 `false`
list-max-height	`340px`	列表最大高度，默认为：340px

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

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

注意

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

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