Back to Blog

博客架构进化:从简单模板到现代化技术站

Astro
Refactor
Web Dev
UI

记录 tech-blog 的深度重构过程,包括配置抽离、标签系统、Pagefind 搜索及 UI 细节优化。

Published on 1/23/2026

随着文章数量的增加,原本简单的 Astro 博客模板开始显得有些捉襟见肘。为了提升可维护性和阅读体验,我进行了一次全方位的深度重构。

核心优化点

1. 配置中心化

将原本散落在各个组件中的导航链接、社交媒体地址和站点信息统一抽离到了 src/consts.ts。现在,修改一次配置即可全局生效,彻底告别了硬编码时代。

2. 标签系统 (Tags System)

引入了完善的标签闭环:

  • Schema 校验:利用 Zod 在 content.config.ts 中定义了严格的标签类型。
  • UI 展示:博文列表页增加了精致的 Badge 标签。
  • 分类索引:建立了 /tags 汇总页和 /tags/[tag] 详情页,方便按主题阅读。

3. 高性能搜索:Pagefind

集成了由 Rust 编写的静态搜索库 Pagefind。它在构建时进行索引,运行阶段零后端依赖,速度极快,完美契合静态站点的气质。

4. UI/UX 抛光

  • 卡片动效:为博文列表引入了基于 transform 的悬浮位移和阴影效果。
  • 内容规范化:移除了正文中冗余的 H1 标题(因为 Frontmatter 已经提供了标题),精简了视觉干扰,让读者能更快速地进入核心内容。
  • 文件名标准化:统一使用 kebab-case 命名法,对 SEO 更友好。

规范的价值

重构过程中,我深刻体会到“规范”的力量。无论是代码层面的配置抽离,还是内容层面的标题精简,其本质都是为了降低认知的负担


代码需要不断重构,思维亦如是。 🚀