前言

看到别人的博客有个专门的音乐网页我也心动了

操作

先初始化一个页面，专门来做音乐馆的页面。

hexo new page music

现在这个页面什么还没有，我们要整上一个工具，也就是一个播放的相关的插件，因为播放需要js支持。

npm install --save hexo-tag-aplayer

hexo-tag-aplayer 我附上链接了，可以去看看作者的说明文档

新版本的支持MetingJS。

找到hexo根目录下的_config.yaml添加

aplayer:
  meting: true

在_config.butterfly.yaml里面加上

音乐馆: /music/ || fa fa-music

同时在里面找到

将其改成

# Inject the css and script (aplayer/meting)
aplayerInject:
  enable: true
  per_page: false

最后一步，在新建的music文档里面填写

{% meting "173901981" "netease" "playlist" "autoplay" "mutex:true" "listmaxheight:1140px" "preload:auto" "theme:#ad7a86"%}

和下面的表格一一对应的，对着找到更改就行，改成自己想要的样式。

有关 {% meting %} 的选项列表如下:

选项	默认值	描述
id	必须值	歌曲 id / 播放列表 id / 相册 id / 搜索关键字
server	必须值	音乐平台: `netease`, `tencent`, `kugou`, `xiami`, `baidu`
type	必须值	`song`, `playlist`, `album`, `search`, `artist`
fixed	`false`	开启固定模式
mini	`false`	开启迷你模式
loop	`all`	列表循环模式：`all`, `one`,`none`
order	`list`	列表播放模式： `list`, `random`
volume	0.7	播放器音量
lrctype	0	歌词格式类型
listfolded	`false`	指定音乐播放列表是否折叠
storagename	`metingjs`	LocalStorage 中存储播放器设定的键名
autoplay	`true`	自动播放，移动端浏览器暂时不支持此功能
mutex	`true`	该选项开启时，如果同页面有其他 aplayer 播放，该播放器会暂停
listmaxheight	`340px`	播放列表的最大长度
preload	`auto`	音乐文件预载入模式，可选项： `none`, `metadata`, `auto`
theme	`#ad7a86`	播放器风格色彩设置