Hexo+Butterfly主题博客添加音乐播放器的简单版教程

Hexo+Butterfly主题博客添加音乐播放器的简单版教程

参考

[Hexo+Butterfly主题博客添加音乐播放器的简单版教程_hexo音乐播放器-CSDN博客](https://blog.csdn.net/weixin_63549044/article/details/129335813#:~:text=实现步骤添加音乐播放器插件可选择在vscode%2Fwebstorm终端运行 (一定要在博客项目文件中运行) 也可以gitbash (同样要在项目文件路径中运行) npm install,%23添加刚刚用npm下载插件的配置在_config文件中同时实现全局音乐将asset_inject设置成false aplayer%3A enable%3A true asset_inject%3A false)

npm install --save hexo-tag-aplayer

修改Butterfly主题配置文件

#添加刚刚用npm下载插件的配置在_config文件中 同时实现全局音乐 将asset_inject设置成false
aplayer:
  enable: true
  asset_inject: false

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
  bottom:
    - '<div class="aplayer no-destroy" data-id="1947134859" data-server="netease" data-type="song" data-fixed="true" data-autoplay="true"> </div>'

这里的 data-id=”464916877”就是音乐分享复制链接https://music.163.com/song?id=1947134859&userid=1639248272

例如这里的id1947134859就是这首歌的id；userid是用户的id不需要

#实现不会因跳转其他页面而重新播放音乐
#相当于异步请求的ajax
pjax:
  enable: true

音乐页面添加音乐列表，前面是页面上的一首歌曲

参考

搭建Hexo博客+Music(三)_꧁༺℘₨风、凌๓༻꧂的博客-CSDN博客

使用 hexo-tag-aplayer 插件
hexo-tag-aplayer 是Aplayer在hexo上的插件，这里的配置参考的是官方文档，第一步安装 hexo-tag-aplayer：

npm install --save hexo-tag-aplayer

最新版的 hexo-tag-aplayer 已经支持了MetingJS的使用，可以直接解析网络平台的歌曲（简直是神器），首先要在站点配置文件中开启meting模式，添加以下代码在配置文件的最后：

aplayer:
  meting: true

复制歌单的链接，然后复制歌单的id，

例如 https://music.163.com/playlist?id=19723756 ，这个歌单的id就是19723756，公司名可以是tencent、netease或是其他公司，下面给出一个例子，

打开 /Hexo/source/playlist/index.md文件，输入：

{% meting "523845661" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

效果还是很不错的：