个人哔哔: 我的butterfly魔改记录
其实butterfly确实是hexo主题里为数不多的优雅(花里胡哨)的主题了
但看了@冰卡诺老师和@Aki店长的博客后,十分感慨:人与人的butterfly不能一概而论
所以,学习(白嫖)着他们的教程,我也开始走上魔改bf之路
但店长说的好:魔改一时爽,升级火葬场
记录魔改历程也是为了以后主题更新能找到回家的路(毕竟主题更新相当于把大部分魔改推倒重来)
所以也记录和备份我修改/添加过的文件,方便查询
root |
主题源码修改部分
留言板动态弹出信封样式
参考教程:店长的Envelope Style Comments Bar
新增的主题源码:[root]\themes\butterfly\source\css\commentsbar.css
友链样式魔改
参考教程:店长的Friend Link Card Beautify
修改的主题源码:[root]\themes\butterfly\layout\includes\page\flink.pug
[root]\themes\butterfly\source\css\_page\flink.styl
首页磁贴
参考教程:店长的Categories Magnet
修改的主题源码:[root]\themes\butterfly\layout\index.pug
新增的主题源码:[root]\themes\butterfly\source\css\_layout\categoryBar.styl
首页置顶轮播图
参考教程:店长的Slider Bar
新增的主题源码:[root]\themes\butterfly\layout\includes\sliderbar.pug
[root]\themes\butterfly\source\js\swiper_init.js
[root]\themes\butterfly\source\css\_layout\swiperstyle.styl
修改的主题源码:[root]\themes\butterfly\source\css\index.styl
新增配置文件:[root]\source\_data\slider.yml
版权信息美化
参考教程:Nesxc的butterfly版权美化教程
修改的主题源码:[root]\themes\butterfly\layout\includes\post\post-copyright.pug
[root]\themes\butterfly\source\css\_layout\post.styl
拒绝IE,从我做起
参考教程: Nesxc的Butterfly检测IE内核跳转教程
新增的主题源码:[root]\themes\butterfly\source\js\kernel.js
[root]\themes\butterfly\source\kernel.html
非主题源码修改区
双栏卡片主页文章
参考教程:冰老师的教程:基于Butterfly主题的双栏卡片主页文章css样式
(我这里直接在主题配置文件引入冰老师的css,所以不涉及其他修改)
字体样式修改
参考教程:店长的Custom Beautify
@font-face{ |
版权字体微调
.post-copyright { |
首页磁铁字体微调
其实就是用阴影给分类的标题上了描边
a.categoryBar-list-link { |
鼠标样式及页脚半透明
参考文章:小康的Hexo 博客之 butterfly 主题优雅魔改系列
/* 鼠标样式 */ |
Twikoo评论框高度
.el-textarea__inner { |
卡片背景透明度颜色重写
PS: 这个其实准备重新弄了
:root { |
另外这里给店长打个广告
butterfly魔改售后服务中心(其实就是店长自己的群)
