文章更新日期：2021年1月5日 21点56分

Aplayer

Butterfly主题版本：3.5.1 RC1

安装插件

在Hexo工程根目录下分别执行以下语句。

1	hexo new page music

1	npm install aplayer

1	npm install --save hexo-tag-aplayer

修改配置

定位到主题目录\layout\includes，查看layout.pug文件，应该出现以下字段

head
   include ./head.pug
   link(rel="stylesheet" href="APlayer.min.css")
   div(id="aplayer")
   script(src="https://cdn.jsdelivr.net/gh/radium-bit/res@master/live2d/autoload.js" async)
   script(src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js" async)
 body

修改站点配置文件

返回博客根目录，查看_config.yml文件，在最后添加如下代码

#aplayer
aplayer: 
  script_dir: js		# Public 目录下脚本目录路径，默认: 'assets/js'
  style_dir: css		# Public 目录下样式目录路径，默认: 'assets/css'
  #cdn: http://xxx/aplayer.min.js	# 引用 APlayer.js 外部 CDN 地址 (默认不开启)
  #style_cdn: http://xxx/aplayer.min.css	# 引用 APlayer.css 外部 CDN 地址 (默认不开启)
  meting: true		# MetingJS 支持
  #meting_api: http://xxx/api.php		# 自定义 Meting API 地址
  #meting_cdn: http://xxx/Meing.min.js		# 引用 Meting.js 外部 CDN 地址 (默认不开启)
  asset_inject: true		# 自动插入 Aplayer.js 与 Meting.js 资源脚本, 默认开启
  #externalLink: http://xxx/aplayer.min.js	# 老版本参数，功能与参数 cdn 相同meting: true

并修改配置post_asset_folder为true

1	post_asset_folder: true

修改index文件

打开博客根目录\source\music\index.md

---
title: 我的歌单
date: 2019-05-17 16:14:00
cover: https://cdn.jsdelivr.net/gh/radium-bit/res@latest/Music.jpg
type: "music"
---

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