本文由AI自助生成…

拖了很久，终于把这个博客的主题整理成独立仓库发出来了。

为什么要做这件事

最初用的是 hexo-theme-A4，纸张美学这个方向我很喜欢，用着用着就开始折腾美化。先是替换掉了 jQuery，然后觉得颜色不够有生命力，改了配色，又移植了 Typora 主题 Phycat 的排版层级……发现跟A4风格分叉了，就干脆起了个名字：晴纸（qingzhi）。

「晴天与素纸」，我想要的博客质感，动效与生命力。

主色是「霁蓝」，一种偏冷的钢蓝色（#5B8BA4），灵感来自雨后放晴的天空。

排版上移植了 Phycat 的标题层级系统：

• H1：居中 + 渐变细条装饰
• H2：渐变胶囊标签
• H3：左侧竖条
• H4/H5：实心/空心圆点

mark 像荧光笔一样从下往上浮起，kbd 是 3D 键帽，加粗文字会带主题色深色点缀。

字体用的是小米的 MiSans（HyperOS 3 系统字体），三个字重，走 jsDelivr 按需加载。

原始的 A4 主题依赖 jQuery，我全部用原生 Web API 重写了六个功能模块：IntersectionObserver 做懒加载、fetch 替换 AJAX、scrollIntoView 做目录定位。

CSS 上引入了 CSS Custom Properties 作为设计 Token，颜色、字体、宽度全部通过 _config.yml 注入 CSS 变量，不需要动 CSS 文件本身。

另外还做了：

• 专栏系统：front-matter 写 series + series_index 就自动生成专栏导航
• Fragment 便签：6 种颜色的 Hexo 标签，用于文章内的重点框
• 工具箱：42 个纯前端小工具，函数绘图、进制转换、Cron 解析等等，每个工具是一个自描述 JS 对象
• 图片灯箱：LightGallery，加 data-no-gallery 跳过某张图
• 最近更新页：只有在 front-matter 里手动写了 updated: 才进列表，不读 git 时间

安装

1
2
3

cd your-hexo-site
git clone https://github.com/yeliqin666/hexo-theme-qingzhi themes/qingzhi
npm install --save hexo-wordcount hexo-generator-search hexo-renderer-pandoc hexo-filter-mathjax

站点配置里 theme: qingzhi，然后把 themes/qingzhi/_config.yml 里的注释读一遍就能上手。需要 Pandoc 本地安装（用于公式渲染）。

仓库地址：yeliqin666/hexo-theme-qingzhi

提了官方 PR

已经向 hexojs/site 提了 PR，流程就是往仓库里加一个 yml 文件和一张 800×500 的截图。目前是 Open 状态，等待维护者审核。如果过了，晴纸会出现在 hexo.io/themes 官方列表里。

官方列表里有不少审美差异极大的主题并存，从极简白板到高度风格化的二次元主页都有。不知道我这个能不能通过，嘿嘿。

感谢 AI 们

主题的 JS 模块重写、CSS 架构、工具箱里的各种功能，基本都是 Vibe Coding 全程。ChatGPT、Gemini、Claude、豆包轮番上阵，每次以为搞定了，下一个 bug 又冒出来。调试一个动画的 timing 可以在四个 AI 之间绕两个小时，但最后它们还是帮我把坑都填上了。差点被主页APlayer气晕。