背景与技术选型
在构建兼具“个人主页”与“工程开发日志”的双重站点时，传统的单页应用（SPA）往往会引入过度臃肿的客户端运行时。过重的 JavaScript 水合（Hydration）流程不仅拉长首屏时间，还会让简单的长文阅读体验变得迟钝。
针对 zhan builds，我们明确选用了 Astro 5 (SSG) 静态生成方案。
[!NOTE] Astro 的孤岛架构（Islands Architecture）在构建时默认将所有页面编译为纯粹的静态 HTML 与 CSS。除非明确声明交互指令，否则客户端不会加载任何外部 UI 运行时。
App Portal 布局设计
整体界面划分为经典的 App Portal 结构：
- 桌面端（>= 1024px）：左侧 280px 宽度固定侧边栏，集中呈现站点身份、在线状态指示器、工作区核心导航与外部链接；右侧主工作区独立滚动，保持上下文稳定。
- 移动端（< 1024px）：折叠为紧凑的粘性顶部栏，通过轻量级原生 DOM 事件驱动的抽屉（Drawer）组件完成展开与遮罩关闭。
// Astro 5 强类型内容集合 Schema
const builds = defineCollection({
loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/builds' }),
schema: z.object({
title: z.string(),
description: z.string(),
pubDate: z.coerce.date(),
tags: z.array(z.string()).default([]),
project: z.string().optional(), // 关联 projects 对应 ID
}),
});双向内容拓扑关联
日志与项目不再是相互割裂的信息孤岛。每篇日志在 Frontmatter 中都可以通过 project 字段与对应项目进行外键绑定。
当访客进入项目专页时，系统在编译期自动通过静态集合的反向索引，将属于该项目的所有日志按时间倒序汇聚为演进里程碑。