コンテンツにスキップ

ページ

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

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

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

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

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

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

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

src/pages/index.astro
<html lang="ja">
<head>
<title>ホームページ</title>
</head>
<body>
<h1>私のホームページへようこそ!</h1>
</body>
</html>

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

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

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

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

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

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

src/pages/page.md
---
layout: '../layouts/MySiteLayout.astro'
title: 'Markdownページ'
---
# タイトル
これは**Markdown**で書かれたページです。

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

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

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

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