页面

页面是位于 Astro 项目的 src/pages/ 子目录中的文件。它们负责处理路由、数据加载以及网站中每个页面的整体页面布局。

支持的页面文件

Astro 支持 src/pages/ 目录中的以下文件类型：

Astro 使用一种名为 基于文件的路由 的路由策略。src/pages/ 目录中的每个文件都会根据其文件路径成为网站上的一个端点。

一个文件也可以使用动态路由来生成多个页面。这允许你即使内容不在特殊的 /pages/ 目录中，也可以创建页面，例如在内容集合或内容管理系统中。

📚 了解更多关于 Astro 路由的内容。

在你的 Astro 页面中，使用标准的 HTML <a> 元素来链接到网站上的其他页面。

Astro 页面使用 .astro 文件扩展名，并支持与 Astro 组件相同的功能。

---
---
<html lang="en">
  <head>
    <title>我的主页</title>
  </head>
  <body>
    <h1>欢迎来到我的网站</h1>
  </body>
</html>

为了避免在每个页面上重复相同的 HTML 元素，你可以将常见的 <head> 和 <body> 元素移动到自己的布局组件中。你可以使用任意多的布局组件。

---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>包裹在 layout 里的页面内容！</p>
</MySiteLayout>

📚 了解更多关于布局组件的内容。

Astro 还将 src/pages/ 目录中的任何 Markdown (.md) 文件视为网站中的页面。如果你安装了 MDX 集成，它也会将 MDX (.mdx) 文件视为相同的页面。这些通常用于像博客文章和文档这样的内容丰富的页面。

页面布局对于 Markdown 文件特别有用。Markdown 文件可以使用特殊的 layout 前置属性来指定一个布局组件，它将包装其 Markdown 内容在一个完整的 <html>...</html> 页面文档中。

---
layout: '../layouts/MySiteLayout.astro'
title: '我的 Markdown 页面'
---
# 标题

这是我的页面，使用 **Markdown** 编写。

📚 了解更多关于 Astro 中的 Markdown 的内容。

.html 文件扩展名的文件可以放在 src/pages/ 中，并直接用作网站上的页面。请注意，某些关键的 Astro 功能在 HTML 组件中不受支持。

想要自定义 404 错误页面，你可以在 /src/pages 中创建 404.astro 或 404.md 文件。

它将生成 404.html 页面。大多数部署服务都自动找到并使用它。