添加网页背景音乐

添加 Aplayer 背景音乐

---

配置_config.butterfly.yml

打开根目录 下 的_config.butterfly.yml，查找关键字aplayer，修改两个栏目下的配置信息。

# 背景音乐
# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: true
  
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
         - <link rel="stylesheet" href="/css/font.css">
  bottom:
    # Aplayer 音乐播放器配置：
    - <div class="aplayer no-destroy" 
      data-id="9723909579" 
      data-server="netease" 
      data-type="playlist" 
      data-fixed="true" 
      data-mini="true" 
      data-listFolded="false" 
      data-order="random" 
      data-preload="auto" 
      data-autoplay="true" muted></div>

这里将aplayerInject 的enable设为true，具体配置在bottom下修改。

其中最重要的信息是data-id和data-server。data-server指的是音乐平台，有 netease （网易），tencent （腾讯），kugou （酷狗），xiami （虾米），baidu （百度）等。

查询音乐 id

以网易云音乐为例，登录网页版音乐列表页面，F12打开 DevTools，搜索关键字playlist。

找到data-id后的数字，将鼠标悬停在上面，查看左边网页元素是否对的上，确定该id为你想选取的背景歌单。

将data-id和data-server配置好，刷新页面，就能看到自己博客的背景音乐播放器啦！