頁面
頁面 是 Astro 專案 src/pages/ 子目錄下的檔案，用來處理路由、資料載入以及網站內所有頁面的版面。
支援的頁面檔案類型
標題為 支援的頁面檔案類型Astro 支援下列在 src/pages/ 目錄裡的檔案類型：
基於檔案的路由
標題為 基於檔案的路由Astro 使用基於檔案的路由策略（file-based routing）。每個 src/pages/ 目錄下的檔案，都會根據檔案的路徑，變成網站的端點。
如果你的內容位於內容合集或 CMS，也能透過動態路由功能，讓單一路由檔案產生多個頁面。
連結至頁面
標題為 連結至頁面你可以用一般的 HTML <a> 元素連結到你網站的其他頁面。記得使用相對於根網域的網址，而非檔案相對路徑。
舉例來說，如果要從 example.com 的其他頁面連到 https://example.com/authors/sonali/：
Read more <a href="/authors/sonali/">about Sonali</a>.Astro 頁面
標題為 Astro 頁面Astro 頁面使用 .astro 副檔名，支援的功能同 Astro 元件。
------<html lang="en"> <head> <title>我的首頁</title> </head> <body> <h1>歡迎來到我的網站！</h1> </body></html>Astro 頁面必須產生完整的 HTML 文件，因此 Astro 預設會替 src/pages/ 的 Astro 元件加上必要的 <!DOCTYPE html> 和 <head> 標籤（除非檔案已包含這些標籤）。如果不想要這個行為，可以將 Astro 元件標記為局部頁面。
為了避免在每個頁面避免寫相同的 HTML 元素，你可以將常用到的 <head> 和 <body> 移到你自己的版面元件，數量不限。
---import MySiteLayout from '../layouts/MySiteLayout.astro';---<MySiteLayout> <p>我的頁面內容包在一層版面裡！</p></MySiteLayout>Markdown/MDX 頁面
標題為 Markdown/MDX 頁面Astro 也會將任何 src/pages/ 內的 Markdown（.md）檔作為你最後網站的頁面。如果你有安裝 MDX 整合的話，它也會對 MDX（.mdx）檔做同樣的事。這普遍用於以文字為主的頁面，像是部落格文章和文件。
此外，src/content/ 的 Markdown 或 MDX 頁面內容合集可以動態產生頁面。
頁面版面在 Markdown 檔特別地有用。Markdown 檔可以使用特殊的 layout frontmatter 屬性指定 版面元件，進而將 Markdown 內容包進完整的 <html>...</html> 頁面檔案裡。
---layout: '../layouts/MySiteLayout.astro'title: '我的 Markdown 頁面'---# Title
這是我的網頁，用 **Markdown** 寫的喔！HTML 頁面
標題為 HTML 頁面擁有 .html 副檔名的檔案可以放置在 src/pages/ 內，直接作為網站的頁面，但要注意 HTML 元件不支援部分 Astro 功能。
自訂 404 錯誤頁面
標題為 自訂 404 錯誤頁面如要自訂 404 錯誤頁面，可以在 /src/pages 新增 404.astro 或 404.md。
建構時會產生 404.html 頁面，大多數的部署服務會找到並使用該檔案。
局部頁面
標題為 局部頁面
新增於：
astro@3.4.0
局部頁面是位於 src/pages/ 的頁面元件，但不是用來算繪完整的頁面。
和位於該目錄之外的其他元件一樣，這些檔案不會自動包含 <!DOCTYPE html>、<head>、scoped styles 和 scripts。
由於它們位於 src/pages/ 目錄，產生的 HTML 仍然可透過對應到檔案路徑的網址存取。因此算繪套件（例：htmx、Stimulus、jQuery）能夠在不重新整理或前往新頁面的前提下，於客戶端存取並動態載入 HTML 片段。
局部頁面搭配算繪套件同樣能夠開發動態內容，是不使用 Astro 群島 和 <script> 標籤 時的替代方案。
能夠匯出值（例：.astro、.mdx）的頁面檔案即可標記為局部頁面。
在 src/pages/ 目錄下的檔案內匯出以下指定值，便可將檔案設定為局部頁面：
---export const partial = true;---
<li>I'm a partial!</li>export const partial 要能夠靜態識別。合法的值為：
- 布林值
true。 - 透過 import.meta.env 存取的環境變數，例如
import.meta.env.USE_PARTIALS。
與套件搭配使用
標題為 與套件搭配使用搭配 htmx 這種套件，局部頁面可用來動態更新頁面部分區域。
以下範例中，hx-post 屬性對應到局部頁面的網址，該頁面的內容將會用來更新這個頁面特定的 HTML 元素。
<html> <head> <title>My page</title> <script src="https://unpkg.com/htmx.org@1.9.6" integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni" crossorigin="anonymous"></script> </head></html><section> <div id="parent-div">Target here</div>
<button hx-post="/partials/clicked/" hx-trigger="click" hx-target="#parent-div" hx-swap="innerHTML" > Click Me! </button></section>對應到檔案路徑的 .astro 局部頁面必須存在，且要明確匯出值，將頁面標記為局部頁面。
---export const partial = true;---<div>I was clicked!</div>細節請見 htmx 文件。
Learn