Collection List
A universal collection listing component that displays a grid of items with pagination support. Works with any collection (blog posts, components, products, etc.) and automatically detects available fields like author and date.
A universal collection listing component that displays a grid of items with pagination support. Works with any collection (blog posts, components, products, etc.) and automatically detects available fields like author and date.
- sectionType: collection-list
collectionName: 'blog' # Required: name of collection to display
containerTag: section # section, article, or aside
disabled: false
id: ""
classes: ""
containerFields:
inContainer: false
isAnimated: true
noMargin:
top: true
bottom: false
noPadding:
top: false
bottom: false
background:
isDark: true
color: ""
image: ""
imageScreen: "none" # light, dark, none
hasPagingParams: true
pagingParams:
numberOfBlogs: "" # Total number of items (auto-populated)
numberOfPages: "" # Total pages needed (auto-populated)
pageLength: "" # Items per page (auto-populated)
pageStart: "" # Starting index for current page (auto-populated)
pageNumber: "" # Current page number (auto-populated)
Property | Type | Required | Description |
---|---|---|---|
collectionName | string | Yes | Name of the collection to display ('blog', 'components', 'products', etc.) |
Property | Type | Required | Description |
---|---|---|---|
hasPagingParams | boolean | No | Enables pagination functionality |
pagingParams.numberOfBlogs | string | No | Total number of items (auto-populated) |
pagingParams.numberOfPages | string | No | Total pages needed (auto-populated) |
pagingParams.pageLength | string | No | Items per page (auto-populated) |
pagingParams.pageStart | string | No | Starting index for current page (auto-populated) |
pagingParams.pageNumber | string | No | Current page number (auto-populated) |
The component automatically includes author/date information if present in collection items.
Note: This component requires the metalsmith-sectioned-blog-pagination
plugin to calculate and populate pagination parameters automatically.
hasPagingParams
This allows the plugin to work with modular page builders where content is organized in sections, ensuring pagination data goes to the correct section rather than being added globally.
Each blog post in the collection needs a card object for the blog-list component to render properly:
# In individual blog post frontmatter
card:
title: 'Architecture Philosophy'
date: '2025-06-02'
author:
- Albert Einstein
- Isaac Newton
image: '/assets/images/sample9.jpg'
featuredBlogpost: true
featuredBlogpostOrder: 1
excerpt: |-
This starter embodies several key principles that make structured content management both powerful and approachable.
Option settings for the collections
plugin determine the sort order of the cards. In metalsmith.js
:
.use(
collections( {
blog: {
pattern: 'blog/*.md',
sortBy: 'card.date',
reverse: false
}
} )
)