ページ
ページは、Astroプロジェクトのsrc/pages/
サブディレクトリにあるファイルです。Webサイトの各ページのルーティングやデータ読み込み、全体的なページレイアウトを処理する役割を担っています。
サポートしているページファイル
Section titled サポートしているページファイルAstroはsrc/pages/
ディレクトリで次のファイルタイプをサポートしています。
.astro
.md
.mdx
(MDXインテグレーションがインストール (EN)されている場合).html
- [
.js
/.ts
] (エンドポイントとして)
ファイルベースルーティング
Section titled ファイルベースルーティングAstroは、ファイルベースルーティングと呼ばれるルーティング手法を採用しています。 src/pages/
ディレクトリの各ファイルはそのファイルパスに基づいたエンドポイントになります。
また、動的ルーティングを使用して、1つのファイルから複数のページを生成できます。これにより、コンテンツコレクション (EN)やCMSなど、特別な/pages/
ディレクトリの外にコンテンツがあっても、ページを作成できます。
📚 Astroのルーティングについて詳しくみる。
ページ間のリンク
Section titled ページ間のリンクサイト内の別のページへリンクを張るには、HTML標準の<a>
要素をコンポーネントテンプレートに記述してください。
Astroページ
Section titled 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ページ
Section titled Markdown/MDXページAstroは/src/pages/
にあるMarkdown (.md
) ファイルも、最終的なWebサイトのページとして扱います。もしMDXインテグレーションがインストールされている (EN)場合、MDX(.mdx
)ファイルも同じように扱われます。これらは一般的に、ブログの投稿やドキュメントのような、テキストを多用するページに使用されます。
src/content/
にあるMarkdownやMDXページコンテンツのコレクション (EN)は、動的にページを生成するために使用できます。
ページレイアウトはMarkdownファイルに対して特に有効です。Markdownファイルは特別な layout
というフロントマターのプロパティを使用して、Markdownコンテンツを<html>...</html>
ページドキュメントにラップする レイアウトコンポーネントを指定できます。
---
layout: '../layouts/MySiteLayout.astro'
title: 'Markdownページ'
---
# タイトル
これは**Markdown**で書かれたページです。
📚 AstroのMarkdownについて詳しくみる。
HTMLページ
Section titled HTMLページ.html
拡張子のついたファイルをsrc/pages
内に置くことができ、直接サイトのページとして使用されます。HTMLコンポーネントではAstroの主要機能の一部がサポートされていないことに注意してください。
カスタム404エラーページ
Section titled カスタム404エラーページカスタムの404エラーページを作成するには、src/pages
に404.astro
または404.md
ファイルを作成します。
これは404.html
ページにビルドされます。ほとんどのデプロイサービスはこのファイルを見つけて使用します。