頁面

頁面是在你 Astro 專案的 src/pages/ 子目錄下的檔案。他們用來處理路由、資料載入以及所有你網站內的頁面版面。

支援的頁面檔案類型

Astro 支援下列在 src/pages/ 目錄裡的檔案類型：

Astro 使用了一個路由策略叫 基於檔案的路由（file-based routing） 。每個在你 src/pages/ 目錄下的檔案都會變成你網站的 endpoint，而其會根據檔案自己的路徑而定。

你可以寫一個標準 HTML <a> 元素到你的 component 範本來連結頁面彼此。

📚 閱讀更多關於 Astro 的路由 (EN)。

Astro 頁面使用了 .astro 的副檔名，且其和 Astro components (EN) 支援相同的功能。

<html lang="en">
  <head>
    <title>我的首頁</title>
  </head>
  <body>
    <h1>歡迎來到我的網站！</h1>
  </body>
</html>

為了在每個頁面避免重複使用到相同的 HTML 元素，你可以將一般的 <head> 和 <body> 移到你自己的版面 components。你可以隨自己喜歡或多或少使用這些版面 components。

---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>我的頁面內容包在一層版面裡！</p>
</MySiteLayout>

📚 閱讀更多關於 Astro 內的版面 components。

Astro 也會將任何 src/pages/ 內的 Markdown（.md）檔作為你最後網站的頁面。如果你有安裝 MDX 整合 (EN)的話，它也會將 MDX（.mdx）檔做同樣的事。這普遍用來做成大量文字的頁面，像是部落格文章和文件。

頁面版面在 Markdown 檔特別地有用。Markdown 檔可以使用特殊的 layout frontmatter 屬性去指定一個版面 component，其會將他們的 Markdown 內容包進一個完整的 <html>...</html> 的頁面檔案裡。

---
layout: '../layouts/MySiteLayout.astro'
title: '我的 Markdown 頁面'
---
# Title

這是我的網頁，用 **Markdown** 寫的喔！

📚 閱讀更多關於 Astro 內的 Markdown (EN)。

擁有 .html 副檔名的檔案可以放置在 src/pages/ 內，並直接作為你網站的頁面。但要注意的是，有些關鍵的 Astro 功能在 HTML Components (EN) 中是不被支援的。

你可以新增一個 404.astro 或 404.md 檔案到 /src/pages 裡來自定義一個 404 錯誤網站。

這將會建立出一個 404.html 頁面。大多數的部署服務會找到並使用它。