iT邦幫忙

2023 iThome 鐵人賽

DAY 8
3

在這份教學中,我們將深入瞭解 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 的一些基本語法,可以開始使用它來開發網頁囉。


上一篇
認識 Astro Layouts (佈局)
下一篇
了解 Astro 的樣式設定 (Style)
系列文
從零開始學習 Astro, 打造個人Blog (部落格)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言