在建立 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)。
請注意上面的第一個例子中包含了 html
、head
和 body
標籤,因為它是一個頁面元件,這是一種特殊類型的元件,負責回應路由(並且位於 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} />