Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

i18n(ja): Update layouts.mdx #4552

Merged
merged 4 commits into from
Sep 5, 2023
Merged

i18n(ja): Update layouts.mdx #4552

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c0020ce
577ca11ac53006ab4e029f72c578b92c07fb3b93
morinokami Sep 5, 2023
46e6605
bd877303a6ce3ef1ace9c85688df15cd1ec0a1f6
morinokami Sep 5, 2023
3268c19
e832eedb3c34c29630e753b6e46135d366fcf7f0
morinokami Sep 5, 2023
19f3ad1
Merge branch 'main' into i18n-ja-layouts-2
yanthomasdev Sep 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions src/content/docs/ja/core-concepts/layouts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 にする */}


## レイアウトのサンプル
Expand Down Expand Up @@ -215,7 +217,7 @@ function fancyJsHelper() {

すると、レイアウトの`Astro.props`を介して値が利用でき、MDXコンテンツは`<slot />`コンポーネントが書かれている場所に挿入されます。

```astro "fancyJsHelper" "title"
```astro /{?title}?/ "fancyJsHelper" "{fancyJsHelper()}"
---
// src/layouts/BaseLayout.astro
const { title, fancyJsHelper } = Astro.props;
Expand All @@ -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]*/
---
Expand All @@ -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} /</?BaseLayout>/ /</?BaseLayout url={frontmatter.url}>/
---
Expand Down