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
¶ Prerequisites
- Your site publishes via GitLab Pages
- You can edit
.gitlab-ci.ymlin your GitLab project
¶ Steps
1. 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/
¶ Example HTML for Silex
To use Pagebreak in your Silex pages, add attributes to your containers:
¶ Basic pagination
<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
¶ Custom URLs
<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
¶ Title and meta tags
<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>
¶ Controls
<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:
¶ Related docs
- Pagebreak project GitHub
- Pages and links pages
- 11ty plugins in Silex docs cms-plugins