| type | title | description | i18nReady |
|---|---|---|---|
tutorial |
レイアウトを組み合わせ、両方の長所を活かす |
「初めてのAstroブログ」チュートリアル -
ブログ記事をフォーマットするレイアウトに、基本のページレイアウトを追加する |
true |
import Blanks from '/components/tutorial/Blanks.astro';
import Box from '/components/tutorial/Box.astro';
import Checklist from '/components/Checklist.astro';
import MultipleChoice from '/components/tutorial/MultipleChoice.astro';
import Option from '/components/tutorial/Option.astro';
import PreCheck from '/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
各ブログ記事にレイアウトを追加したところで、記事の見た目をサイトの他のページに近づけてみましょう！
- メインのページレイアウトの中にブログ記事レイアウトを入れ子にするページ全体のレイアウトを定義するためのBaseLayout.astroはすでにあります。
一方MarkdownPostLayout.astroは、titleやdateなど、ブログ記事共通のプロパティに対応するテンプレートを提供しますが、ブログ記事ページはサイトの他のページとは異なる見た目になってしまっています。レイアウトを入れ子にすることで、ブログ記事の見た目をサイトの他のページに合わせてみましょう。
```astro title="src/layouts/MarkdownPostLayout.astro" ins={2,5,12}
---
import BaseLayout from './BaseLayout.astro';
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
<h1>{frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>著者: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />
</BaseLayout>
```
-
http://localhost:4321/posts/post-1をブラウザのプレビューで確認します。コンテンツは現在、以下によってレンダリングされています。- スタイル、ナビゲーションリンク、ソーシャルフッターを含むメインのページレイアウト
- 記事の説明文、日付、タイトル、画像などのフロントマタープロパティを含むブログ記事レイアウト
- この記事に表示されるテキストのみを含む個別のブログ記事のMarkdownコンテンツ
-
ページタイトルが各レイアウトで1回ずつ、合計2回表示されていることに注意してください。
MarkdownPostLayout.astroからページタイトルを表示する行を削除します。<BaseLayout pageTitle={frontmatter.title}> <h1>{frontmatter.title}</h1> <p>{frontmatter.pubDate.toString().slice(0,10)}</p> <p><em>{frontmatter.description}</em></p> <p>著者: {frontmatter.author}</p> <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} /> <slot /> </BaseLayout>
-
http://localhost:4321/posts/post-1をブラウザのプレビューで再度確認し、上で削除した行が表示されなくなり、タイトルが1回だけ表示されていることを確認します。コンテンツが重複しないよう、必要に応じて他の調整をおこなってください。
以下のことを確認してください。
- 各ブログ記事は同じページテンプレートを表示しており、欠けているコンテンツはない。(ブログ記事のコンテンツが欠落している場合は、記事のフロントマタープロパティを確認してください。)
- ページにコンテンツが重複していない。(2回レンダリングされているコンテンツがある場合は、`MarkdownPostLayout.astro`から削除してください。)
なお、好みに合わせてページテンプレートをカスタマイズしても構いません。
-
あるレイアウトを別のレイアウトの中に入れ子にし、個々のパーツを組み合わせることを可能にするのは以下のどれですか？
継続的デプロイ レスポンシブデザイン コンポーネントベースの設計 -
Markdownページを含むプロジェクトでは複数のレイアウトが特に有用です。これに当てはまるのは以下のどれですか？
ブログ ダッシュボード チャットアプリ -
各ページ共通のテンプレートは以下のどれですか？
`index.astro` `BaseLayout.astro` `post-1.md`