hexo butterfly主題 添加全局吸底APlayer

第一步

打開 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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章