第一步
打開 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是我的網易雲歌單號,可以修改成別的.
但是瀏覽 Page
時會發現 aplayer
會和 TOC
(怎麼又是它) 的切換按鈕重合
打開 themes\Butterfly\source\css\_global\index.styl
修改第61行
最後,大功告成 ✿✿ヽ(°▽°)ノ✿
參考:
Author: Pscgylotti