ページ

ページは、Astroプロジェクトのsrc/pages/サブディレクトリにあるファイルです。Webサイトの各ページのルーティングやデータ読み込み、全体的なページレイアウトを処理する役割を担っています。

サポートしているページファイル

Astroはsrc/pages/ディレクトリで次のファイルタイプをサポートしています。

.astro
.md
.mdx （MDXインテグレーションがインストールされている場合）
.html
[.js/.ts] （エンドポイントとして）

ファイルベースルーティング

Astroは、ファイルベースルーティングと呼ばれるルーティング手法を採用しています。 src/pages/ディレクトリの各ファイルはそのファイルパスに基づいたエンドポイントになります。

また、動的ルーティングを使用して、1つのファイルから複数のページを生成できます。これにより、コンテンツコレクションやCMSなど、特別な/pages/ディレクトリの外にコンテンツがあっても、ページを作成できます。

📚 Astroのルーティングについて詳しくみる。

ページ間のリンク

サイト内の別のページへリンクを張るには、HTML標準の<a>要素をコンポーネントテンプレートに記述してください。

Astroページ

Astroページは.astro拡張子を使いAstroコンポーネントと同じ機能を持ちます。

<html lang="ja">
  <head>
    <title>ホームページ</title>
  </head>
  <body>
    <h1>私のホームページへようこそ！</h1>
  </body>
</html>

すべてのページで同じHTML要素を繰り返すことを避けるために、共通の<head>と<body>要素を独自のレイアウトコンポーネントに移動できます。レイアウトコンポーネントはいくつでも使えます。

---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>レイアウトに包まれたコンテンツ！</p>
</MySiteLayout>

📚 Astroのレイアウトコンポーネントについて詳しくみる。

Markdown/MDXページ

Astroは/src/pages/にあるMarkdown (.md) ファイルも、最終的なWebサイトのページとして扱います。もしMDXインテグレーションがインストールされている場合、MDX(.mdx)ファイルも同じように扱われます。これらは一般的に、ブログの投稿やドキュメントのような、テキストを多用するページに使用されます。

src/content/にあるMarkdownやMDXページコンテンツのコレクションは、動的にページを生成するために使用できます。

ページレイアウトはMarkdownファイルに対して特に有効です。Markdownファイルは特別な layoutというフロントマターのプロパティを使用して、Markdownコンテンツを<html>...</html>ページドキュメントにラップするレイアウトコンポーネントを指定できます。

---
layout: '../layouts/MySiteLayout.astro'
title: 'Markdownページ'
---
# タイトル

これは**Markdown**で書かれたページです。

📚 AstroのMarkdownについて詳しくみる。

HTMLページ

.html拡張子のついたファイルをsrc/pages内に置くことができ、直接サイトのページとして使用されます。HTMLコンポーネントではAstroの主要機能の一部がサポートされていないことに注意してください。

カスタム404エラーページ

カスタムの404エラーページを作成するには、src/pagesに404.astroまたは404.mdファイルを作成します。

これは404.htmlページにビルドされます。ほとんどのデプロイサービスはこのファイルを見つけて使用します。

GitHub Issueを作成

フィードバックを送信

ページ