5分钟上手hexo-tag-aplayer：从安装到播放网易云歌单的快速教程

5分钟上手hexo-tag-aplayer：从安装到播放网易云歌单的快速教程

【免费下载链接】hexo-tag-aplayerEmbed aplayer in Hexo posts/pages项目地址: https://gitcode.com/gh_mirrors/he/hexo-tag-aplayer

hexo-tag-aplayer是一款强大的Hexo标签插件，能够帮助你在Hexo博客的文章或页面中轻松嵌入APlayer音乐播放器，让你的博客瞬间拥有专业的音乐播放功能。无论是单曲播放还是网易云歌单，都能轻松实现。

快速安装指南

安装hexo-tag-aplayer非常简单，只需在你的Hexo项目根目录下运行以下命令：

npm install --save hexo-tag-aplayer

这条命令会将hexo-tag-aplayer安装到你的项目中，并添加到package.json的依赖列表中。安装完成后，Hexo会自动识别并加载这个插件，无需额外配置。

启用MetingJS支持网易云歌单

要播放网易云歌单，需要启用MetingJS支持。打开Hexo的配置文件_config.yml，添加以下配置：

aplayer: meting: true

这个配置会启用MetingJS功能，让你能够直接调用网易云、QQ音乐等平台的音乐资源。MetingJS是基于Meting API的APlayer衍生播放器，支持多种音乐平台。

嵌入网易云歌单的简单方法

启用MetingJS后，你可以使用{% meting %}标签在文章中嵌入网易云歌单。最简单的用法只需要三个参数：歌单ID、音乐平台和类型。

例如，要嵌入网易云歌单"60198"，可以使用以下标签：

{% meting "60198" "netease" "playlist" %}

其中，"60198"是网易云歌单的ID，"netease"表示使用网易云音乐平台，"playlist"表示这是一个歌单。

自定义你的音乐播放器

hexo-tag-aplayer提供了丰富的自定义选项，让你可以根据自己的博客风格调整播放器的外观和行为。以下是一些常用的自定义参数：

• autoplay: 开启自动播放（移动端浏览器可能不支持）
• theme: 设置播放器主题颜色，如theme:#ad7a86
• listmaxheight: 设置播放列表的最大高度，如listmaxheight:340px
• loop: 设置循环模式，可选值有all（全部循环）、one（单曲循环）、none（不循环）
• order: 设置播放顺序，可选值有list（列表顺序）、random（随机播放）

例如，下面的代码创建了一个自动播放、粉色主题的网易云歌单播放器：

{% meting "60198" "netease" "playlist" "autoplay" "theme:#ff69b4" "listmaxheight:400px" %}

解决常见问题

参数空格问题

在使用标签时，如果参数中包含空格，需要将参数用双引号括起来。例如：

{% aplayer "Hello World" "Artist Name" "music.mp3" %}

播放器不显示问题

如果播放器不显示，可能是因为APlayer.js资源没有正确加载。你可以在Hexo配置文件中手动设置CDN地址：

aplayer: cdn: https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js style_cdn: https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css

PJAX兼容性

如果你的博客使用了PJAX，可能需要在PJAX加载前销毁APlayer实例。可以在主题的JS文件中添加以下代码：

$(document).on('pjax:start', function () { if (window.aplayers) { for (let i = 0; i < window.aplayers.length; i++) { window.aplayers[i].destroy(); } window.aplayers = []; } });

总结

通过本教程，你已经学会了如何安装hexo-tag-aplayer插件，启用MetingJS支持，并在Hexo博客中嵌入网易云歌单。这个强大的插件不仅支持网易云音乐，还可以播放QQ音乐、虾米、酷狗等平台的音乐资源，为你的博客增添更多乐趣。

现在，赶快尝试在你的Hexo博客中添加音乐播放器，让你的读者在阅读文章的同时享受美妙的音乐吧！更多高级用法可以参考项目的官方文档docs/README-zh_cn.md。

【免费下载链接】hexo-tag-aplayerEmbed aplayer in Hexo posts/pages项目地址: https://gitcode.com/gh_mirrors/he/hexo-tag-aplayer