feat: add pagination

This commit is contained in:
log101 2024-06-21 16:45:23 +03:00
parent 393aa52757
commit b71e3faaf9

View File

@ -7,7 +7,7 @@ import Footer from "@/components/Footer.astro";
import Layout from "@/layouts/Layout.astro"; import Layout from "@/layouts/Layout.astro";
import Post from "@/components/Post.astro"; import Post from "@/components/Post.astro";
export async function getStaticPaths({ paginate }) { export async function getStaticPaths({ paginate }: { paginate: any }) {
const blogEntries = await getCollection("blog"); const blogEntries = await getCollection("blog");
const filteredPosts = blogEntries.filter((post) => post.data.category); const filteredPosts = blogEntries.filter((post) => post.data.category);
@ -22,6 +22,8 @@ export async function getStaticPaths({ paginate }) {
const { page } = Astro.props; const { page } = Astro.props;
const posts = page.data as Array<any>; const posts = page.data as Array<any>;
const pages = Array.from({ length: page.lastPage }, (_, i) => i + 1);
--- ---
<Layout title="log101"> <Layout title="log101">
@ -40,5 +42,33 @@ const posts = page.data as Array<any>;
) )
} }
</div> </div>
<div id="pagination-container" class="flex gap-2">
<button
><a href={page.url.prev} class="no-underline text-inherit">geri git</a
></button
>
{
pages.map((pageNumber) => {
switch (pageNumber) {
case page.currentPage:
return <a>{pageNumber}</a>;
default:
return (
<a
href={`${page.url.current.slice(0, -1)}${pageNumber}`}
class="text-inherit"
>
{pageNumber}
</a>
);
}
})
}
<button
><a href={page.url.next} class="no-underline text-inherit">ileri git</a
></button
>
</div>
<Footer /> <Footer />
</Layout> </Layout>