SKILL.md
readonlyread-only
name
astro
description
使用 Astro 網頁框架進行開發的技能。協助建立 Astro 元件與頁面、設定 SSR 轉接器、建立內容集合、部署靜態網站，以及管理專案結構與 CLI 指令。當使用者需要處理 Astro、提及 .astro 檔案、詢問靜態網站生成（SSG）、島嶼架構、內容集合或部署 Astro 專案時使用。
Astro 使用指南
請務必查閱 docs.astro.build 以取得程式碼範例與最新 API。
Astro 是專為內容驅動網站設計的網頁框架。
快速參考
檔案位置
CLI 會在 ./ 中尋找 astro.config.js、astro.config.mjs、astro.config.cjs 和 astro.config.ts。使用 --config 指定自訂路徑。
CLI 指令
npx astro dev- 啟動開發伺服器。npx astro build- 建置專案並寫入磁碟。npx astro check- 檢查專案中的錯誤。npx astro add- 新增整合套件。npx astro sync- 為所有 Astro 模組產生 TypeScript 型別。
新增或變更外掛後請重新執行。
專案結構
請參考專案結構文件。
src/*- 專案原始碼（元件、頁面、樣式、圖片等）src/pages- **必要。**定義所有頁面與路由。src/components- 元件（慣例，非必要）。src/layouts- 版面元件（慣例，非必要）。src/styles- CSS/Sass 檔案（慣例，非必要）。public/*- 非程式碼、未處理的靜態資源（字型、圖示等）；直接複製到建置輸出。package.json- 專案清單。astro.config.{js,mjs,cjs,ts}- Astro 設定檔。（建議）tsconfig.json- TypeScript 設定檔。（建議）
核心設定選項
| 選項 | 說明 |
|---|---|
site |
最終部署的 URL。用於產生 Sitemap 與 Canonical URL。 |
astro.config.ts 範例
import { defineConfig } from 'astro/config';
export default defineConfig({
site: 'https://example.com',
});
常見工作流程
建立基本頁面
在 src/pages/ 中新增檔案 — 檔名即為路由：
---
// src/pages/index.astro
const title = 'Hello, Astro!';
---
<html>
<head><title>{title}</title></head>
<body>
<h1>{title}</h1>
</body>
</html>
建立元件
---
// src/components/Card.astro
const { title, body } = Astro.props;
---
<div class="card">
<h2>{title}</h2>
<p>{body}</p>
</div>
使用轉接器部署
- 新增轉接器：
npx astro add vercel --yes（或node、cloudflare、netlify） - 執行
npx astro check在建置前檢查型別與設定錯誤。 - 執行
npx astro build產生部署成品。 - 確認建置輸出目錄（例如
dist/）存在且非空，再繼續後續步驟。 - 依照轉接器的文件部署輸出。
轉接器
使用建置轉接器部署到您偏好的伺服器、無伺服器或邊緣主機。使用轉接器可在 Astro 專案中啟用隨需渲染。
使用 astro add 新增 Node.js 轉接器：
npx astro add node --yes
使用 astro add 新增 Cloudflare 轉接器：
npx astro add cloudflare --yes
使用 astro add 新增 Netlify 轉接器：
npx astro add netlify --yes
使用 astro add 新增 Vercel 轉接器：
npx astro add vercel --yes
