Partial Component

Collection Pagination

The Collection Pagination partial provides navigation controls for paginated content collections. It includes first/last, previous/next, and numbered page links with proper accessibility support.

Manifest

{
  "name": "collection-pagination",
  "type": "_partials",
  "styles": ["collection-pagination.css"],
  "scripts": [],
  "requires": [],
  "requiredPlugins": ["metalsmith-sectioned-blog-pagination"]
}

Configuration

hasPagingParams: true
pagingParams:
  numberOfBlogs: '' # updated by plugin
  numberOfPages: '' # updated by plugin
  pageLength: '' # updated by plugin
  pageStart: '' # updated by plugin
  pageNumber: '' # updated by plugin

Configuration Options

This partial requires the metalsmith-sectioned-blog-pagination plugin. During build the plugin will add all configuration according to its setup.

Example

For a fully functional live exaple please see the sample blog.

Usage in Templates

  {% from "components/_partials/collection-pagination/collection-pagination.njk" import collectionPagination %}

  {% set params = section.pagingParams %}
  {% if params.numberOfPages > 1 %}
    {{ collectionPagination(params.numberOfPages, params.pageNumber, section.domainName) }}
  {% endif %}

Notes

  • First, previous, numbered pages, next, last controls
  • Proper ARIA labels and screen reader support
  • Works with metalsmith-sectioned-blog-pagination plugin