astroを基本から学び、astro-notion-blogを理解したい(その3) ~ルーティングの基本を学ぶ~

動的ルーティングについて

公式の説明確認

　公式によると、ファイル名に動的ルートパラメータを指定でき、ファイル名を大括弧でくくることで、その部分を書き換えたファイル名となってページが作成される。

https://docs.astro.build

　動的ルーティングを自分なりに整理すると、動的ルーティングのファイルは、定義されたparamsに従ってビルド時にページが作られる。ファイルには必ずgetStaticPaths()をexportする必要があり、getStaticPathsの戻り値でparamsを返さなければならない。

graph LR

subgraph LIST["params"]
  P1("{anyanimal : dog}")
  P2("{anyanimal : cat}")
  P3("{anyanimal : bird}")
end

subgraph ASTRO["pages/animal/[anyanimal].astro"]
	LIST
end
  ASTRO --> BUILD((ビルド))
  
BUILD --> DOG(animal/dog)
BUILD --> CAT(animal/cat)
BUILD --> BIRD(animal/bird)

動的ルーティングのファイルからページを作成するイメージ

---
// getStaticPathsで、ページのパスとなる名前を任意に設定する。
// getStaticPaths内で動的にリストを生成してもよい。
export function getStaticPaths() {
  return [
    {params: {anyanimal: 'dog'}},
    {params: {anyanimal: 'cat'}},
    {params: {anyanimal: 'bird'}},
  ];
}

// ビルドされるページごとに、getStaticPathsで用意したリストの要素にアクセスできる。
// 要素は Astro.xxx で取得できる。
const { anyanimal } = Astro.params;
---

<div>{anyanimal}</div>

src/pages/animal/[anyanimal].astro

ファイルベースルーティングについて

公式の説明確認

Markdown in Astro

Learn about Astro’s built-in support for Markdown.

https://docs.astro.build

　ファイルベースルーティングでは、/src/pages内の.mdと.mdxからページを作成できる。先ほどの動的ルーティングと同じように、animalのページを作成する場合は、各mdファイルを用意してビルドすればよい。

graph LR

subgraph ASTRO["pages/animal/"]
  P1("dog.md")
  P2("cat.md")
  P3("bird.md")
end
  ASTRO --> BUILD((ビルド))
  
BUILD --> DOG(animal/dog)
BUILD --> CAT(animal/cat)
BUILD --> BIRD(animal/bird)

.mdファイルからページを作成するイメージ

.mdファイルにAstroのレイアウトを適用する方法

Markdown in Astro

Learn about Astro’s built-in support for Markdown.

https://docs.astro.build

　.mdにもフロントマターを記述することが出来る。フロントマターにlayoutを記述すると、レイアウトのslotタグが.mdファイルに置き換わるというもの。レイアウトは事前に用意しておくこと。layout以外の変数も定義でき、レイアウト側のastroで利用することができる。

---
layout: ../../layouts/AnimalBlogLayout.astro

title : タイトル
autohor : 著者名
description : ページの概要
---

MDで書かれたページです。

.mdファイルのサンプル

レイアウト側で変数を取得する場合は、Astro.propsからfrontmatterを取得すればよい。

---
const {frontmatter} = Astro.props;
---
<html>
  <!-- ... -->
  <h1>{frontmatter.title}</h1>
  <h2>投稿者: {frontmatter.author}</h2>
  <p>{frontmatter.description}</p>
  <slot /> <!-- Markdownコンテンツはここに挿入されます -->
   <!-- ... -->
</html>

公式の記述をそのまま拝借します。

おまけ

動的ルーティングとは異なるが、.astro内で任意のファイルを参照したい場合がある。例えば任意のフォルダにある.mdファイルの数を確認したいなど。その場合は、Astro.glob()を使うことで実現出来る。

Imports reference

Learn how to import different file types into your Astro project.

https://docs.astro.build

---
const posts = await Astro.glob('../pages/animal/*.md');
---

このように書くことで、animalフォルダ以下のmdファイルの情報が配列で、次のような配列が手に入る。

[
	{"frontmatter":{"title":"タイトル",
								 "autohor":"著者名",
								 "description":"ページの概要"},
	"file":"<ファイルパス>/src/pages/animal/dog.md",
	"url":"/animal/dog"},
	{"frontmatter":{"title":"タイトル",
								 "autohor":"著者名",
								 "description":"ページの概要"},
	"file":"<ファイルパス>/src/pages/animal/cat.md",
	"url":"/animal/cat"},
  ...以下省略
 ]

まとめ

　動的ページルーティングを理解することができた。レイアウトと組み合わせることで、ブログを書く人はHTMLを十分に理解することなく記事を書くことに専念できる仕組みだった。

　２日にかけてAstroについて勉強しましたが、ようやくastro-notion-blogの構成が理解できそうです。次回はastro-notion-blogの構成を整理したいと思う。

ふつうのITエンジニアの独り言