ページ
ページは、Astroプロジェクトのsrc/pages/
サブディレクトリにあるファイルです。Webサイトの各ページのルーティングやデータ読み込み、全体的なページレイアウトを処理する役割を担っています。
サポートしているページファイル
セクションタイトル: サポートしているページファイルAstroはsrc/pages/
ディレクトリで次のファイルタイプをサポートしています。
.astro
.md
.mdx
(MDXインテグレーションがインストールされている場合).html
- [
.js
/.ts
] (エンドポイントとして)
ファイルベースルーティング
セクションタイトル: ファイルベースルーティングAstroは、ファイルベースルーティングと呼ばれるルーティング手法を採用しています。 src/pages/
ディレクトリの各ファイルはそのファイルパスに基づいたエンドポイントになります。
また、動的ルーティングを使用して、1つのファイルから複数のページを生成できます。これにより、コンテンツコレクションやCMSなど、特別な/pages/
ディレクトリの外にコンテンツがあっても、ページを作成できます。
ページ間のリンク
セクションタイトル: ページ間のリンクサイト内の別のページへリンクを張るには、HTML標準の<a>
要素をコンポーネントテンプレートに記述してください。相対パスではなく、ルートドメインへの URL 相対パスをリンクとして使用してください。
例: example.com
のいずれかのページからhttps://example.com/authors/sonali/
にリンクする。
Astroページ
セクションタイトル: AstroページAstroページは.astro
拡張子を使いAstroコンポーネントと同じ機能を持ちます。
ページは完全なHTMLを出力する必要があります。明示的に含まれていない場合、Astroはデフォルトで必要な<!DOCTYPE html>
宣言と<head>
コンテンツをsrc/pages/
内にある.astro
コンポーネントに追加します。コンポーネントをパーシャルページとしてマークすることで、コンポーネントごとにこの動作をオプトアウトできます。
すべてのページで同じHTML要素を繰り返すことを避けるために、共通の<head>
と<body>
要素を独自のレイアウトコンポーネントに移動できます。レイアウトコンポーネントはいくつでも使えます。
Markdown/MDXページ
セクションタイトル: Markdown/MDXページAstroは/src/pages/
にあるMarkdown (.md
) ファイルも、最終的なWebサイトのページとして扱います。もしMDXインテグレーションがインストールされている場合、MDX(.mdx
)ファイルも同じように扱われます。これらは一般的に、ブログの投稿やドキュメントのような、テキストを多用するページに使用されます。
src/content/
にあるMarkdownやMDXページコンテンツのコレクションは、動的にページを生成するために使用できます。
ページレイアウトはMarkdownファイルに対して特に有効です。Markdownファイルは特別な layout
というフロントマターのプロパティを使用して、Markdownコンテンツを<html>...</html>
ページドキュメントにラップする レイアウトコンポーネントを指定できます。
HTMLページ
セクションタイトル: HTMLページ.html
拡張子のついたファイルをsrc/pages
内に置くことができ、直接サイトのページとして使用されます。HTMLコンポーネントではAstroの主要機能の一部がサポートされていないことに注意してください。
カスタム404エラーページ
セクションタイトル: カスタム404エラーページカスタムの404エラーページを作成するには、src/pages
に404.astro
または404.md
ファイルを作成します。
これは404.html
ページにビルドされます。ほとんどのデプロイサービスはこのファイルを見つけて使用します。
パーシャルページ
セクションタイトル: パーシャルページ
追加:
astro@3.4.0
パーシャルページは、htmxやUnpolyなどのフロントエンドライブラリと組み合わせて使用することを目的としています。低レベルのフロントエンドJavaScriptの記述に慣れている場合は、これらを使用することもできます。このため、これらは高度な機能です。
さらに、コンポーネントにスコープされたスタイルまたはスクリプトが含まれている場合は、これらの要素がHTML出力から削除されるため、パーシャルを使用すべきではありません。スコープ付きスタイルが必要な場合は、パーシャルではない通常のページと一緒にコンテンツをheadにマージできるフロントエンドライブラリを使用することをお勧めします。
パーシャルはsrc/pages/
内にあるページコンポーネントであり、完全なページとしてレンダリングすることを目的としていません。
このフォルダーの外にあるコンポーネントと同様、これらのファイルには、<!DOCTYPE html>
宣言や、スコープ指定されたスタイルやスクリプトなどの<head>
コンテンツは自動的に含まれません。
ただし、これらは特別なsrc/pages/
ディレクトリに配置されているため、生成されたHTMLはそのファイルパスに対応するURLで利用できます。これにより、レンダリングライブラリ(例:htmx
、Stimulus、jQueryなど)がクライアント上でアクセスし、ブラウザの更新やページナビゲーションを行わずにHTMLのセクションを動的に読み込むことができます。
パーシャルをレンダリングライブラリと組み合わせると、Astroで動的コンテンツを構築するためのアイランドや<script>
タグの代替手段が提供されます。
値をエクスポートできるページファイル(例.astro
、.mdx
)は、パーシャルファイルとしてマークできます。
次のエクスポートを追加して、src/pages/
内のファイルをパーシャルファイルとして構成します。
export const partial
は静的に識別可能である必要があります。次の値を取ることができます。
- 真偽値
true
import.meta.env.USE_PARTIALS
などのimport.meta.envを使用した環境変数
ライブラリと併用する
セクションタイトル: ライブラリと併用するパーシャルは、htmxなどのライブラリを使用したページのセクションを動的に更新するために使用されます。
次の例は、hx-post
属性にパーシャルのURLが設定された例を示しています。パーシャルページのコンテンツは、このページ上のターゲットのHTML要素を更新するために使用されます。
.astro
のパーシャルは対応するファイルパスに存在する必要があり、パーシャルページとして定義するエクスポートが含まれている必要があります。
htmxの使用方法の詳細については、htmxのドキュメントを参照してください。
Learn