Generate pagination with Pagebreak to split long lists into multiple pages. (from CloudCannon/pagebreak)
You may also be interested in 11ty's docs about available data here. This is the other way of doing pagination, in the page settings you have the 11ty parameters discussed in the docs.
Get in touch on the forums or in the chat to get answers
.gitlab-ci.yml
in your GitLab project1. In GitLab find your website project and edit the file .gitlab-ci.yml
.
2. Prevent Silex from resetting your changes:
At the top of the file you may see
# silexOverwrite: true
If needed, change it to
# silexOverwrite: false
3. Add the Pagebreak step (one line):
A/ If you use data sources (Eleventy build with _site
):
- npx @pagebreak/cli -s _site -o _site
Here’s a full example:
# silexOverwrite: false
image: node:20
pages:
stage: deploy
environment: production
script:
- npx @11ty/eleventy@v3.0.0-alpha.20 --input=public --output=_site
- npx @pagebreak/cli -s _site -o _site
- mkdir -p public/css public/assets && cp -R public/css public/assets _site/
- rm -rf public && mv _site public
- echo "The site will be deployed to $CI_PAGES_URL"
artifacts:
paths:
- public
rules:
- if: '$CI_COMMIT_TAG'
- if: '$CI_PIPELINE_SOURCE == "trigger"'
B/ If you don’t use data sources (just public
folder):
- npx @pagebreak/cli -s public -o public
Here’s the full file:
# silexOverwrite: false
image: node:20
pages:
stage: deploy
environment: production
script:
- echo "The site will be deployed to $CI_PAGES_URL"
- npx @pagebreak/cli -s public -o public
artifacts:
paths:
- public
rules:
- if: '$CI_COMMIT_TAG'
- if: '$CI_PIPELINE_SOURCE == "trigger"'
4. Commit the file
Click "commit changes"
5. Back in Silex, click Publish again
6. After the pipeline finishes, your paginated pages are available
Check your site at
https://<your-namespace>.gitlab.io/<your-project>/
Pagination URLs will follow your data-pagebreak-url
settings, e.g. /page/2/
To use Pagebreak in your Silex pages, add attributes to your containers:
<section data-pagebreak="3">
<article>Item 1</article>
<article>Item 2</article>
<article>Item 3</article>
<article>Item 4</article>
</section>
Splits into pages of 3 items each
<section data-pagebreak="2" data-pagebreak-url="./archive/page-:num/">
<article>Post A</article>
<article>Post B</article>
<article>Post C</article>
</section>
Outputs /archive/page-2/
, /archive/page-3/
, etc
<section data-pagebreak="1" data-pagebreak-meta=":content - Page :num">
<article>News 1</article>
<article>News 2</article>
</section>
Page 2 will have <title>News - Page 2</title>
<a data-pagebreak-control="prev">Previous</a>
<a data-pagebreak-control="next">Next</a>
<p>
Page <span data-pagebreak-label="current"></span>
of <span data-pagebreak-label="total"></span>
</p>
Pagebreak will auto-update these links and counters
Here is how it looks in Silex: