组件和页面开发

Astro 组件

• 语法：.astro 文件支持前置脚本（岛内 TS/JS）+ 模板 + 样式。
• Props：通过 export const {prop} 声明；支持类型声明。
• 插槽：<slot /> 默认插槽，<slot name="xxx" /> 命名插槽。
• 样式作用域：<style> 默认作用于当前组件；可用 :global 扩展。

页面路由

• 文件路由：src/pages/xxx.astro -> /xxx，index.astro -> /。
• 动态路由：[id].astro 获取 Astro.params.id。
• 嵌套路由：文件夹层级即路径层级。
• 重定向/别名：在 getStaticPaths/页面逻辑中返回 Astro.redirect()。

UI 框架集成（Islands）

• 可直接引入 Vue/React/Svelte/Preact 组件。
• 客户端指令：client:load / client:idle / client:visible / client:media / client:only="vue" 等。
• 建议对交互组件使用延迟/按需指令，避免全局加载 JS。

布局系统

• 创建 src/layouts/BaseLayout.astro，页面通过 <BaseLayout> 包裹内容。
• 布局可嵌套，向下传递 Props（如标题、描述、SEO meta）。
• 共享组件：导航栏、页脚、主题切换等放入布局。

最佳实践

• 最小 JS：默认无 JS，给交互组件加客户端指令。
• 拆分岛屿：将交互拆分为小岛，减少水合成本。
• 类型安全：为 Props 与 getStaticPaths 返回值写类型。
• 资源优化：使用内置 <Image />、<Picture />，或配合 @astrojs/image。
• 错误处理：在页面/布局中捕获异步错误，必要时返回友好提示。***