hexo butterfly主题添加全局吸底APlayer

Posted 2022-07-28 一百个Chocolate

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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行

最后，大功告成 ✿✿ヽ(°▽°)ノ✿