🚀 欢迎来到 Astro 示范项目
一个展示 Astro 框架核心特性的现代化静态站点示范
默认零 JavaScript · 岛屿架构 · 内容优先 · 框架无关 · 极致性能
✨ 核心特性
岛屿架构
默认零 JS，按需引入交互式 UI 岛屿。让你的页面以纯静态 HTML 运行，极致性能。
内容优先
原生支持 Markdown / MDX，完美适配博客、文档等内容型站点。
框架无关
同时使用 React、Vue、Svelte、Solid 等组件，互不冲突。
服务端渲染
支持 SSG、SSR 和混合模式，灵活控制每个页面的输出策略。
资源优化
自动优化图片、字体、CSS，开箱即用的最佳性能实践。
丰富生态
活跃的社区和官方集成，可对接 CMS、数据库、分析等。
🖱️ 交互式岛屿示例
以下是一个 React 组件。打开浏览器控制台，你会发现这个页面默认没有任何 JS —— 只有这个交互组件会按需加载响应代码。
⚛️
React 交互岛屿
这是一个 React 组件，只有在需要交互时才会加载客户端 JS。
0
这只是一个纯静态卡片
即使放在 React 组件旁边，它也不会包含任何 JavaScript。 这就是「岛屿架构」的核心思想 —— 按需加水。
⚡ 这个卡片没有任何 JS 开销
📦 项目结构
src/
├── components/ # UI 组件（Astro + 交互式框架组件）
│ ├── Card.astro
│ ├── FeatureCard.astro
│ ├── Hero.astro
│ └── Counter.client.tsx
├── content/ # Markdown / MDX 内容
│ └── blog/
│ ├── getting-started.md
│ └── why-astro.md
├── layouts/ # 页面布局
│ └── BaseLayout.astro
├── pages/ # 路由页面
│ ├── index.astro
│ ├── about.astro
│ └── blog/
│ ├── index.astro
│ └── [slug].astro
└── styles/ # 全局样式
└── global.css