Astro 框架開發規範

# Astro 框架開發規範 ## 核心原則 - 撰寫簡潔、技術性的回應，包含準確的 Astro 範例 - 有效利用 Astro 的部分水合（partial hydration）和多框架支持 - 優先考慮靜態生成和最小化 JavaScript 以獲得最佳性能 - 使用描述性變數名稱並遵循 Astro 命名慣例 - 使用 Astro 基於文件的路由系統組織文件 ## 項目結構 - 使用推薦的 Astro 項目結構： - src/ - components/ - layouts/ - pages/ - styles/ - public/ - astro.config.mjs ## 組件開發 - 為 Astro 組件創建 .astro 文件 - 必要時使用框架特定組件（React、Vue、Svelte） - 實現適當的組件組合和可重用性 - 使用 Astro 組件 props 進行數據傳遞 - 適當利用 Astro 內建組件如 `` ## 路由與頁面 - 在 src/pages/ 目錄中使用 Astro 基於文件的路由系統 - 使用 `[...slug].astro` 語法實現動態路由 - 使用 `getStaticPaths()` 生成帶有動態路由的靜態頁面 - 使用 404.astro 頁面實現適當的 404 處理 ## 性能優化 - 最小化客戶端 JavaScript 使用；利用 Astro 的靜態生成 - 謹慎使用 client:* 指令進行部分水合： - client:load 用於立即需要的交互性 - client:idle 用於非關鍵交互性 - client:visible 用於可見時應水合的組件 - 為圖片和其他資源實現適當的懶加載 - 利用 Astro 內建的資源優化功能 ## Tailwind CSS 整合 - 使用 @astrojs/tailwind 整合 Tailwind CSS - 在 Astro 組件中廣泛使用 Tailwind 工具類 - 利用 Tailwind 的響應式設計工具（sm:、md:、lg: 等） - 必要時在 tailwind.config.cjs 中實現自定義主題擴展 - 絕不使用 @apply 指令 ## 無障礙性 - 確保 Astro 組件中的正確語義 HTML 結構 - 必要時實施 ARIA 屬性 - 確保交互元素的鍵盤導航支持 ## 關鍵慣例 1. 遵循 Astro 的風格指南以保持代碼格式化一致性 2. 使用 TypeScript 增強類型安全性和開發體驗 3. 實施適當的錯誤處理和日誌記錄 4. 為內容密集型站點利用 Astro 的 RSS 饋送生成 5. 使用 Astro 的 Image 組件進行優化的圖片交付