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>