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