其实butterfly确实是hexo主题里为数不多的优雅(花里胡哨)的主题了

但看了@冰卡诺老师@Aki店长的博客后,十分感慨:人与人的butterfly不能一概而论

所以,学习(白嫖)着他们的教程,我也开始走上魔改bf之路


但店长说的好:魔改一时爽,升级火葬场

记录魔改历程也是为了以后主题更新能找到回家的路(毕竟主题更新相当于把大部分魔改推倒重来)

所以也记录和备份我修改/添加过的文件,方便查询

root
├─source
│ ├─_data
│ │ └─slider.yml
└─themes
└─butterfly
├─layout
│ ├─includes
│ │ ├─post
│ │ │ └─post-copyright.pug
│ │ ├─page
│ │ │ └─flink.pug
│ ├─index.pug
│ └─sliderbar.pug
└─source
├─css
│ ├─_layout
│ │ ├─categoryBar.styl
│ │ ├─swiperstyle.styl
│ │ └─post.styl
│ ├─_page
│ │ └─flink.styl
│ ├─commentsbar.css
│ ├─index.styl
│ └─add.css
└─js
├─swiper_init.js
└─kernel.js


主题源码修改部分

留言板动态弹出信封样式

参考教程:店长的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{
font-family:'aqqxs' ; /* 字体名自定义即可 */
src:url('https://cdn.jsdelivr.net/gh/2x-ercha/cdn-for-try/fonts/FXAiQingQiXiangSuo.ttf'); /* 字体文件路径 */
font-display : swap;
}

h1,h2,h3,h4,h5,h6,
a#site-name,span#subtitle,a.site-page,
a.title,
#aside-content,
a.article-sort-item-title,
a.article-title,
a.categoryBar-list-link,
a.blog-slider__title,
.article-sort-title,
.tag-cloud-title,
.category-title,
a.category-list-link {
font-family: 'aqqxs', sans-serif;
}

版权字体微调

.post-copyright {
font-family: 'aqqxs', sans-serif;
font-size: large
}

首页磁铁字体微调

其实就是用阴影给分类的标题上了描边

a.categoryBar-list-link {
text-shadow: #0000001a 1px 0 0, #000000 0 1px 0, #000000 -1px 0 0, #00000000 0 -1px 0;
}

鼠标样式及页脚半透明

参考文章:小康的Hexo 博客之 butterfly 主题优雅魔改系列

/* 鼠标样式 */
body {
cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/default.cur),
default;
}
a,
img {
cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur),
default;
}

/* 页脚半透明 */
#footer {
background: rgba(255,255,255,.15);
color: #000;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
backdrop-filter: saturate(100%) blur(5px)
}

#footer::before {
background: rgba(255,255,255,.15)
}

#footer #footer-wrap {
color: var(--font-color);
}

#footer #footer-wrap a {
color: var(--font-color);
}

Twikoo评论框高度

.el-textarea__inner {
/* min-height: 75px; */
/* height: 75px; */
min-height: 210px !important;
height: 210px !important;
}

卡片背景透明度颜色重写

PS: 这个其实准备重新弄了

:root {
/* --card-bg: #fff; */
--card-bg: #ffefefd9;
}

[data-theme="dark"] {
/* --card-bg: #121212; */
--card-bg: #12121288;
--btn-hover-color: #787878;
--btn-bg: #1f1f1f;
--btn-hover-color: #ff3f3f;
--btn-bg: #a153ff;
/* --font-color: rgba(255,255,255,0.7); */
/* --hr-border: rgba(255,255,255,0.4); */
--font-color: rgb(255, 255, 255);
--hr-border: rgb(161, 83, 255);
}

另外这里给店长打个广告

butterfly魔改售后服务中心(其实就是店长自己的群)

🧊Akilarの糖果屋