We will likely introduce better native support for pagination at some point, but for now, this is an okay workaround that only requires a little code.
This will change ?page=2
pagination URLs to /page/2
URLs, so the SSG is able to recognize them as their own pages.
Copy UrlPaginator
into app/UrlPaginator.php
.
You can put it somewhere else, but be sure to update the namespace in the class itself, and any references to it.
This class overrides Statamic's paginator and changes the /url?page=2
urls to /url/page/2
urls.
Copy the contents of the boot
method into your own AppServiceProvider
.
In here it will:
- Swap out Statamic's paginator for the url based one
- Tell the paginator to look at the
/page/{page}
part of the url for the page number, rather than looking for a?page=
query string. - Add any paginator urls to the SSG's "urls" config.
Since this method of pagination means there will be separate pages, you'll need a route.
You can copy the route in web.php
and tweak as necessary. Make sure to keep page/{page}
in there.
Rinse and repeat for any other sections of your site that have pagination.
In the service provider, you'll see this block:
$config['urls'] = array_merge(
$config['urls'],
$this->articleUrls(),
// $this->blogUrls(),
// $this->tagUrls(),
// etc
);
This is going to dynamically add URLs to the ssg.php
config file.
- Copy over the
articleUrls
method. - Tweak the naming for what makes sense for you.
- Adjust the URL, query, and perPage in order to correspond to your collection tag.
- Repeat for any other sections of your site that have pagination.
I got this working locally easy enough (tested with
ssg:serve
) but it took a few steps to get it working on Netlify:1. Add an .env file to your repo (encrypted)
First of all, I had to create an encrypted
.env.production
file. See Laravel's instructions on how to do this for more detail (I opted for an encrypted env because it's overall a safer method) - remember the encryption key you use for this file; you'll need it in a later step.Commit the
.env.production.encrypted
to your repo. .gitignore the unencrypted.env.production
.2. Add the decryption key to your Netlify environment variables
Add the
--key
you used in the first step as an environment variable in Netlify calledLARAVEL_ENV_ENCRYPTION_KEY
(under Deploy settings > Environment variables > Environment variables)3. Update your Netlify build command
Update your build command (under Deploy settings > Build settings > Build command) to look like this:
4. Build
All works nicely for me 👍🏼 (caveat: my site is pretty simple for now)