Astro 元件

在建立 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 的語法使用它們：...