hexo配置安知鱼音乐页面
hexo配置安知鱼音乐页面
用现成的 hexo-anzhiyu-music
适配脚本,样式、布局。
1)安装脚本
# 在博客根目录执行 |
2)在站点配置或主题配置里加上:
(任选其一:_config.yml
或 _config.butterfly.yml
)
# 音乐馆 |
3)用 Butterfly 的 inject
注入 APlayer 和 Meting2(关键)
打开 themes/butterfly/_config.yml
,增加(或合并到你自己的 inject):
inject: |
备用镜像(万一被墙/抽风):
https://cdn.jsdelivr.net/npm/hexo-anzhiyu-music@1.0.1/assets/js/Meting2.min.js
https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js
https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css
4)新建页面(如果还没建):
hexo new page music |
把 source/music/index.md
写成如下这样:
--- |
然后:
hexo clean && hexo g && hexo s |
5)问题:发现这样进度条有点高,可以使用下面这样的方案解决
在 themes/butterfly/_config.yml
里,把之前我让你加的 <style id="music-fix">...</style>
删除;然后在 inject.head
里加入这段极简样式:
inject: |
想再低一点,就把 12px
调成 16px / 20px
试试;不影响歌词样式,也不会改进度条的粗细。
但是还有一个遗留问题,歌词滚动不正常,暂时没有更好的解决方案,就先这样吧,之后有时间再解决一下!!
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Wenjie Wang!
评论