魔改butterfly主题记录
前置
通过 hexo+github 搭建静态博客,使用的是 butterfly 主题。
看到有很多关于主题魔改的教程,尝试自己魔改一下,因为挺多内容都会修改到源码,以此进行一下记录,防止之后自己都忘了改了哪里,没办法进行主题升级(๑´ڡ`๑)
- 当前使用butterfly主题版本:
5.0.0
1. 修改首页背景替换为视频
参考博客:butterfly 主题首页图背景替换为视频 | SaraKale
1.1 修改内容
themes\butterfly\layout\includes\header\index.pug 文件
- 修改 第19行 判断
else if is_home()的执行逻辑,让它在首页的时候不展示_config.yml文件中配置的index_img
1 | else if is_home() |
- 第35行 判断
else if is_home()的执行逻辑增加video(src=….
1 | else if is_home() |
1.2 效果预览

2. 修改加载动画内容
参考博客:Heo同款loading动画 | 安知鱼
2.1 修改内容
- 新建
themes\butterfly\layout\includes\custom\custom-loading.pug,综合fullpage-loading.pug和pace.pug文件的内容自定义一个 满屏与pace同时启用效果的加载动画
1 | #loading-box |
- 修改
themes\butterfly\layout\includes\loading\index.pug,引入上面新建的pug文件
1 | if theme.preloader.enable |
- 修改
themes\butterfly\source\css\_layout\loading.styl,在文件末尾增加对应的样式代码。
1 | // 添加自定义动画加载样式 |
新建
source\assets\css\loading-bar.css,因为我只是想改进度条的颜色,所以直接从pace.js 上选择颜色和样式直接下载下来了,没有做别的修改了修改
themes\butterfly\source\css\var.styl中第103行的preloader背景颜色设置(因为我想把加载动画的背景颜色和加载动画都弄成自定义配置的)
1 | // $preloader-bg = #37474f |
- 修改
_config.butterfly.yml中preloader选项,source: 3就是上面自己修改的加载动画了
1 | # Loading Animation |
2.2 效果预览

3. 顶部添加波浪效果
参考博客:butterfly文章顶部添加波浪效果 | 安知鱼
3.1 修改内容
- 新建
themes\butterfly\layout\includes\custom\waves_area.pug
1 | section.main-hero-waves-area.waves-area |
- 新建
source\assets\css\waves_area.css
1 | /* 波浪css */ |
- 修改
themes\butterfly\layout\includes\header\index.pug,将上面的waves_area.pug引入
1 | if is_post() |
3.2 效果预览

4. 在主页展示github贡献度日历
参考博客:【Hexo博客】在主页展示GitHub/Gitee贡献度日历 | 百里飞洋
其中使用hexo-githubcalendar的方案,需要部署api,并且vercel据说被墙了需要绑定自定义域名才能用起来,感觉好麻烦,故使用的第一个生成图片的githubchart-api方案
4.1 修改内容
- 修改
themes\butterfly\layout\includes\header\index.pug文件,大约第35行 判断else if is_home()的执行逻辑增加#github-chart….
1 | else if is_home() |
4.2 效果预览

5. 添加全局吸底Aplayer音乐播放器
参考博客:
5.1 修改内容
- 安装插件:
hexo-tag-aplayer。执行指令:
1 | npm install --save hexo-tag-aplayer |
- 新建
source\assets\css\custom.css文件,添加音乐标签伸缩的css代码:
1 | /* aplayer音乐标签伸缩 */ |
- 配置
hexo根目录_config.yml文件
1 | aplayer: |
- 配置
butterfly主题文件_config.butterfly.yml中的aplayerInject和inject
1 | aplayerInject: |
1 | inject: |
5.2 效果预览

6. 添加看板娘功能
参考博客:
原本想通过上面博客的教程,使用 live2d-widget 和 live2d_api 的方式来添加博客里面的看板娘功能,并且增加自己喜欢的模型;搞着搞着发现,喜欢的模型是moc3的,但是用上面的方式好像不行(〒︿〒)
刚好看到上面博客通过 OhMyLive2D实现了moc3模型的看板娘功能,最终选择这个方案来实现我的博客看板娘(o´罒`o)
6.1 修改内容
- 安装插件
1 | npm install hexo-oh-my-live2d |
- 添加模型文件夹
这里我原本是直接放source下面本地引入,本地环境一直很正常,但是部署到github-page上后不知为何怎么都是404(本菜鸡实在不懂是啥原因,求大佬告知(〒︿〒))
然后想到使用免费CDN服务加速Github博客中提到的
jsDelivr,这不正是现在所需要的嘛哈哈哈哈按照步骤弄好后直接可以通过
https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径来引用live2d模型资源
_config.yml文件添加配置信息
1 | OhMyLive2d: |
这里由于我的live2d模型有大量的
Expression配置,我想要展示更多一点内容,所以自己修改了一下菜单选项,增加了一个切换表情的菜单项;以及由于我使用了pace.js生成进度条,点击切换表情、衣服、模型时会展示进度条,有点丑,所以统一用
Pace.ignore进行包裹具体的配置信息可以参照官网选项
6.2 效果预览

