diff --git a/src/content/docs/ja/core-concepts/layouts.mdx b/src/content/docs/ja/core-concepts/layouts.mdx index d3a05464c5c1d..6d1f5fda73df9 100644 --- a/src/content/docs/ja/core-concepts/layouts.mdx +++ b/src/content/docs/ja/core-concepts/layouts.mdx @@ -12,7 +12,9 @@ i18nReady: true ただし、レイアウトコンポーネントに何か特別なところがあるわけではありません。他のAstroコンポーネントと同様に、[propsを受け取り](/ja/core-concepts/astro-components/#コンポーネントのprops)、[他のコンポーネントをインポートして使用](/ja/core-concepts/astro-components/#コンポーネント構造)できます。[UIフレームワークコンポーネント](/ja/core-concepts/framework-components/)や[クライアントサイドスクリプト](/ja/guides/client-side-scripts/)も含められます。ページ全体のシェルを提供する必要すらなく、代わりに部分的なUIテンプレートとしても使用可能です。 -レイアウトコンポーネントは一般的に、プロジェクト内の `src/layouts` ディレクトリに配置されますが、これは必須ではありません。 +レイアウトコンポーネントは一般的にプロジェクト内の`src/layouts`ディレクトリに配置されますが、これは必須ではなく、プロジェクト内のどこに置いても構いません。レイアウトコンポーネントをページと同じ場所に置くこともでき、その場合は[レイアウト名の先頭に`_`を付けます](/ja/core-concepts/routing/)。 + +{/* TODO: ルーティングページが更新されたらビルド対象からエントリーを除外のリンク先を /ja/core-concepts/routing/#excluding-pages にする */} ## レイアウトのサンプル @@ -215,7 +217,7 @@ function fancyJsHelper() { すると、レイアウトの`Astro.props`を介して値が利用でき、MDXコンテンツは``コンポーネントが書かれている場所に挿入されます。 -```astro "fancyJsHelper" "title" +```astro /{?title}?/ "fancyJsHelper" "{fancyJsHelper()}" --- // src/layouts/BaseLayout.astro const { title, fancyJsHelper } = Astro.props; @@ -233,7 +235,7 @@ const { title, fancyJsHelper } = Astro.props; 一つのAstroレイアウトで、`.md`と`.mdx`ファイルの`frontmatter`オブジェクトと、`.astro`ファイルから渡された名前付きのpropsを受け取るように書くことができます。 -以下の例では、レイアウトは、`title`属性を渡すAstroコンポーネントまたはフロントマターのYAMLの`title`プロパティからページタイトルを受け取ってそれを表示します。 +以下の例では、レイアウトは、フロントマターのYAMLの`title`プロパティまたは`title`属性を渡すAstroコンポーネントからページタイトルを受け取ってそれを表示します。 ```astro /{?title}?/ /Astro.props[.a-z]*/ --- @@ -251,9 +253,9 @@ const { title } = Astro.props.frontmatter || Astro.props; ## レイアウトの入れ子 -レイアウトコンポーネントは、ページ全体に相当するHTMLを含む必要はありません。レイアウトをより小さなコンポーネントに分割し、各コンポーネントを組み合わせてより柔軟なページレイアウトを作成できます。 +レイアウトコンポーネントは、ページ全体に相当するHTMLを含む必要はありません。レイアウトをより小さなコンポーネントに分割し、各コンポーネントを組み合わせてより柔軟なページレイアウトを作成できます。このパターンは、複数のレイアウト間でコードを共有したい場合に便利です。 -たとえば、`BlogPostLayout.astro`レイアウトはブログ記事のタイトル、日付、作者にスタイルを付けるとします。そして、サイト全体で共通の`BaseLayout.astro`は、ナビゲーションやフッターなどのページテンプレートの残りを処理します。また、他の入れ子になったコンポーネントと同様に、ブログ記事から受け取ったpropsを他のレイアウトに渡すこともできます。 +たとえば、`BlogPostLayout.astro`レイアウトはブログ記事のタイトル、日付、作者にスタイルを付けるとします。そして、サイト全体で共通の`BaseLayout.astro`は、ナビゲーションやフッター、SEOメタタグ、グローバルスタイル、フォントなどのページテンプレートの残りを処理します。また、他の入れ子になったコンポーネントと同様に、ブログ記事から受け取ったpropsを他のレイアウトに渡すこともできます。 ```astro {3} // // ---