manasblog
eyecatch

2021/9/5 8:59 

ブログアプデ - 2021/09/05

概要

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


手順


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

  • 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を使うような機能作りたいんだけど、ブログじゃ難しいかな…思いつかん。