✨
Astroチュートリアルメモ その4-2,3【マークダウンにレイアウトを適用する】
Astroではマークダウンファイルごとにレイアウトを設定できる。
Next.jsでマークダウンごとにレイアウトを変更するのはちょっと大変だったが、Astroでは簡単。
ただ、マークダウンファイルごとにレイアウトを指定する記述を入れないといけないので、全て同じで良い場合は、Next.jsに比べると面倒。
あと、AstroではNext.jsの_app.tsx、_documet.tsx相当のものがデフォルトでなさそう。前回作ったBaseLayout.astroがその役目に近いけど、明示的に自分でimportする必要がある。
Astroは、マークダウンファイルに対しては、カスタマイズはデフォルトで簡単にできるので、それに特化した作りになってるような印象。
Next.jsはマークダウンを扱うなら基本的な部分もカスタマイズも自分で作る、みたいな感じ。
用途が限定的なら、Astroは効果を発揮しそう。
マークダウン用のレイアウトを作る
ベースになるレイアウトを含めた、マークダウン用のレイアウトを作る。
src/layouts/MarkdownPostLayout.astro
---
import BaseLayout from "./BaseLayout.astro";
const { frontmatter } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title}>
<p>{frontmatter.pubDate.slice(0, 10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Written by: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />
<p><a href="/">Home</a></p>
</BaseLayout>
importでBaseLayout.astroを読み込み、<slot />で本文が入る部分を作る。
ここで作ったMarkdownPostLayout.astroをマークダウンファイルの中でlayout:パスで指定する。
src/pages/posts/post-1.md
---
layout: ../../layouts/MarkdownPostLayout.astro
title: 'My First Blog Post'
pubDate: 2022-07-01
description: 'This is the first post of my new Astro blog.'
author: 'Astro Learner'
image:
url: 'https://astro.build/assets/blog/astro-1-release-update/cover.jpeg'
alt: 'The Astro logo with the word One.'
tags: ["astro", "blogging", "learning in public"]
---
Next.jsなどでブログを作るときに動的ルーティングなどをすると、基本的に記事を読み込むコンポーネントは1つで、記事で切り替えるにはコンポーネントを切り替える処理を入れたりと、ひと手間かかるが、Astroではマークダウンファイル内でレイアウトを指定するため、切替が楽にできる。
ただ、普通にブログを作るならば記事レイアウトは全部同じで良いので、そういう場合はちょっと面倒かなと思ったりする。
次の記事
Discussion