Hi @remote scarab. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#pagination
hollow otterBOT
I'll help you with pagination in Astro for WordPress posts. Based on your question, you want to create multiple pages with a specific number of posts per page.
In Astro, you can use the paginate() function to generate multiple pages from a collection of data. Here's how you can implement pagination for WordPress posts:
---
export async function getStaticPaths({ paginate }) {
// Fetch your WordPress posts
const response = await fetch("<http://your-wordpress-site.com/wp-json/wp/v2/posts?per_page=100">); // Adjust the URL and parameters as needed
const posts = await response.json();
// Define how many posts per page you want
const postPerPage = 6;
// Return paginated paths
return paginate(posts, { pageSize: postPerPage });
}
// All paginated data is passed on the "page" prop
const { page } = Astro.props;
---
<h1>Page {page.currentPage}</h1>
<ul>
{page.data.map((post) => (
<li>
<a href={`/posts/${post.slug}/`} set:html={post.title.rendered} />
</li>
))}
</ul>
<!-- Navigation links -->
{page.url.prev ? <a href={page.url.prev}>Previous</a> : null}
{page.url.next ? <a href={page.url.next}>Next</a> : null}
This code assumes your file is named [page].astro. The pagination will generate URLs like /1, /2, etc. If you place this file in a subdirectory like src/pages/blog/[page].astro, the URLs will be /blog/1, /blog/2, etc.
If you want the first page to be at the root path (like /blog instead of /blog/1), you should use [...page].astro instead of [page].astro as your filename Pagination.
Note that WordPress API typically limits the number of posts you can fetch in one request (usually 10 or 100). If you have more posts than this limit, you'll need to make multiple requests to get all posts or adjust your approach.