跳转到内容

頁面

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

支援的頁面檔案類型

標題為 支援的頁面檔案類型

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

基於檔案的路由

標題為 基於檔案的路由

Astro 使用基於檔案的路由策略(file-based routing)。每個 src/pages/ 目錄下的檔案,都會根據檔案的路徑,變成網站的端點。

如果你的內容位於內容合集CMS,也能透過動態路由功能,讓單一路由檔案產生多個頁面。

進一步了解 Astro 的路由

你可以用一般的 HTML <a> 元素連結到你網站的其他頁面。記得使用相對於根網域的網址,而非檔案相對路徑。

舉例來說,如果要從 example.com 的其他頁面連到 https://example.com/authors/sonali/

src/pages/index.astro
Read more <a href="/authors/sonali/">about Sonali</a>.

Astro 頁面使用 .astro 副檔名,支援的功能同 Astro 元件

src/pages/index.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> 移到你自己的版面元件,數量不限。

src/pages/index.astro
---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
<p>我的頁面內容包在一層版面裡!</p>
</MySiteLayout>
進一步了解版面元件

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

此外,src/content/Markdown 或 MDX 頁面內容合集可以動態產生頁面

頁面版面在 Markdown 檔特別地有用。Markdown 檔可以使用特殊的 layout frontmatter 屬性指定 版面元件,進而將 Markdown 內容包進完整的 <html>...</html> 頁面檔案裡。

src/pages/page.md
---
layout: '../layouts/MySiteLayout.astro'
title: '我的 Markdown 頁面'
---
# Title
這是我的網頁,用 **Markdown** 寫的喔!
進一步了解如何在 Astro 使用 Markdown

擁有 .html 副檔名的檔案可以放置在 src/pages/ 內,直接作為網站的頁面,但要注意 HTML 元件不支援部分 Astro 功能。

自訂 404 錯誤頁面

標題為 自訂 404 錯誤頁面

如要自訂 404 錯誤頁面,可以在 /src/pages 新增 404.astro404.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/ 目錄下的檔案內匯出以下指定值,便可將檔案設定為局部頁面:

src/pages/partial.astro
---
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 元素。

src/pages/index.astro
<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 局部頁面必須存在,且要明確匯出值,將頁面標記為局部頁面。

src/pages/partials/clicked.astro
---
export const partial = true;
---
<div>I was clicked!</div>

細節請見 htmx 文件