Series

Using series for pages

You create a series by adding the same series value to the frontmatter of each page in the series, and then looping through the pages that have that value. Here’s a demo.

1. Create the series button

First create an include that contains your series button:

<div class="seriesContext">
    <div class="btn-group">
        <button type="button" data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-primary dropdown-toggle">Series Demo</button>
        <ol class="dropdown-menu">
            {% assign pages = site.pages | where: "series", "ACME series" | sort: "weight" %}
            {% for p in pages %}
            {% if p.series == "ACME series" %}
            {% if p.url == page.url %}
            <li class="active" aria-current="page"> → {{p.weight}}. {{p.title}}</li>
            {% else %}
            <li>
                <a class="dropdown-item" href="{{p.url | remove_first: "/" }}">{{p.weight}}. {{p.title}}</a>
            </li>
            {% endif %}
            {% endif %}
            {% endfor %}
        </ol>
    </div>
</div>

Change “ACME series” to the name of your series.

Save this in your _includes/custom folder as something like series_acme.html.

2. Create the “next” include

Now create another include for the Next button at the bottom of the page. Copy the following code, changing the series name to your series’name:

<p>{% assign pages = site.pages | where: "series", "ACME series" | sort: "weight" %}
    {% for p in pages %}
    {% if p.weight > page.weight %}
    <a class="dropdown-item" href="{{p.url | remove_first: "/" }}"><button type="button" class="btn btn-primary">Next: {{p.weight}}. {{p.title}}</button></a>
    {% break %}
    {% endif %}
    {% endfor %}
</p>

Change “acme” to the name of your series.

Save this in your _includes/custom folder as series_acme_next.html. (The theme’s own series_acme_next.html also includes a Jump to menu.)

3. Add the correct frontmatter to each of your series pages

Now add the following frontmatter to each page in the series:

series: "ACME series"
weight: 1.0

The pages are sorted by weight, and the Next button links to the first page with a higher weight than the current page, so the weights don’t need to be consecutive. Use numbers (without quotation marks) for every weight in the series, so that they sort correctly.

Additionally, if your page names are prefaced with numbers, such as “1. Download the code,” then the {{p.weight}} will create a duplicate number. In that case, just remove the {{p.weight}} from both code samples here.

4. Add links to the series button and next button on each page.

On each series page, add a link to the series button at the top and a link to the next button at the bottom.

<!-- your frontmatter goes here -->

{% include custom/series_acme.html %}

<!-- your page content goes here ... -->

{% include custom/series_acme_next.html %}

Changing the series drop-down color

The Bootstrap menu uses the primary class for styling. If you change this class in your theme, the Bootstrap menu should automatically change color as well. You can also just use another Bootstrap class in your button code. Instead of btn-primary, use btn-info or btn-warning. See Labels for more Bootstrap button classes.

Using a collection with your series

Instead of copying and pasting the button includes on each of your series, you could also create a collection and define a layout for the collection that has the include code. For more information on creating collections, see Collections for more details.