概要

• カテゴリを追加
• フッタも追加

手順

• 公式のよくある質問『カテゴリーやタグは作成できますか？』を参考に実装

ざっくりカテゴリリストの作り方

• getStaticPathsを利用してカテゴリごとの静的ページを生成する
  • 前回はblog/[blogのコンテンツID]を公式の導きのまま作ったので、今回はcategory/[categoryのID]で生成されるように下みたいなコードを組んだ

export const getStaticPaths = async () => {
  const data:CategoryContentList = await client.get({ endpoint: "categories" });

  const paths = data.contents.map((content) => `/category/${content.id}`);
  return { paths, fallback: false };
};

• このページに、カテゴリごとのコンテンツの取得を仕込む
• クエリの書き方はmicroCMSの管理画面の右上にあるAPIプレビューを利用すればプレビューもできるし書き方のサンプルもでてくる。

export const getStaticProps = async (context: GetStaticPropsContext) => {
  const id = context.params.id;
  const data:BlogContentList = await client.get({ endpoint: "blog", queries: {filters: `category[equals]${id}`} });

  return {
    props: {
      blog: data.contents,
    },
  };
};

• これでカテゴリごとの静的ページの作成は終わり
• あとはリストを作る。カテゴリを増やす予定はないので今回はハードコーディング
  • カテゴリにカテゴリー名もつけれるので、GETして自動生成するようにもできそう。また今度。
  • 色味は個別ページの薄い水色カラーだとちょっと薄すぎるのでちょっと濃いめに。
    • そういえば、現在いるページを色変更とか忘れた。これも今度。
  • 

つぶやき

• だいぶいい感じになってきた気がする。
• フッタにポートフォリオへのリンクをつけてみた。ので、来週からはポートフォリオの更新をしてこうかな。
• React hooksを使うような機能作りたいんだけど、ブログじゃ難しいかな…思いつかん。