Hexo博客之butterfly主题优雅魔改系列

关于魔改

对于魔改这件事：起初刚刚接触时我对魔改是非常积极的。但随着时间的退役也出现了各种各样的问题：

个人精力
魔改的意义

不得不承认首先我建立博客的目的仅仅是为了记录，而不是享受魔改的乐趣。但也渐渐的偏离初心，例如友联魔改，虽然我现在的友联保留了当初那些花里胡哨的参数，但是在添加友联时并未明显的提示。

本着博客的目的是记录和阅读，我现在的观点是：

是否会使阅读更舒适（或是加强阅读） -> 可以考虑
是否属于可以，但没必要的魔改 -> 大概率不会做了

前置说明

魔改亮点

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

🍳简单快速：简单上手，快速修改。

🍭看我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。

1
2
3

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

自定义魔改

如果你不想直接使用我的魔改，你想要修改某些东西，例如卡片透明度，那么你不必修改压缩过的 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;