Pagination

What is pagination?

Sometimes you want to aggregate many individual pieces of content onto a single page. This is common for things like blog posts and event pages; there are many individual nodes, but one landing page that collects them all so people can browse what is available. If there are too many items to display on a single page, often times they are broken up into individual pages that people can cycle through by clicking a "next" or "previous" button (a pager). This increments the current page and loads a new set of items while clearing out the previous set.

Implementation

In your sitewide plenti.json configuration file, you can create pagination, for your homepage for example, like this:

{
  "routes": {
    "index": ":paginate(totalPages)"
  }
}
The value of totalPages in this example must be defined in the template for this route, which in this case is layouts/content/index.svelte. You have complete flexibility to set up your pagination to work in any way that you see fit. We don't force you to use any particular pattern, at build time we simply evaluate the value of whatever variable name you put in your route to determine how many server rendered pages you need. For example you might create pagination in your template to work with the route specified above like this:

Displaying paged items

To display the correct items, you'll want to check if the position of the current post is within the expected range of the items that should be displayed. Keeping with the example above, you could create a layouts/components/grid.svelte file that looks something like this:

Creating a pager

The pager is the actual controls used to navigate forward and backward through the paged output. You have ultimate flexibility of how this is implemented, but it might look something like this: