本文共 1188 字，大约阅读时间需要 3 分钟。

第一步

打开 themes\Butterfly\layout\includes\head.pug

结尾加一句

include ./third-party/aplayer.pug

第二步

然后在themes\Butterfly\layout\includes\third-party\里面新建一个文件叫 aplayer.pug ,内容如下

if theme.aplayer && theme.aplayer.enable	.aplayer(data-id=theme.aplayer.id data-server=theme.aplayer.server data-type=theme.aplayer.type data-fixed=theme.aplayer.fixed data-mini=theme.aplayer.mini data-listFolded=theme.aplayer.listFolded data-order=theme.aplayer.order data-preload=theme.aplayer.preload)	each item in theme.aplayer.css		link(rel='stylesheet', href=item)	each item in theme.aplayer.js		script(src=item)

第三步

然后打开butterfly.yml(如果你没有启用的话,就打开source/_data/butterfly.yml) 加入以下内容

##侧边栏歌单aplayer:  enable: true  js:    - https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js    - https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js  css:    - https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.css  id: 2693598459  server: netease   type: playlist  fixed: 'true'  order: random  preload: none  listFolded: 'false'

解决与TOC冲突问题

然后重新生成就可以看到 aplayer了,这里的id是我的网易云歌单号,可以修改成别的.

参考：

转载地址：https://chocolate.blog.csdn.net/article/details/106211309 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！