第一課：Astro 的靈魂 —— 組件與佈局 (Layouts)
在 Astro 中，網頁是由一個個 .astro 檔案組成的。這類檔案最大的特色是：預設不發送任何 JavaScript 到瀏覽器，所以速度極快。
0_建立Astro專案：
打開終端機，執行以下指令：
npm create astro@latest -- --template minimal
- 選擇
Yes安裝依賴。 - 選擇
Yes使用 TypeScript（強烈建議，這會讓你的開發體驗更紮實）。 - 進入資料夾後啟動開發伺服器：
npm run dev
1_核心概念：Code Fence (---)
每個 .astro 檔案頂部都有兩條線 ---，這叫 Code Fence。
* Fence[fɛns]: 圍欄、柵欄
- 裡面寫什麼： TypeScript/JavaScript、匯入組件、從 API 抓取資料。
- 執行時機： 僅在編譯時（Build time）或伺服器端執行。
2_手把手實作：建立第一個佈局
請在你的專案中建立 /src/layouts/BaseLayout.astro：
---
// 這裡接收來自頁面的參數
const { pageTitle } = Astro.props;
---
<html lang="zh-TW">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<title>{pageTitle}</title>
<style>
body { font-family: sans-serif; line-height: 1.6; max-width: 800px; margin: 0 auto; padding: 2rem; }
nav { border-bottom: 1px solid #ccc; padding-bottom: 1rem; margin-bottom: 2rem; }
a { margin-right: 1rem; text-decoration: none; color: #0070f3; }
</style>
</head>
<body>
<nav>
<a href="/">首頁</a>
<a href="/about/">關於我</a>
</nav>
<h1>{pageTitle}</h1>
<slot />
<footer>
<hr />
<p>© 2024 我的 Astro 學習筆記</p>
</footer>
</body>
</html>
3_手把手實作：應用佈局到頁面
修改 /src/pages/index.astro：
---
import BaseLayout from '../layouts/BaseLayout.astro';
const pageTitle = "首頁";
const skills = ["Astro", "TypeScript", "React"];
---
<BaseLayout pageTitle={pageTitle}>
<h2>歡迎來到我的 Astro 課程</h2>
<p>這是我的第一個頁面，正在練習如何使用 Layout。</p>
<ul>
{skills.map((skill) => <li style="color: navy;">{skill}</li>)}
</ul>
</BaseLayout>
📝 第一課練習題
任務目標： 建立一個「關於我 (About)」頁面，並練習資料傳遞。
- 在
src/pages/下建立一個新檔案about.astro。 - 匯入並使用剛才寫好的
BaseLayout。 - 在
---區塊內定義一個對象identity，包含firstName和hobbies（數組）。 - 在頁面上使用
{identity.firstName}顯示名字。 - 使用
{identity.hobbies.map()}把你的愛好列印成一個列表。 - 挑戰題： 試著在
BaseLayout裡增加一個變數，讓每個頁面的背景顏色可以透過 Props 從index.astro或about.astro傳進去（例如：index是白色，about是淺灰色）。
第一課練習題實作放在下一篇 ( 我也是第一次學習，自己試作，不一定是對的喔👍 )
