コンテンツにスキップ
Astro Astro

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

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

ここで学ぶことは…

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

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

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

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

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

    src/layouts/MarkdownPostLayout.astro
    ---
    const { frontmatter } = Astro.props;
    ---
    <h1>{frontmatter.title}</h1>
    <p>著者: {frontmatter.author}</p>
    <slot />

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

    src/pages/posts/post-1.md
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: '私の最初のブログ記事'
    pubDate: 2022-07-01
    description: 'これは私の新しいAstroブログの最初の記事です。'
    author: 'Astro学習者'
    image:
        url: 'https://docs.astro.build/assets/full-logo-light.png'
        alt: 'Astroのロゴ。'
    tags: ["astro", "ブログ", "公開学習"]
    ---

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

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

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

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

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

src/pages/posts/post-1.md
投稿日: 2022-07-01


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

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

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

src/layouts/MarkdownPostLayout.astro
---
const { frontmatter } = Astro.props;
---
<h1> {frontmatter.title}</h1>
<p>{frontmatter.pubDate.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 />

確認テスト

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

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

チェックリスト

Resources