ContentSeriesNavigation

Available from 4.1.

ContentSeriesNavigation shows where an item stands in a series ("Part 2 of 5"), lists every part and links the previous and next part. Use it on multi-part tutorials and article series. The series comes from front matter, so adding a part is a matter of writing its Markdown file.

Usage

Give every part the same series name and number it with series_order:

---
title: "Deploy the blog"
series: "Build a blog with Osirion"
series_order: 3
---

Then render the component with the item being shown:

@using Osirion.Blazor.Cms.Web.Components

<ContentSeriesNavigation Item="@Item" />

A tutorial page that shows the position and part list at the top and only the previous and next links at the bottom, with its own wording:

@using Osirion.Blazor.Cms.Domain.Entities
@using Osirion.Blazor.Cms.Web.Components

<ContentSeriesNavigation Item="@Item" PositionFormat="Lesson {0} of {1}" />

@* the article body *@

<ContentSeriesNavigation Item="@Item"
                         ShowPartList="false"
                         PositionFormat="Lesson {0} of {1}"
                         PreviousText="Previous lesson"
                         NextText="Next lesson" />

@code {
    [Parameter]
    public ContentItem? Item { get; set; }
}

Parameters

Other attributes on the tag are added to the nav.

Behavior

• The parts are the published items in the item's locale whose series matches, ignoring case. They are ordered by series_order; parts without a number come after the numbered ones, oldest first.
• Nothing renders when the item has no series, when the series has only one published part, or when the item itself is not among the parts. The content is queried only for items with a series, and only again when the item or its series changes.
• If the content provider fails, the error is logged through ILogger and the component renders nothing, so the article still shows.
• The nav is labelled with the series name and position, for example "Build a blog with Osirion: Part 3 of 5". The current part in the list carries aria-current="page", and the previous and next links carry rel="prev" and rel="next".
• Titles and the series name are written as text, so they are HTML-encoded. The links are plain anchors, so it works under static SSR without script.

Styling

The box uses --osirion-border-color and --osirion-background-secondary; text uses --osirion-text-primary and --osirion-text-secondary.

Related

• OsirionContentNavigation, previous and next links by directory order
• Content List
• CMS navigation components