跳转到内容

頁面

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

支援的頁面檔案類型

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

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

基於檔案的路由

標題為 基於檔案的路由

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

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

📚 閱讀更多關於 Astro 的路由

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

src/pages/index.astro
<html lang="en">
<head>
<title>我的首頁</title>
</head>
<body>
<h1>歡迎來到我的網站!</h1>
</body>
</html>

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

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

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

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

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

src/pages/page.md
---
layout: '../layouts/MySiteLayout.astro'
title: '我的 Markdown 頁面'
---
# Title
這是我的網頁,用 **Markdown** 寫的喔!

📚 閱讀更多關於 Astro 內的 Markdown

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

自訂 404 錯誤頁面

標題為 自訂 404 錯誤頁面

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

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