今天，我們將進一步深入了解 Astro 的組件。
Astro 組件是 Astro 專案的基本構建塊，它們是僅支持 HTML 的模板組件，沒有客戶端運行時。您可以通過文件擴展名 .astro 識別 Astro 組件。
<meta> 標籤，用於方便地處理 SEO。當 Astro 組件需要客戶端交互性時，您可以添加標准的 HTML <script> 標籤或 UI 框架組件。
一個 Astro 組件由兩個主要部分組成：組件腳本（Component Script）和組件模板（Component Template）。這兩個部分分別扮演著不同的角色，但合在一起提供了一個易於使用且表達力強大的框架，用於處理您可能想要構建的任何內容。
---
// Component script (JavaScript)
---
<!-- Component Template (HTML + JS + CSS ) -->
Astro 使用代碼區塊 --- 來識別 Astro 組件中的組件腳本。
如果使用過 Markdown，您可能已經對類似概念的 frontmatter 比較熟悉。
Astro 的組件腳本就是直接受到這個概念的啟發。這個部分可以用於以下目的：
組件模板位於代碼區塊之下，決定了組件的 HTML 輸出。在組件模板中，您可以編寫純 HTML，並支持以下功能：
<style> 和 <script> 標籤Astro 指令讓我們看一個實際的例子，如何建立一個 Astro 組件。
src/components 裡建立一個 Button.astro 檔案---
const { title } = Astro.props;
---
<button>{title}</button>
src/pages 中引用剛剛建立的 Button 組件。---
import Button from "../components/Button.astro";
---
<div>
<Button title="Button 1" />
<Button title="Button 2" />
<Button title="Button 3" />
</div>
在 Astro 組件中，props 用來作為屬性傳遞。這讓您可以輕鬆地向組件傳遞數據和參數，以自訂其行為。
<slot> 元素是外部 HTML 內容的佔位符，允許您將子元素從其他檔案注入到組件模板中。
預設情況下，傳遞給組件的所有子元素都將在 <slot> 中呈現。
---
import Header from "./Header.astro";
import Logo from "./Logo.astro";
import Footer from "./Footer.astro";
const { title } = Astro.props;
---
<div id="content-wrapper">
<Header />
<Logo />
<h1>{title}</h1>
<slot />
<!-- 子元素將在這裡渲染 -->
<Footer />
</div>
---
import Wrapper from "../components/Wrapper.astro";
---
<Wrapper title="Fred's Page">
<h2>All about Fred</h2>
<p>Here is some stuff about Fred.</p>
</Wrapper>
這種模式是 Astro 佈局組件的基礎：整個 HTML 內容可以使用 標籤包裹起來，並傳送到組件中以在其中呈現公共頁面元素。
Astro 組件還可以具有帶有名稱的插槽。這使您只能將具有相應插槽名稱的 HTML 元素傳遞到插槽位置。
使用 name 屬性來命名插槽：
---
import Header from "./Header.astro";
import Logo from "./Logo.astro";
import Footer from "./Footer.astro";
const { title } = Astro.props;
---
<div id="content-wrapper">
<Header />
<slot name="after-header" />
<!-- 子元素帶有 `slot="after-header"` 屬性將在這裡渲染 -->
<Logo />
<h1>{title}</h1>
<slot />
<!-- 子元素沒有 `slot` 屬性，或帶有 `slot="default"` 屬性將在這裡渲染 -->
<Footer />
<slot name="after-footer" />
<!-- 子元素帶有 `slot="after-footer"` 屬性將在這裡渲染 -->
</div>
---
import Wrapper from "../components/Wrapper.astro";
---
<Wrapper title="Fred's Page">
<img src="https://my.photo/fred.jpg" slot="after-header" />
<h2>All about Fred</h2>
<p>Here is some stuff about Fred.</p>
<p slot="after-footer">Copyright 2022</p>
</Wrapper>
使用 slot="my-slot" 屬性在子元素上，指定要傳遞到組件中相應的 <slot name="my-slot" /> 佔位符中。
請注意，帶有名稱的插槽必須是組件的直接子元素。您不能通過嵌套元素傳遞帶有名稱的插槽。
提示：帶有名稱的插槽也可以傳遞給 UI 框架組件！
插槽還可以渲染回退內容。當沒有匹配的子元素傳遞給插槽時，<slot> 元素將渲染其自己的佔位符子元素。這是一個很有用的功能，可以確保即使沒有提供子元素，組件也能正常工作。
<!-- src/components/Wrapper.astro -->
---
import Header from "./Header.astro";
import Logo from "./Logo.astro";
import Footer from "./Footer.astro";
const { title } = Astro.props;
---
<div id="content-wrapper">
<Header />
<Logo />
<h1>{title}</h1>
<slot>
<p>This is my fallback content, if there is no child passed into slot</p>
</slot>
<Footer />
</div>
插槽可以轉移到其他組件，這在創建嵌套佈局時特別有用。
---
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<slot name="head" />
</head>
<body>
<slot />
</body>
</html>
---
import BaseLayout from "./BaseLayout.astro";
---
<BaseLayout>
<slot name="head" slot="head" />
<slot />
</BaseLayout>
現在，傳遞給 HomeLayout 的預設和 head 插槽將轉移到 BaseLayout 父組件中。
---
import HomeLayout from "../layouts/HomeLayout.astro";
---
<HomeLayout>
<title slot="head">Astro</title>
<h1>Astro</h1>
</HomeLayout>
Astro 支援將 .html 文件作為組件導入和使用，或將這些文件放在 src/pages/ 子目錄中作為頁面。如果您想要重用沒有使用框架建立的現有站點的代碼，或者確保您的組件不具有動態功能，您可能會使用 HTML 組件。
HTML 組件必須僅包含有效的 HTML，因此缺少關鍵的 Astro 組件功能：
frontmatter、伺服器端導入或動態表達式。<script> 標籤都將保持未打包，被視為 is:inline。public/ 文件夾中的資源。今天我們瞭解了 Astro 組件的概念和結構。我們學會了如何建立和使用 Astro 組件，以及如何使用插槽在組件中注入不同的內容。
iThome鐵人賽
看影片追技術