Section Component

Collection Links

A navigation component that provides previous and next links between sequential collection items. This component automatically integrates with Metalsmith's collections plugin to display contextual navigation at the end of collection articles.

How It Works

The component uses the collectionName property to determine which collection to navigate. This defaults to 'blog' if not specified, making it backwards compatible while allowing use with any named collection.

It reads previous and next variables that are automatically populated by Metalsmith's collections plugin when processing collection items. The component only renders when a page has previous or next items available, making it safe to include in any collection item template.

Live Example

To see this component in action, visit any blog post on this site. For example, check the bottom of theSample Blog Postto see the previous and next navigation links.

Usage

Add the collection-links section to any collection item frontmatter:

- sectionType: collection-links
  collectionName: 'blog'
  containerTag: section
  classes: ""
  id: ""
  isDisabled: false
  containerFields:
    inContainer: false
    isAnimated: true
    noMargin:
      top: true
      bottom: false
    noPadding:
      top: false
      bottom: false
    background:
      color: ""
      image: ""
      imageScreen: "none"

Collection Integration

The component requires Metalsmith's collections plugin to be configured for collection items:

// In metalsmith.js
.use(collections({
  blog: {
    pattern: 'blog/**/*.md',
    sortBy: 'card.date',
    reverse: true
  }
}))

The collections plugin automatically adds previous and next properties to each page in the collection, which the component uses to generate navigation links.

Conditional Rendering

The component handles edge cases automatically:

First item in collection: Only shows "Next" link
Last item in collection: Only shows "Previous" link
Single item: Component doesn't render at all
Non-collection page: Component doesn't render

Configuration Options

Property	Type	Required	Description
`sectionType`	string	Yes	Must be `collection-links`
`collectionName`	string	No	The name of the collection to navigate. Defaults to `'blog'`
`isDisabled`	boolean	No	Set to `true` to hide the section
`containerFields`	object	No	Standard container configuration

Note that the navigation content (item titles and URLs) is automatically populated from the collection data and cannot be configured in frontmatter.