折腾了一圈，最终回到 Hexo

折腾服务器的这几年，我其实一直有写东西的习惯：技术笔记、踩坑记录、甚至偶尔写写生活感悟。之前用 WordPress，后台太重，服务器 1 核 1G 时卡得不行；后来装了 Halo，确实好看但内存占用依然不低。直到这台新服务器（阿里云 2核2G、200M 峰值带宽、不限流量）到手，我决定折腾个静态博客。

选 Hexo 很简单：

  • Node.js 生态我熟（笔记站、网盘管理都用它）
  • 生成纯静态文件，随便丢 Nginx 就能跑，资源占用 ≈ 0
  • Butterfly 主题社区成熟，文档全中文

但 Butterfly 太「网感」了

我翻了很多 Butterfly 成品站，有个共同问题：

侧边栏花里胡哨，横幅 banner 又大又空，字太大留白太多，一屏看不了什么内容。

我反而喜欢当年 Typecho 的 NanoHex 那种干净、紧凑、像一本正经的杂志的样子。但它的配色太素，寒酸。

于是我给博客定了三条审美红线：

  1. 干净但不寒酸——靠排版细节撑场面，不靠花哨装饰
  2. 紧凑信息密度——一屏多看内容，字大、行距宽 = 眼累
  3. 不要二次元——我要的是「稳」和「质感」

于是有了「灵动岛」方案

某天用媳妇的 iPhone 14 Pro，切 App 时灵动岛那个"悬浮胶囊 + 随内容变形"的感觉，突然给了我灵感：

为什么博客导航必须是一条横跨整屏的横幅？不能是一个永远居中漂浮、只有我需要的时候才显眼的小胶囊吗？

于是就有了现在这个方案：

🧭 灵动岛导航

  • 深墨黑底 + backdrop-filter: blur(22px) 毛玻璃，和 iPhone 质感一模一样
  • 左边金色渐变「M」Logo，右侧 6 个导航项
  • 两组之间 1px 半透明分割线：首页 ｜ 文章 分类 标签 ｜ 归档 关于
  • 当前页 = 金色渐变胶囊高亮
  • 永远悬浮在视口顶部，滚动时不会把内容顶下来

📄 首页双屏结构

第一屏（整屏个人介绍）：

  • 100vh 高度，不显示文章
  • 头像：双层光环（conic 渐变旋转 + 虚线装饰圆反向旋转）+ 内部金字渐变 M
  • 标题「Mccの博客」：日文の字单独做金色渐变，一点日式小点缀但绝不二次元
  • 三身份徽章 + 滚动鼠标动画提示

只轻轻一碰滚轮？立即整屏吸附跳转到第二屏，不会卡在两屏中间。CSS 原生 scroll-snap-type: y mandatory + scroll-snap-stop: always 一行搞定。

第二屏（文章列表）：

  • 金色竖条「文章 / Posts」标题
  • 卡片布局：毛玻璃白底 + 1px 浅边。悬停时：左侧 3px 金色渐变竖条从 0 高度长到满（transform: scaleY）、卡片上浮 -4px、阴影变大、标题变金色
  • 分页也用金色按钮

🎨 配色：墨黑暖金「实业风」

主色没有选常见的蓝、绿、紫。选了：

  • 背景：暖纸白 #f7f3ea（不是纯白，偏暖色阅读不刺眼）
  • 主色：暖金 #c8a86e（金属质感、机械精密感）
  • 文字：石墨深墨 #1a1612（不是纯黑，柔和）

字体：标题 Noto Serif SC（思源宋体·衬线·杂志感）、正文 Noto Sans SC（思源黑体·无衬线·阅读）、代码 JetBrains Mono。

技术实现：绝不改主题源码

Butterfly 是 npm 装的（node_modules/hexo-theme-butterfly），为了以后升级主题不覆盖我的代码，完全不碰 node_modules 里的文件。

定制方式有两个：

1. Layout Override

Hexo 有个好机制：只要在项目根目录 layout/ 下创建和主题同路径同文件名的 pug，Hexo 就优先用项目里的。

所以我写了 3 个覆盖文件：

blog-local/layout/
├── includes/
│   ├── layout.pug                 ← 去掉原生 header，换成灵动岛
│   └── header/
│       └── dynamic-island.pug     ← 全新写的灵动岛组件
└── index.pug                      ← 首页双屏结构（Hero + 文章屏）

2. Inject 注入

在 _config.butterfly.yml 的 inject.head 和 inject.bottom 里引入自定义 CSS/JS：

inject:
  head:
    - <link href="Noto+Serif+SC&family=Noto+Sans+SC&family=JetBrains+Mono" rel="stylesheet">
    - <link rel="stylesheet" href="/css/mcc-theme.css">
  bottom:
    - <script src="/js/mcc-scroll-snap.js" defer></script>

CSS 里全局覆盖 Butterfly 默认的主题色、卡片、代码块、引用块、侧边栏样式等；JS 里增强 scroll-snap 在移动端的体验 + 折叠菜单。

代价？没有

整站生成后是纯 HTML/CSS/JS，1.6MB 大小（含 5 篇文章和图片）。放到服务器上 Nginx 开 gzip 压缩后首页传输量不到 60KB。

服务器里跑这博客的资源占用？大概 0% CPU，几 MB 内存。和当年 WordPress 占 50% CPU 比，恍如隔世。

好的工具和配置，决定产出的上限。 这个道理我在服务器上懂了，写博客也懂了。

（完）