Astro2.0のタグごとのページネーション

Astro2.0のタグごとのページネーション

タグごとのページも paginate する

ディレクトリとファイルは以下のようにする

├── pages│   ├── [...page].astro│   ├── [...slug].astro│   ├── [tag]│   │   └── [...page].astro│   ├── note│   │   ├── [...slug].astro│   │   └── index.astro
---import BaseLayout from "@layouts/BaseLayout.astro";import Card from "@components/BlogCard.astro";import CardList from "@components/CardList.astro";import PageNav from "@components/PageNav.astro";import Tags from "@components/Tags.astro";import { getCollection } from "astro:content";import { BLOG_NAME, BLOG_BLOG_PAGE_SIZE } from "@config/config";export async function getStaticPaths({ paginate }) {  const allPosts = await getCollection(BLOG_NAME);  allPosts.sort(    (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf()  );  const allTags = [...new Set(allPosts.map((post) => post.data.tags).flat())];  return allTags.map((tag) => {    const filteredPosts = allPosts.filter((post) =>      post.data.tags?.includes(tag!)    );    return paginate(filteredPosts, {      params: { tag },      pageSize: BLOG_BLOG_PAGE_SIZE,    });  });}const { page } = Astro.props;const params = Astro.params;const nextText = "次の10件";const prevText = "前の10件";const pageTitle =  "[" +  params.tag +  "] の付いた記事 " +  page.currentPage +  "/" +  page.lastPage +  " ページ";---<BaseLayout pageTitle={pageTitle}>  <CardList>    {page.data.map((post) => <Card entry_name={BLOG_NAME} post={post} />)}  </CardList>  <PageNav    prev={page.url.prev}    next={page.url.next}    prev_text={prevText}    next_text={nextText}  />  <hr /></BaseLayout>