コンテンツにスキップ

ページ

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

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

セクションタイトル： サポートしているページファイル

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

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

セクションタイトル： ファイルベースルーティング

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

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

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

ページ間のリンク

セクションタイトル： ページ間のリンク

サイト内の別のページへリンクを張るには、HTML標準の<a>要素をコンポーネントテンプレートに記述してください。相対パスではなく、ルートドメインへの URL 相対パスをリンクとして使用してください。

例: example.comのいずれかのページからhttps://example.com/authors/sonali/にリンクする。

src/pages/index.astro
Read more <a href="/authors/sonali/">about Sonali</a>.

Astroページ

セクションタイトル： Astroページ

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

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

ページは完全なHTMLを出力する必要があります。明示的に含まれていない場合、Astroはデフォルトで必要な<!DOCTYPE html>宣言と<head>コンテンツをsrc/pages/内にある.astroコンポーネントに追加します。コンポーネントをパーシャルページとしてマークすることで、コンポーネントごとにこの動作をオプトアウトできます。

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

src/pages/index.astro
---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>レイアウトに包まれたコンテンツ！</p>
</MySiteLayout>
Astroのレイアウトコンポーネントについて詳しくみる。

Markdown/MDXページ

セクションタイトル： Markdown/MDXページ

Astroは/src/pages/にあるMarkdown (.md) ファイルも、最終的なWebサイトのページとして扱います。もしMDXインテグレーションがインストールされている場合、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ページ

セクションタイトル： HTMLページ

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

カスタム404エラーページ

セクションタイトル： カスタム404エラーページ

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

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

カスタム500エラーページ

セクションタイトル： カスタム500エラーページ

オンデマンドレンダリングされたページのカスタムの500エラーページを作成するには、src/pages/500.astroを作成します。このカスタムページは事前レンダリングされたページでは使用されず、事前レンダリングされません。

このページをレンダリングする際にエラーが発生した場合は、デプロイサービスのデフォルトの500エラーページが表示されます。

追加： astro@4.10.3

開発サーバーの起動中にエラーが発生した場合は、エラーオーバレイではなくターミナル上にエラーが表示されます。

error

セクションタイトル： error

追加： astro@4.11.0

src/pages/500.astroは特別なページで、レンダリング中に発生したエラーが自動的にerror propとして渡されます。error propにより、エラーの詳細(例: ページからのエラー、ミドルウェアからのエラー)を表示することができるようになります。

error propの型は何でも構いませんが、コード内での型指定や使用方法に影響を与える可能性があります:

src/pages/500.astro
---
interface Props {
    error: unknown
}


const { error } = Astro.props
---


<div>{error instanceof Error ? error.message : 'Unknown error'}</div>

error propから機密情報を漏洩させないため、まずエラーを評価し、適切な内容を返すことを検討してください。例えば、エラーのスタックは表示すべきでありません。スタックにはサーバー上のコード構造に関する情報が含まれているためです。

パーシャルページ

セクションタイトル： パーシャルページ

追加： astro@3.4.0

パーシャルはsrc/pages/内にあるページコンポーネントであり、完全なページとしてレンダリングすることを目的としていません。

このフォルダーの外にあるコンポーネントと同様、これらのファイルには、<!DOCTYPE html>宣言や、スコープ指定されたスタイルやスクリプトなどの<head>コンテンツは自動的に含まれません。

ただし、これらは特別なsrc/pages/ディレクトリに配置されているため、生成されたHTMLはそのファイルパスに対応するURLで利用できます。これにより、レンダリングライブラリ(例:htmx、Stimulus、jQueryなど)がクライアント上でアクセスし、ブラウザの更新やページナビゲーションを行わずにHTMLのセクションを動的に読み込むことができます。

パーシャルをレンダリングライブラリと組み合わせると、Astroで動的コンテンツを構築するためのアイランドや<script> タグの代替手段が提供されます。

値をエクスポートできるページファイル(例.astro、.mdx)は、パーシャルファイルとしてマークできます。

次のエクスポートを追加して、src/pages/内のファイルをパーシャルファイルとして構成します。

src/pages/partial.astro
---
export const partial = true;
---


<li>パーシャルファイルです!</li>

export const partialは静的に識別可能である必要があります。次の値を取ることができます。

  • 真偽値 true
  • import.meta.env.USE_PARTIALSなどのimport.meta.envを使用した環境変数

ライブラリと併用する

セクションタイトル： ライブラリと併用する

パーシャルは、htmxなどのライブラリを使用したページのセクションを動的に更新するために使用されます。

次の例は、hx-post属性にパーシャルのURLが設定された例を示しています。パーシャルページのコンテンツは、このページ上のターゲットのHTML要素を更新するために使用されます。

src/pages/index.astro
<html>
  <head>
    <title>マイページ</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
</html>
<section>
  <div id="parent-div">ターゲット</div>


  <button hx-post="/partials/clicked/"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="innerHTML"
  >
      ここをクリック！
  </button>
</section>

.astroのパーシャルは対応するファイルパスに存在する必要があり、パーシャルページとして定義するエクスポートが含まれている必要があります。

src/pages/partials/clicked.astro
---
export const partial = true;
---
<div>クリックされました!</div>

htmxの使用方法の詳細については、htmxのドキュメントを参照してください。

貢献する

どんなことを？

GitHub Issueを作成

チームに素早く問題を報告できます。

コミュニティ