1

I have a static site with a blog section using Astro's built-in pagination, doing something like this in src/pages/blog/[page].astro:

export const itemsPerPage = 12

export async function getStaticPaths({ paginate }) {
  const allBlogs = await Astro.glob('./*.md')
  return paginate(allBlogs, { pageSize: itemsPerPage })
}

const { page } = Astro.props
const { start, end, total, data, currentPage } = page

The page props are then used to populate the pagination UI. This all works fine, and results in /blog/1, /blog/2 etc pages being built.

What I would like to do is have src/pages/blog/index.astro to generate /blog, which would have the same content as the first page e.g. /blog/1. I can replicate the logic to get the posts, but I can't figure out how to access the pagination data outside of getStaticPaths. Is there a way to do this?

velvetkevorkian
  • 660
  • 1
  • 5
  • 13

1 Answers1

1

Dynamic routes in Astro like src/pages/blog/[page].astro only work one level deep to create pages like /blog/[page], but the route you want (/blog) is deeper than your dynamic route can create so you have to switch to a REST parameter in your dynamic route like src/pages/blog/[...page].astro which will allow you to create urls at any depth /blog, /blog/2, /blog/2022/1, etc

Bryce Russell
  • 647
  • 3
  • 8
  • 1
    Amazing, all I had to do was change from `[page].astro` to `[...page].astro` and it works as I expect, although I will need to re-read that documentation page a few more times to understand exactly how... – velvetkevorkian Dec 22 '22 at 16:50