diff --git a/src/content/docs/ja/basics/astro-pages.mdx b/src/content/docs/ja/basics/astro-pages.mdx index 46885eaa76621..0a89e94e197bd 100644 --- a/src/content/docs/ja/basics/astro-pages.mdx +++ b/src/content/docs/ja/basics/astro-pages.mdx @@ -3,7 +3,6 @@ title: ページ description: Astroページの紹介 i18nReady: true --- - import ReadMore from '~/components/ReadMore.astro'; import Since from '~/components/Since.astro' @@ -12,6 +11,7 @@ import Since from '~/components/Since.astro' ## サポートしているページファイル Astroは`src/pages/`ディレクトリで次のファイルタイプをサポートしています。 + - [`.astro`](#astroページ) - [`.md`](#markdownmdxページ) - `.mdx` （[MDXインテグレーションがインストール](/ja/guides/integrations-guide/mdx/#installation)されている場合） @@ -57,9 +57,8 @@ Astroページは`.astro`拡張子を使い[Astroコンポーネント](/ja/basi すべてのページで同じHTML要素を繰り返すことを避けるために、共通の``と``要素を独自の[レイアウトコンポーネント](/ja/basics/layouts/)に移動できます。レイアウトコンポーネントはいくつでも使えます。 -```astro {3} // +```astro title="src/pages/index.astro" // {2} --- -// 例: src/pages/index.astro import MySiteLayout from '../layouts/MySiteLayout.astro'; --- @@ -73,15 +72,17 @@ import MySiteLayout from '../layouts/MySiteLayout.astro'; Astroは`/src/pages/`にあるMarkdown (`.md`) ファイルも、最終的なWebサイトのページとして扱います。もし[MDXインテグレーションがインストールされている](/ja/guides/integrations-guide/mdx/#installation)場合、MDX(`.mdx`)ファイルも同じように扱われます。これらは一般的に、ブログの投稿やドキュメントのような、テキストを多用するページに使用されます。 -`src/content/`にある[MarkdownやMDXページコンテンツのコレクション](/ja/guides/content-collections/)は、[動的にページを生成する](/ja/guides/routing/#動的ルーティング)ために使用できます。 +:::tip +ブログ記事や商品アイテムなど、同じ構造を持つMarkdownファイルのディレクトリには、ページではなく[コンテンツコレクション](/ja/guides/content-collections/)の作成を検討してください。 +::: ページレイアウトは[Markdownファイル](#markdownmdxページ)に対して特に有効です。Markdownファイルは特別な `layout`というフロントマターのプロパティを使用して、Markdownコンテンツを`...`ページドキュメントにラップする [レイアウトコンポーネント](/ja/basics/layouts/)を指定できます。 ```md {3} --- # 例: src/pages/page.md -layout: '../layouts/MySiteLayout.astro' -title: 'Markdownページ' +layout: ../layouts/MySiteLayout.astro +title: Markdownページ --- # タイトル @@ -114,23 +115,24 @@ title: 'Markdownページ'

-`src/pages/500.astro`は特別なページで、レンダリング中に発生したエラーが自動的に`error` propとして渡されます。`error` propにより、エラーの詳細(例: ページからのエラー、ミドルウェアからのエラー)を表示することができるようになります。 +`src/pages/500.astro`は特別なページで、レンダリング中に発生したエラーが自動的に`error`propとして渡されます。`error`propにより、エラーの詳細(例: ページからのエラー、ミドルウェアからのエラー)を表示することができるようになります。 -`error` propの型は何でも構いませんが、コード内での型指定や使用方法に影響を与える可能性があります: +`error`propの型は何でも構いませんが、コード内での型指定や使用方法に影響を与える可能性があります。 ```astro title="src/pages/500.astro" --- interface Props { - error: unknown + error: unknown; } -const { error } = Astro.props +const { error } = Astro.props; --- -
{error instanceof Error ? error.message : 'Unknown error'}
+
{error instanceof Error ? error.message : "Unknown error"}
``` -`error` propから機密情報を漏洩させないため、まずエラーを評価し、適切な内容を返すことを検討してください。例えば、エラーのスタックは表示すべきでありません。スタックにはサーバー上のコード構造に関する情報が含まれているためです。 +`error`propから機密情報を漏洩させないため、まずエラーを評価し、適切な内容を返すことを検討してください。例えば、エラーのスタックは表示すべきでありません。スタックにはサーバー上のコード構造に関する情報が含まれているためです。 + ## パーシャルページ

@@ -145,7 +147,7 @@ const { error } = Astro.props このフォルダーの外にあるコンポーネントと同様、これらのファイルには、``宣言や、スコープ指定されたスタイルやスクリプトなどの``コンテンツは自動的に含まれません。 -ただし、これらは特別な`src/pages/`ディレクトリに配置されているため、生成されたHTMLはそのファイルパスに対応するURLで利用できます。これにより、レンダリングライブラリ(例:htmx、Stimulus、jQueryなど)がクライアント上でアクセスし、ブラウザの更新やページナビゲーションを行わずにHTMLのセクションを動的に読み込むことができます。 +ただし、これらは特別な`src/pages/`ディレクトリに配置されているため、生成されたHTMLはそのファイルパスに対応するURLで利用できます。これにより、レンダリングライブラリ(例：[htmx](https://htmx.org/), [Stimulus](https://stimulus.hotwired.dev/), [jQuery](https://jquery.com/)など)がクライアント上でアクセスし、ブラウザの更新やページナビゲーションを行わずにHTMLのセクションを動的に読み込むことができます。 パーシャルをレンダリングライブラリと組み合わせると、Astroで動的コンテンツを構築するための[アイランド](/ja/concepts/islands/)や[` + +
+
ターゲット
+ + +
+ -
-
ターゲット
- - -
``` `.astro`のパーシャルは対応するファイルパスに存在する必要があり、パーシャルページとして定義するエクスポートが含まれている必要があります。