给博客换了统一的皮肤
这个博客 UI 改造的完整过程，从参考设计到具体实现，包括模板重构、样式统一、主题切换等关键改动。
页面样式逐渐变得混乱。首页、文章页、工具页各有各的设计语言，导航栏不统一，主题切换缺失。这次改造的目标是建立一套统一的设计系统，让所有页面看起来像同一个网站。
next-contentlayer 成了主要参考。它的设计简洁、现代，单列布局、无卡片阴影、系统字体栈，正好符合「让 UI 消失，文字主导」的理念。我保存了它的首页、文章页、关于页的 HTML 和 CSS 作为参考基准。
改造从模板结构开始。之前每个页面都重复写 <head> 里的 meta、CSS、JS，维护成本很高。我把公共部分拆成 6 个 partials，分别负责 charset 和 viewport、favicon 和 manifest、canonical 和 description、OG 和 Twitter Card、CSS 和主题切换初始化、导航栏和主题切换按钮。所有页面复用这些 partials，修改一处全局生效。
样式统一是另一个重点。之前各页面宽度、字体、链接样式都不一致。现在统一了容器宽度、系统字体栈、CJK 支持、链接样式。主题页面的文章列表也采用了与首页相同的结构和样式。
主题切换是新增功能。next-contentlayer 用 CSS 类 .dark 控制深色模式，我沿用这个方案。初始化脚本从 localStorage 读取主题偏好，同步到 <html> 的 class。主题切换按钮放在导航栏右侧，点击时切换 .dark 类并保存到 localStorage。CSS 变量定义了两套颜色方案，@media (prefers-color-scheme: dark) 作为默认，.dark 类覆盖。
删除了几个遗留页面。早期首页提案已弃用，实验室页面内容碎片化维护成本高。可视化总览页和工具总览页改为动态生成，从配置文件读取数据，构建时渲染。
配置清理同步进行。无引用的配置字段删除。写了个检查脚本，扫描所有模板和构建脚本，报告未使用的配置项，避免手动清理遗漏。
项目页面重构为动态生成。之前是手写的 HTML，新增项目需要手动添加条目。现在改为从配置文件读取项目列表，构建时渲染。新增项目只需在配置文件加一行，构建自动更新。
静态工具页面也统一了设计。之前它们各自维护独立的 HTML，样式不一致。现在统一为相同的容器宽度、系统字体栈、主题切换按钮、完整导航栏。
验证环节跑通了所有检查。构建和验证命令确认每篇文章页都包含复制组件、clipboard API、chatbot 弹出菜单。所有页面样式统一，主题切换生效，导航栏一致。
核心收益是可维护性：模板 partials 减少重复，配置检查脚本防止冗余，动态生成页面减少手动维护。设计系统建立后，新增页面只需遵循规范，不用重新设计样式。
相关文章
- 让博客对 Agent 友好 — 博客的另一次改造，新增 llms.txt、Markdown 端点和结构化内容 API
- 用 Bun WebView 给博客搭了一个 Mermaid 渲染引擎 — 用 Bun 内置的 WebView API 搭的工具
- 简单需求自建 — 自建工具的理念，代码清晰易懂，维护成本低
- 效率悖论 — AI 提高效率后的思考，效率越高，期望越高
更新记录
- 发布