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