随着文章数量的增加,原本简单的 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 更友好。
规范的价值
重构过程中,我深刻体会到“规范”的力量。无论是代码层面的配置抽离,还是内容层面的标题精简,其本质都是为了降低认知的负担。
代码需要不断重构,思维亦如是。 🚀