# Astro

> 现代静态优先、内容驱动的 Web 框架，Maplen 的基座构建引擎与孤岛架构运行时

- Site: https://maplen.top/
- Page: https://maplen.top/wiki/astro/
- LLM: https://maplen.top/wiki/astro/llms.txt
- Author: 红枫 (Maple)
- Audience: AI agents / LLM tools
- Updated: 2026.11.09
- Markdown: https://maplen.top/wiki/astro.md

## Content

Astro 是 [Maplen](/wiki/maplen.md) 的核心底座构建框架。

在设计之初，我对 Maplen 的技术底色设定了一条死命令：**文字的阅读必须是零 JavaScript 的极速静态体验，而交互必须是按需唤醒的孤岛。** Astro 的设计理念与这一初衷完全契合。

## 为什么选择 Astro

1. **默认零客户端 JS（Zero-JS by Default）**：
   在一般的单页应用（SPA）框架中，即使是一篇纯文本随笔，浏览器也必须下载数百 KB 的 JavaScript 运行时并进行水合（Hydration）。在 Astro 中，所有的 [Markdown (.md)](/wiki/md.md) 与大部分页面框架都在构建期直接预编译为最干净的纯语义 HTML，没有任何首屏脚本负担。

2. **孤岛架构（Component Islands）**：
   当我们需要在 [阻尼振子与电路仿真](/nodes/oscillator-showcase.md) 或 [8 位微处理器微架构](/nodes/computer-showcase.md) 中呈现复杂的实时交互时，Astro 允许我们在 [MDX (.mdx)](/wiki/mdx.md) 中按需引入局部组件：
   ```astro
   <ComputerSim client:visible />
   ```
   通过 `client:visible`，只有当读者滚动视窗至仿真器区域时，交互运行时的脚本才会被浏览器懒加载执行，绝不干扰正文文字的沉浸阅读。

3. **强类型内容层（Content Layer & Collections）**：
   Maplen 的所有手记、专栏和 Wiki 词条均被纳入 Astro 的 Content Layer 进行强类型 Schema 约束。构建期自动校验 Frontmatter 字段、标签完整性与双向链接关系，杜绝死链与格式损坏。

4. **出版级构建输出流水线**：
   同一套受 Git 追踪的源文件，通过 Astro 的编译管道被同时分流为人类阅读的静态网页、纯文本 `llms.txt`、裸 Markdown 镜像以及多级 RSS 订阅流。

关于 Astro 在整站静态架构中的流水线细节，可参考 [技术选型与静态管道](/nodes/architecture-showcase.md) 与 [设计系统宣言](/nodes/design-system.md)。

## 官方网站与参考链接

- **官方网站**：[Astro 官方主页 (astro.build)](https://astro.build/)
- **官方文档**：[Astro 中文技术文档 (docs.astro.build/zh-cn/)](https://docs.astro.build/zh-cn/)
- **开源仓库**：[GitHub - withastro/astro](https://github.com/withastro/astro)

## Backlinks

- [从源码到边缘：基于 GitHub 与 Cloudflare Workers 的全自动持续交付](https://maplen.top/nodes/deployment-showcase/llms.txt): 摒弃沉重的动态服务器与数据库，解析 Maplen 的静态技术路线选型、Git 源码资产沉淀，以及基于 Cloudflare Workers 静态资产网络的全自动持续交付流水线
- [视界拓宽：Maplen 的多媒体与交互地图嵌入实践](https://maplen.top/nodes/embeds-showcase/llms.txt): 解析在无服务器静态站点中，如何优雅嵌入 Bilibili 视频、网易云音乐与高德官方嵌入式地图（Embed Map），兼顾首屏轻量与多端降级
- [纸、墨与四色：我为什么这样设计 Maplen](https://maplen.top/nodes/design-system/llms.txt): 从一张纸、四种语气到统一模板与局部嵌入，这是我为 Maplen 确立的建站理念、核心架构与设计手记
- [图文互构：同目录配图、图注与排版留白](https://maplen.top/nodes/image-gallery-showcase/llms.txt): 从同目录素材收纳到出版级图注，解析如何在长文深度写作中构筑视觉节奏与留白美学
- [双轨交付：面向人类的暖纸与面向 AI 的 llms.txt](https://maplen.top/nodes/llms-and-feeds-showcase/llms.txt): 解析全站 /llms.txt 知识索引、原生纯文本 Markdown 镜像与多级 RSS 订阅流的双轨分发哲学
- [笔墨与纸面：Maplen 的排版美学与文本地基](https://maplen.top/nodes/markdown-showcase/llms.txt): 从字形微调、行间呼吸到 Wiki 双向链接与微观句子锚点，为长篇沉浸阅读筑牢坚实的地基
- [虚实之间：阻尼振子、机电对偶与交互式电路仿真](https://maplen.top/nodes/oscillator-showcase/llms.txt): 亲手拖动弹簧振子，调试 RLC 串联谐振电路，在时域与相空间中探索二阶动力学系统的工程之美
- [架构图与系统流向：Maplen 是如何运转的](https://maplen.top/nodes/architecture-showcase/llms.txt): 从 4N 正交体系到静态优先流水线，用 Mermaid 图表全景解析我为 Maplen 搭建的底层逻辑
- [Shiki](https://maplen.top/wiki/shiki/llms.txt): 基于 TextMate 语法的现代代码高亮引擎，为 Maplen 提供精准的双色主题代码块着色与复制工具