Hello Astro 5

选型

Astro 5 在静态博客这个赛道就是 current SOTA。三个理由:

1. 默认 0 JS:构建产物只包含需要的部分
2. Islands 架构:可以在需要的页面引入 React/Vue 组件
3. Content Collections:用 Zod 约束 frontmatter,写错直接构建失败

目录结构

src/content/
├── moments/      # 碎碎念
├── practice/     # 刷题
└── articles/     # 长文

每个目录一个 Collection,schema 单独定义。status: draft | published 一键筛选草稿。

图片策略

原图全部放到 public/images/<type>/<slug>/,构建时 astro:assets 的 <Image> 组件自动转 webp + 生成多尺寸 srcset。

本站使用 Astro 構建,所有文章均為 Markdown / MDX。

---
import { Image } from "astro:assets";
import cover from "@/assets/cover.png";
---
<Image src={cover} alt="封面" />

刷题三段式

用 MDX 的 <Practice> 组件,三段竖排卡片(题目 / 代码 / 思路,带 1·2·3 序号)。 复习顺序就按这个走 —— 先回忆题目 → 看代码 → 核思路:

<Practice lang="rust">

<Fragment slot="problem">
题目 markdown
</Fragment>

<Fragment slot="code">
```rust
fn main() {}
```
</Fragment>

<Fragment slot="notes">
思路 / 复杂度 / 相关题链接
</Fragment>

</Practice>

桌面 / 移动端结构一致,单列卡片堆叠。右侧的目录(TOC)才是 sticky 跟随滚动的元素,见 TableOfContents 组件。