/

Astro 元件

Astro 元件

在建立 Astro 專案時，你會看到一些以 .astro 副檔名結尾的檔案。

我們來看一個例子。

讓我們選擇使用最小範本中預設提供的檔案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
---

<html lang="en">
 <head>
 <meta charset="utf-8" />
 <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 <meta name="viewport" content="width=device-width" />
 <title>Welcome to Astro</title>
 </head>

 <body>
 <h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
 </body>
</html>

元件基本上是 HTML，除了在頂部有兩行 ---。這是 前置資料（frontmatter）。你可能對這個概念從 Markdown 檔案很熟悉，例如在 Hugo 的文章中使用它來設定頁面標題和發佈日期。

注意，如果前置資料為空，你也可以省略它，直接以 HTML 標籤開始元件的定義。在這個例子中，前置資料是預設的 Astro 範例。

然而在 Astro 中的有趣之處在於它可以包含 JavaScript（或者如果你喜歡，也可以使用 TypeScript）。

請注意上面的第一個例子中包含了 html、head 和 body 標籤，因為它是一個頁面元件，這是一種特殊類型的元件，負責回應路由（並且位於 src/pages）。

在 src/pages 中，你也可以放置 .md 檔案，它們將被視為 markdown 頁面。Astro 會將它們渲染為純 HTML，除非你設定了一個佈局。我們將在另一篇文章中看到這是什麼意思。

元件也可以更簡單，比如在以下示例中，我們展示了如何使用 JavaScript（或 TypeScript）在前置資料中定義變數，並在 HTML 中以類似 JSX 的語法使用它們：

1
2
3
4
5
---
const name = 'Flavio'
---

<p>{name}</p>

這段 JavaScript 代碼在建置時運行，而不是在瀏覽器中運行。如果你想添加在瀏覽器中運行的 JavaScript，你可以在頁面中添加一個 script 標籤：

1
2
3
4
5
6
7
8
---
const name = 'Flavio'
---

<p>{name}</p>
<script>
 alert('test')
</script>

你可以做更多的事情，而不僅僅是定義變數。

你可以使用前置資料來匯入元件或程式庫。
你可以獲取數據。
你可以定義變數，然後在 HTML 中使用它們。

在任何元件中，你都可以使用 style 標籤定義作用範圍限定的 CSS：

1
2
3
4
5
6
7
8
9
10
---
const name = 'Flavio'
---

<p>{name}</p>
<style>
 p {
 color: red;
 }
</style>

當你在 src/components 資料夾中定義一個元件後，它將在 Astro 的任何元件中可用，你只需要導入它並嵌入它：

1
2
3
4
5
---
import Test from '../components/Test.astro'
---

<Test />

它並不是真正的 JSX，但它實際上是一個改進。

例如，要修改頁面元件的 head 部分，只需添加一個 head 標籤。
你可以使用普通的 HTML 註釋 <!-- --> 來進行註釋，而不是 {/* */}。
你可以使用 HTML 特殊字符。而 HTML 屬性不需要駝峰式命名。不需要使用 className= 了。

這些是一些小改進，但它確實使事情更簡單。

Astro 提供了一些內置的元件。例如，如果你想在元件中嵌入一些 Markdown，可以使用 Markdown：

1
2
3
4
5
---
import { Markdown } from 'astro/components';
---

<Markdown> # test </Markdown>

你還可以使用 Code 來在建置時直接進行語法高亮的程式碼嵌入。

同樣的，如果你想使用 Prism（我在博客中使用的庫）來進行同樣的操作，則有一個名為 Prism 的元件，其中包括客戶端 JavaScript。

還有 Debug 元件，你可以使用它在瀏覽器中打印頁面內容的變數來調試前置資料代碼：

1
2
3
4
5
6
---
import Debug from 'astro/debug';
const name = 'Flavio'
---

<Debug {name} />

tags: [“Astro 元件”, “Astro 前置資料”, “Astro JavaScript”, “Astro TypeScript”, “Astro 建置時間處理”, “Astro 樣式處理”]