在這份教學中,我們將深入瞭解 Astro 語法的一些主要元素和相關範例,幫助您更好地理解如何使用 Astro 來建立網頁。
Astro 允許您在組件中綁定動態資料,這可以是來自組件屬性的資料,也可以是從資料源中獲取的資料。使用大括號 {}
來實現這一功能。以下是一個範例:
---
let name = "Alice";
---
<div>Hello, {name}!</div>
在這個範例中,我們宣告了一個名為 name
的變數,並在 <div>
元素中使用 {name}
來顯示動態資料。
您可以在 Astro 的 script
區塊中定義變數,根據條件來控制內容的顯示。以下是一個示例:
---
const show = true;
---
{show && <div>Show me!</div>}
在這個範例中,我們定義了一個名為 show
的變數,並使用 {show && <div>Show me!</div>}
來實現條件渲染。當 show
變數為 true
時,<div>Show me!</div>
將被渲染。
Astro 提供了方便的方法來進行列表渲染。您可以使用 map
函數來迭代列表中的項目並渲染它們。以下是一個示例:
---
let items = ["Apple", "Banana", "Orange"];
---
<ul>
{items.map((item) => <li>{item}</li>)}
</ul>
<!-- 等同於 -->
<ul>
{
items.map((item) => {
return <li>{item}</li>;
})
}
</ul>
這個範例將渲染一個無序列表,其中包含列表 items 中的項目。使用 map 函數,我們可以動態生成列表項目。
在 Astro 中,您可以輕鬆引入組件和資源。以下是一個示例:
---
import Button from "../components/Button.astro";
---
<div>
<Button title="Button 1" />
<Button title="Button 2" />
<Button title="Button 3" />
</div>
<img src="../../public/favicon.svg" alt="Logo" />
在這個範例中,我們從 ../components/Button.astro
引入了一個名為 Button
的組件,並在頁面上多次使用它。同時,我們還引入了一個圖像資源。
這些 Astro 語法元素可以幫助您建立具有動態資料綁定、條件渲染、列表渲染和資源引入功能的網頁。現在,您已經了解了 Astro 的一些基本語法,可以開始使用它來開發網頁囉。