描述

给博客加个音乐全局吸底

效果

image-20230730224822712

步骤

参考：

Butterfly 添加全局吸底Aplayer教程 | Butterfly

Hexo+Butterfly 主题博客添加音乐播放器的简单版教程_hexo添加背景音乐_Brilliant.Louis的博客-CSDN博客

1、 下载 hexo-tag-aplayer 插件

npm install --save hexo-tag-aplayer

2、_config.yml 配置插件

在根目录_config.yml 最后加上如下配置

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

3、 _ config.butterfly.yml 配置

找到 aplayerInject 字段，打开音乐播放器

1
2
3
4
5
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true # 开启音乐播放器
  per_page: true #每个页面都有Aplayer

找到inject字段，修改 data-id （歌单id，一般在浏览器地址栏可以看到）

1
2
3
4
5
inject:
  head:
  bottom:
    - <div class="aplayer no-destroy" data-id="60198" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true"> </div>

具体参数设置见 butterfly 官方文档