コンテンツにスキップ

カスタムブログレイアウトにデータを作成して渡す

ページ用のレイアウトができたので、ブログ記事用のレイアウトも追加しましょう！

ここで学ぶことは...

  • Markdownファイル用の新しいブログ記事レイアウトを作成する
  • レイアウトコンポーネントにYAMLフロントマターの値をpropsとして渡す

ブログ記事にレイアウトを追加する

.mdファイルでフロントマターにlayoutプロパティを含めると、フロントマターのYAMLの値がレイアウトファイルで利用できるようになります。

  1. src/layouts/MarkdownPostLayout.astroに新しいファイルを作成します。

  2. MarkdownPostLayout.astroに以下のコードをコピーします。

    ---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>著者: {frontmatter.author}</p>
<slot />

  3. post-1.mdに以下のフロントマタープロパティを追加します。

    ---
layout: ../../layouts/MarkdownPostLayout.astro
title: '私の最初のブログ記事'
pubDate: 2022-07-01
description: 'これは私の新しいAstroブログの最初の記事です。'
author: 'Astro学習者'
image:
    url: 'https://docs.astro.build/assets/rose.webp' 
    alt: 'ピンク色に輝く暗い背景に浮かぶAstroのロゴ。'
tags: ["astro", "ブログ", "公開学習"]
---

  4. ブラウザのプレビューでhttp://localhost:4321/posts/post-1を再度確認し、レイアウトによりページに追加された内容を確認します。

  5. 同じレイアウトプロパティを他のブログ記事post-2.mdとpost-3.mdにも追加します。ブラウザで、これらの記事にもレイアウトが適用されていることを確認します。

:::tipレイアウトを使用すると、ページタイトルなどの要素をMarkdownコンテンツに含めるか、それともレイアウトに含めるかを選択できます。要素が重複しないよう、ページプレビューを目視で確認し、必要に応じて調整してください。:::

やってみよう - ブログ記事レイアウトをカスタマイズする

チャレンジ: 各ブログ記事に共通する要素を特定し、MarkdownPostLayout.astroを使用してそれらをレンダリングすることで、post-1.mdや将来のブログ記事で同じ記述を繰り返さないようにしてみましょう。

pubDateをMarkdownの本文に書くのではなく、レイアウトコンポーネントに含めるようにコードをリファクタリングする例を以下に示します。

投稿日: 2022-07-01

Astroの学習についての私の _新しいブログ_ へようこそ！ここでは、新しいウェブサイトを作りながら、私の学習過程を共有します。
---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<h1>{frontmatter.title}</h1>
<p>投稿日: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>著者: {frontmatter.author}</p>
<slot />

自分にとって有用だと思う箇所はすべてリファクタリングし、レイアウトへの追加も必要なだけおこなってください。レイアウトに要素を1つ追加すると、各ブログ記事でそれを書く手間が省けることを忘れないでください。

以下は、個々のブログ記事のコンテンツのみスロットでレンダリングするようにリファクタリングしたレイアウトの例です。これを使っても良いですし、自分で作成しても構いません！

---
const { frontmatter } = Astro.props;
---
<meta charset="utf-8" />
<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 />

:::note[重複を避ける]レイアウトによってレンダリングされるものは、ブログ記事に入力する必要はありません。ブラウザのプレビューで重複を見つけた場合は、Markdownファイルからコンテンツを削除してください。:::

確認テスト

以下の2つのコンポーネントが有効なAstroコードとして機能するためには、空欄に何を入れる必要がありますか？

  1. ---
layout: ../../__________/MyMarkdownLayout.astro
title: "AstroにおけるMarkdownについて学ぶ"
author: Astro学習者
____: 2022-08-08
---
今日は多くのことを学びました！AstroではMarkdownで書くことができますが、フロントマターから変数を渡すこともできるのです。Astroのレイアウトコンポーネントでもこれらの値にアクセスできます。
  2. ---
import ____________ from '../components/Footer.astro'
const { ___________ } = Astro.props
---
<h1>{frontmatter.title}</h1>
<p>著者: {frontmatter.______}（{frontmatter.pubDate}に投稿）</p>
< _______ />
<Footer />

    空欄に入る内容を見る。

    1. ---
layout: ../../layouts/MyMarkdownLayout.astro
title: "AstroにおけるMarkdownについて学ぶ"
author: Astro学習者
pubDate: 2022-08-08
---
今日は多くのことを学びました！AstroではMarkdownで書くことができますが、フロントマターから変数を渡すこともできるのです。Astroのレイアウトコンポーネントでもこれらの値にアクセスできます。
    2. ---
import Footer from '../components/Footer.astro'
const { frontmatter } = Astro.props
---
<h1>{frontmatter.title}</h1>
<p>著者: {frontmatter.author}（{frontmatter.pubDate}に投稿）</p>
<slot />
<Footer />

チェックリスト

Resources

貢献する コミュニティ スポンサー