10h30/blog-balodeplao
1
0
Fork 0
mirror of https://github.com/10h30/blog-balodeplao.git synced 2026-05-12 15:21:15 +09:00
Code Issues Packages Projects Releases Wiki Activity

feat: add pagination for tag and category

Browse Source
This commit is contained in:
thuanbui
2026-03-18 10:24:54 +09:00
parent bd8868d0a0
commit 7d22142d38
2 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/category/[category].astro → src/pages/category/[category]/[...page].astro
+20 -21
View File
@@ -3,30 +3,32 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
import { getCollection } from "astro:content";
import Headline from "@/components/ui/Headline.astro";
import PostItem from "@/components/blog/PostItem.astro";
import Pagination from "@/components/ui/Pagination.astro";
import type { GetStaticPathsOptions } from "astro";
export async function getStaticPaths() {
export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
const allPosts = await getCollection("blog");
const posts = allPosts.filter((post) => post.data && post.data.pubDate); // Ensure published
const posts = allPosts.filter((post) => post.data && post.data.pubDate);
const categories = new Set();
const categories = new Set<string>();
posts.forEach((post) => {
post.data.categories?.forEach((tag) => categories.add(tag));
post.data.categories?.forEach((cat) => categories.add(cat));
});
return Array.from(categories).map((category) => {
return {
params: { category: category as string },
props: {
category,
posts: posts.filter((post) =>
post.data.categories?.includes(category as string),
),
},
};
return Array.from(categories).flatMap((category) => {
const categoryPosts = posts
.filter((post) => post.data.categories?.includes(category))
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
return paginate(categoryPosts, {
params: { category },
pageSize: 6,
});
});
}
const { category, posts } = Astro.props;
const { page } = Astro.props;
const { category } = Astro.params;
const metadata = {
title: `Category: ${category}`,
@@ -40,7 +42,7 @@ const metadata = {
<Headline
tagline="Category"
title={category}
subtitle={`Showing ${posts.length} article${posts.length === 1 ? "" : "s"}.`}
subtitle={`Showing ${page.total} article${page.total === 1 ? "" : "s"}.`}
classes={{
container: "mb-12 text-center",
title:
@@ -54,12 +56,9 @@ const metadata = {
</div>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
{
posts
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
.map((post) => <PostItem post={post} />)
}
{page.data.map((post) => <PostItem post={post} />)}
</div>
<Pagination page={page} />
</div>
</section>
</BaseLayout>
src/pages/tag/[tag].astro → src/pages/tag/[tag]/[...page].astro
+19 -18
View File
@@ -3,28 +3,32 @@ import BaseLayout from "@/layouts/BaseLayout.astro";
import { getCollection } from "astro:content";
import Headline from "@/components/ui/Headline.astro";
import PostItem from "@/components/blog/PostItem.astro";
import Pagination from "@/components/ui/Pagination.astro";
import type { GetStaticPathsOptions } from "astro";
export async function getStaticPaths() {
export async function getStaticPaths({ paginate }: GetStaticPathsOptions) {
const allPosts = await getCollection("blog");
const posts = allPosts.filter((post) => post.data && post.data.pubDate); // Ensure published
const posts = allPosts.filter((post) => post.data && post.data.pubDate);
const tags = new Set();
const tags = new Set<string>();
posts.forEach((post) => {
post.data.tags?.forEach((tag) => tags.add(tag));
});
return Array.from(tags).map((tag) => {
return {
params: { tag: tag as string },
props: {
tag,
posts: posts.filter((post) => post.data.tags?.includes(tag as string)),
},
};
return Array.from(tags).flatMap((tag) => {
const tagPosts = posts
.filter((post) => post.data.tags?.includes(tag))
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
return paginate(tagPosts, {
params: { tag },
pageSize: 6,
});
});
}
const { tag, posts } = Astro.props;
const { page } = Astro.props;
const { tag } = Astro.params;
const metadata = {
title: `Posts tagged with '${tag}'`,
@@ -38,7 +42,7 @@ const metadata = {
<Headline
tagline="Tag"
title={`#${tag}`}
subtitle={`Showing ${posts.length} article${posts.length === 1 ? "" : "s"}.`}
subtitle={`Showing ${page.total} article${page.total === 1 ? "" : "s"}.`}
classes={{
container: "mb-12 text-center",
title:
@@ -52,12 +56,9 @@ const metadata = {
</div>
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
{
posts
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
.map((post) => <PostItem post={post} />)
}
{page.data.map((post) => <PostItem post={post} />)}
</div>
<Pagination page={page} />
</div>
</section>
</BaseLayout>