Generate pagination with Pagebreak to split long lists into multiple pages. (from CloudCannon/pagebreak)
¶ 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
¶ Related docs
- Pagebreak project GitHub
- Pages and links pages
- 11ty plugins in Silex docs cms-plugins