在完成了基础架构的重构后,我决定让这个博客在“细节”上达到极致。这就是 tech-blog 2.0。
升级清单
1. 官网级的排版 (Typography)
引入了 @tailwindcss/typography。现在,无论是代码块、引用、列表还是加粗,都具备了现代技术文档的比例感。
2. 沉浸式阅读增强
- Sticky TOC:侧边栏实时目录,点击精准跳转,大长文不再迷路。
- 一键复制代码:每个代码块右上角新增了复制按钮,这是程序员最基础的尊严。
- 宽度自由:新增了悬浮的“阅读模式切换”按钮,支持在“标准宽度”和“宽屏模式”间切换,满足不同屏幕的需求。
3. 视觉抛光
参考了 shadcn/ui 的设计语言,为博文卡片增加了微小的 translate-y 位移和深度阴影效果。这种“克制”的动效让站点显得更加专业且稳重。
深度思考:为什么 AI 喜欢 shadcn 风格?
在重构过程中,我与 AI 深度讨论了前端技术栈的“AI 友好度”。
- 透明度胜过黑盒:shadcn 这种“代码分发”模式让 AI 能够直接看到并修改源码,而不是在
node_modules的黑盒外猜测。 - Tailwind 是 AI 的母语:Tailwind 将复杂的 CSS 语义化为可预测的 Token,这让 AI 调整样式的准确率直线上升。
- 逻辑确定性:结合 Zod 进行数据校验,能让 TypeScript 的类型从“建议”变成“契约”,这补齐了 AI 写前端时最后的安全拼图。
每一小步,都是积淀
从最初的一个简单的 Hello World,到现在的 Rust 驱动搜索、自动化标签系统、以及完善的 UI。这个博客不仅是我技术心得的载体,它本身也成为了我探索 “AI + 开发者” 协作边界的实验室。
掌握工具的人,终将改变工具。 🚀