素材阁

Astro 速查

共 26 条 Astro 速查:命令、页面与组件、内容集合、配置与渲染模式、客户端交互。 支持搜索与分类筛选,点击即可复制。

命令

内容优先的静态站点框架。

命令说明
创建项目
开发 / 构建 / 预览
一键接入集成
类型检查
生成内容集合类型

页面与组件

文件即路由,.astro 是组件格式。

命令说明
首页(对应 /)
动态路由
.astro 文件结构
接收 props
默认插槽 / 具名插槽
复用布局

内容集合

类型安全的内容管理。

命令说明
声明集合与 schema
引入查询 API
取集合内容
取单条
条目字段

配置与渲染模式

astro.config.mjs。

命令说明
集成配置
静态 / 服务端渲染
部署适配器(SSR 需要)
按页控制预渲染
站点与子路径
底层 Vite 配置

客户端交互

岛屿架构:默认零 JS。

命令说明
客户端指令:load(立即加载)
空闲 / 可见时加载 / 仅客户端
多框架混用
页面脚本

使用说明

Astro 速查:命令、页面与组件、内容集合、配置与渲染模式、客户端交互;支持搜索与分类筛选,点击即可复制。

  1. 按用途点分类:命令、页面与组件、内容集合、配置与渲染模式、客户端交互。
  2. 点「命令」列复制到终端或前端代码。
  3. 默认静态输出、默认零 JS;需要交互的组件才加 client:* 指令。
  4. 内容驱动站点建议用内容集合,获得类型安全的查询。

常见问题

Astro 和 Next.js 有什么区别?
Astro 以内容与静态输出优先、默认不发 JS(岛屿架构按需加载);Next.js 是 React 全栈框架、默认带较多客户端运行时。
client:load 和 client:visible 怎么选?
需要尽快可交互用 load;首屏以下的组件用 visible(进入视口才加载),能显著省 JS。
需要联网吗?
速查内容本地可用;安装依赖需联网。

延伸阅读

相关工具