前置说明

魔改亮点

🆙主题可升级:不改动主题源码。即便魔改,也不需要为升级主题而烦恼。

🍳简单快速:简单上手,快速修改。

🍭看我72变:多种背景随意更换。

📕优雅阅读:对卡片进行不同的透明度设置,实现更优雅的阅读。

👦个性友联:为你的好友设置不同的颜色

🎈页脚更炫酷:彩色渐变footer喜欢么?

🍟更多优点等你发现


为什么写这篇文章?

相信在这之前,大家肯定看过网上的各种魔改教程。但是这些魔改教程基本上千篇一律,都是一种方式,大量修改模板(主题源文件)。这种方式的好处就是简单快速且直接,缺点就是每次升级😏,不用我说了吧。除非你不打算在升级。

但是对于一个热爱升级的我来说,我怎么可以这样。于是乎我便写了这篇文章。按照此教程进行的魔改,大部分都是通过引入新的js文件和css文件实现的。这意味着再也不用因为升级而再次魔改而苦恼了😄。同样的缺点也还是有的,引入新文件必定导致页面加载速度下降,下降多少取决于访客网速、电脑配置及服务器的带宽。具体速度可以参考本博客。

此博客环境:Vercel + Jsdeliver+ Butterfly最新版

这篇文章所有修改没有改动pug模板。全都是添加css文件或页面引入JS脚本方式实现。

至此(2021-04-06)没有任何一项修改pug代码。

如何引入自定义的CSS/JS文件

通过主题配置inject可以引入外部的自定义CSS文件和JS文件。例如:

inject:
  head:
    - <link rel="stylesheet" href="http://localhost:3000/css/index.min.css">
  bottom:
    - <script src="http://localhost:3000/css/index.min.js"></script>

快速“复制”

不想动手,就想得到小康。😏可以直接使用作者自用的css。

inject:
  head:
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/static-butterfly/dist/css/index.min.css">

image-20210406192106257

自定义魔改

如果你不想直接使用我的魔改,你想要修改某些东西,例如卡片透明度,那么你不必修改压缩过的css,而是应该到static-butterfly仓库下载源代码,按照./src/css/config.less中的文件进行自定义配置。

/*
 * @description: 变量控制相关
 * @author: 小康
 * @url: https://xiaokang.me
 * @Date: 2021-01-03 11:07:55
 * @LastEditTime: 2021-03-18 15:43:56
 * @LastEditors: 小康
 */
// 主题夜间模式及白天模式配色
#content-inner {
  // 白天模式下 卡片背景色
  --light_bg_color: rgba(255, 255, 255, 0.6);
  // 夜间模式下 卡片背景色
  --dark_bg_color: rgba(18, 18, 18, 0.8);
  // 白天模式下 页面背景色
  --light_page_color: rgba(255, 255, 255, 0.5);
  // 夜间模式下 页面背景色
  --dark_page_color: rgba(18, 18, 18, 0.8);
}
// 代码字体
@codefont: 'https://cdn.jsdelivr.net/npm/kang-static/Hexo/font/woff2/JetBrainsMono-Medium.woff2';
// 鼠标默认样式
@pointer_default: 'https://cdn.jsdelivr.net/npm/kang-static/Hexo/img/default.cur';
// 指针点击样式
@pointer_pointer: 'https://cdn.jsdelivr.net/npm/kang-static/Hexo/img/pointer.cur';
// 个人信息卡片鼠标悬停是否显示烟花
@avatarHover: true;
// 页脚渐变 不透明时为半透明状态,如需更改请自行到 footer.less进行调整
@footerGradient: false;
// 双栏布局
@layout: false;

修改你想要自定义的配置项,只需要修改配置中的对应字段即可(上面代码可能不全,以实际文件为准)。然后在根目录下运行如下命令进行构建即可。

npm i
npm run build

生成的index.min.css文件即为最终的魔改样式。将其放入你的cdn或者本地引入即可。

哔哔相关

哔哔页面

image-20210406192846443

此页面的修改方式参考:https://www.antmoe.com/posts/7ec820ee/

首页显示哔哔

image-20210406192943997

此页面的修改方式参考:https://www.antmoe.com/posts/7ec820ee/#添加首页轮播

扩展标签

参考地址:小康的 butterfly 主题使用文档 此文档中包含butterfly主题内置及扩展的标签。

扩展标签下载地址:https://tzk.lanzous.com/b06m0pbmh

将下载的扩展标签文件解压到*\themes\Butterfly\scripts\tag*路径即可。butterfly3.7.5是这个路径,如果你没有看到类似的文件或文件夹则说明你当前使用的版本不是此路径,请自行寻找其相关路径。

image-20210406201052341

关于样式:static-butterfly项目中包含相关样式。

友链魔改

友链魔改参考butterfly-friend食用文档