7. 添加日夜模式切换动画
参考博客:
7.1 修改内容
- 新建
themes\butterfly\layout\includes\custom\sun_moon.pug文件
1 | svg(aria-hidden='true', style='position:absolute; overflow:hidden; width:0; height:0') |
- 新建
themes\butterfly\source\css\_layout\sun_moon.styl文件
1 | .Cuteen_DarkSky, |
- 新建
source\assets\js\sun_moon.js文件
1 | function switchNightMode() { |
- 修改
themes\butterfly\layout\includes\head.pug,在文件末尾添加上面sun_moon.pug文件的引入代码
1 | //- 添加白天夜间模式转换动画 |
- 修改
themes\butterfly\layout\includes\rightside.pug文件,修改日夜模式切换按钮内容,我想保持初始butterfly的样式,所以只是更新按钮id和重新绑定了onclick函数(对应的js文件内容也要自行更新)
1 | when 'darkmode' |
- 修改
_config.butterfly.yml文件,添加上面sun_moon.js文件的引入
1 | inject: |
7.2 效果预览

8. 添加日夜模式切换更换樱花飘落和星空的效果
参考博客:
8.1 修改内容
- 新建
source\assets\js\sakura.js文件。也可以直接用 cdn的,但是我想修改一下樱花的大小来着,所以直接下载到本地引用了
1 | // 樱花飘落bynote.cn |
- 新建
source\assets\js\universe.js文件
1 | (function creatCanvas(){ |
- 修改
themes\butterfly\layout\includes\layout.pug文件。我想要博客主体内容的部分不被特效遮盖,所以修改了一下z-index属性
1 | //- main#content-inner.layout(class=hideAside) |
- 修改
source\assets\css\custom.css,增加css代码:
1 | /* 亮色模式下隐藏 */ |
- 修改
_config.butterfly.yml文件,引入sakura.js文件
1 | inject: |
8.2 效果预览

9. 日夜模式切换更换背景以及卡片透明度
参考博客:butterfly切换夜间模式更换背景| 胖达网络
9.1 修改内容
- 修改
source\assets\css\custom.css文件,添加背景图和透明度css样式:
1 | /* 这里是设置一个全局透明度,不然不太协调,可以根据自己的喜好修改 */ |
- 修改
_config.butterfly.yml文件配置
1 | background: true |
9.2 效果预览

10. 页面美化
参考博客:hexo 博客 butterfly 主题安装及魔改笔记| 星雪
9.1 菜单毛玻璃特效
修改 source\assets\css\custom.css文件,增加css代码:
1 | /******************************************************/ |
9.2 页脚添加github徽标
- 修改
themes\butterfly\layout\includes\footer.pug文件
1 | if theme.footer.custom_text |
- 修改
_config.butterfly.yml,添加页脚标签内容配置
1 | # 自定义添加页脚标签循环节信息配置 |




