安装插件 {#安装插件}

|-----------|---------------------------------------------| | 1 | npm install --save hexo-tag-aplayer |

修改Hexo配置文件 {#修改Hexo配置文件}

|---------------|---------------------------------------------------| | 1 2 3 | aplayer: meting: true asset_inject: false |

配置主题文件 {#配置主题文件}

|---------------|----------------------------------------------------| | 1 2 3 | aplayerInject: enable: true per_page: true |

把aplayer 代码插入到主题配置文件中

|-----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 | inject: head: bottom: - <div class="aplayer no-destroy" data-id="000PeZCQ1i4XVs" data-server="netease" data-type="artist" data-fixed="true" data-mini="true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div> |

重新部署hexo 并启动，看看是否左下角已经有了音乐播放器呢？效果如同本站左下角所示：）

播放器设置 {#播放器设置}

其中我们主要修改的几个地方

| 选项 | 默认值 | 描述 | |------------|---------|---------------------------------------------| | 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' | | listfolded | false | 音乐列表是否折叠 | | mutex | true | 开启时，如果同页面有其他aplayer播放，该播放器暂停 | | perload | auto | 音乐文件预载入模式，可选值: 'none', 'metadata', 'auto' | | theme | #b7daff | 播放器主题色风格设置 |

官网配置