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

我們來看一個例子。

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

---
---

<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)。

請注意上面的第一個例子中包含了 htmlheadbody 標籤,因為它是一個頁面元件,這是一種特殊類型的元件,負責回應路由(並且位於 src/pages)。

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

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

---
const name = 'Flavio'
---

<p>{name}</p>

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

---
const name = 'Flavio'
---

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

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

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

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

---
const name = 'Flavio'
---

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

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

---
import Test from '../components/Test.astro'
---

<Test />

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

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

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

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

---
import { Markdown } from 'astro/components';
---

<Markdown> # test </Markdown>

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

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

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

---
import Debug from 'astro/debug';
const name = 'Flavio'
---

<Debug {name} />