工程实践 on E7Coding

排版样例：Markdown 各元素一览

Joy — Fri, 12 Jun 2026 00:00:00 +0000

这一段是普通正文，用来检查加粗、行内代码 以及链接的样式是否与 Minimal 一致。正文字号 16px、行高 1.5。

二级标题（Barlow 800）

段落之间保持 1.25rem 的下边距，整体竖向节奏与原 Minimal 的 styles.tsx 对齐。

三级标题

下面是无序与有序列表：

第一项，列表行高为 2
第二项，缩进 16px
第三项

有序列表第一步
有序列表第二步

任务列表

已完成的任务
待办的任务

引用

设计的一致性，不是靠自律，而是靠把正确的选择变成默认值。

静态博客的零成本托管方案对比

Joy — Thu, 11 Jun 2026 00:00:00 +0000

为什么静态站托管几乎免费

没有服务器、没有数据库，CDN 直接分发 HTML —— 这让静态博客可以挂在各家免费额度上长期运行。

四家对比

Cloudflare Pages：构建额度宽松，全球 CDN 最快，推荐
Vercel：体验顺滑，但商业用途需留意条款
Netlify：老牌，表单/函数生态完整
GitHub Pages：最简单，但构建能力有限

对个人博客，Cloudflare Pages + Hugo 是当前性价比最高的组合。

重构老项目前，我会先做这三件事

Joy — Thu, 11 Jun 2026 00:00:00 +0000

接手一个没人敢动的老项目，最容易犯的错就是上来就大改。我的经验是先做三件事：

1. 给关键路径补上测试

哪怕只是冒烟测试，也能在你改坏东西时第一时间报警。没有测试的重构，等于闭着眼睛拆炸弹。

2. 划清模块边界

先理清「谁依赖谁」，把要动的部分和外界的接口固定下来。边界稳了，内部怎么折腾都可控。

3. 留好可回滚的退路

小步提交、特性开关、灰度发布——确保任何一步都能快速退回。重构是马拉松，不是一锤子买卖。

做完这三件，再开始动手，心里就有底了。

用 Hugo 复刻 Minimal UI 的博客观感

Joy — Wed, 10 Jun 2026 00:00:00 +0000

为什么是 Hugo

Minimal UI 是一套基于 React + MUI 的后台模板，观感精炼。但个人博客并不需要一个运行时 SPA —— 静态站点在速度、可维护性、托管成本上都更划算。

Hugo 的优势在于：

构建极快，上千篇文章秒级出站
内置 taxonomy，分类（categories）与标签（tags）开箱即用
Markdown 即内容，写作体验顺滑

设计如何迁移

MUI 的 sx 与主题系统无法直接搬运，但设计 token 可以：主色 #00A76F、柔和卡片阴影、16px 圆角、Public Sans + Barlow 字体，全部转写成 Tailwind v4 的 @theme 变量即可。

把 MUI 主题转写成 Tailwind v4 的设计 token

Joy — Mon, 08 Jun 2026 00:00:00 +0000

@theme 是关键

Tailwind v4 用 @theme 块声明设计 token，声明即生成工具类。把 Minimal 的 theme-config.ts 里的值原样搬过来：

@theme {
 --color-primary: #00a76f;
 --radius-card: 16px;
 --shadow-card: 0 0 2px 0 rgb(145 158 171 / .2),
 0 12px 24px -4px rgb(145 158 171 / .12);
}

之后就能直接写 bg-primary、rounded-card、shadow-card。

soft chip 的复刻

MUI 的 <Chip variant="soft"> 是 16% 透明度底色 + 主色文字，用 color-mix 一行还原，无需额外配置。

用「设计 token」的思维管理个人站点风格

Joy — Sun, 07 Jun 2026 00:00:00 +0000

token 是单一事实来源

把所有视觉决策（主色、灰阶、圆角、阴影）收敛成命名变量，模板里只引用变量名而非硬编码值。换肤、调性微调都只动一处。

在 Tailwind v4 里落地

@theme 块声明即生成工具类，这让"设计 token = 实现"几乎零距离。

风格一致性不是靠自律，而是靠把正确的选择变成默认值。