99 lines
3.2 KiB
Markdown
99 lines
3.2 KiB
Markdown
---
|
|
title: Series pages
|
|
tags: []
|
|
keywords: series
|
|
audience: writers, designers
|
|
last_updated: May 17, 2015
|
|
summary: "You can automatically link together topics belonging to the same series. This helps users know the context within a particular process."
|
|
---
|
|
{% include linkrefs.html %}
|
|
|
|
You create a series by looking for all pages within a tag namespace that contain certain frontmatter. Here's a demo: {{doc_seriesdemo1_1}}.
|
|
|
|
## 1. Create the series button
|
|
|
|
First create an include that contains your series button:
|
|
|
|
```html
|
|
{% raw %}
|
|
<div class="seriesContext">
|
|
<div class="btn-group">
|
|
<button type="button" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Series Demo <span class="caret"></span></button>
|
|
<ol class="dropdown-menu">
|
|
{% assign pages = site.pages | sort:"weight" %}
|
|
{% for p in pages %}
|
|
{% if p.series == "ACME series" %}
|
|
{% if p.url == page.url %}
|
|
<li class="active"> → {{p.weight}}. {{p.title}}</li>
|
|
{% else %}
|
|
<li>
|
|
<a href="{{p.url}}">{{p.weight}}. {{p.title}}</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
{% endraw %}
|
|
```
|
|
|
|
Change "ACME series" to the name of your series.
|
|
|
|
Save this in your \_includes folder as something like series\_acme.html.
|
|
|
|
Note that with pages, there isn't a universal namespace created from tags or categories like there is with Jekyll posts. As a result, you have to loop through all pages. If you have a lot of pages in your site (e.g., 1,000+), then this looping will create a slow build time. If this is the case, you will need to rethink the approach to looping here.
|
|
|
|
## 2. Create the "next" include
|
|
|
|
This will be the next button at the bottom of the page:
|
|
|
|
```html
|
|
{% raw %}
|
|
<p>{% assign series_pages = site.tags.series_acme %}
|
|
{% for p in pages %}
|
|
{% if p.series == "ACME series" %}
|
|
{% assign nextTopic = page.weight | plus: "0.1" %}
|
|
{% if p.weight == nextTopic %}
|
|
<a href="{{p.url}}"><button type="button" class="btn btn-primary">Next: {{p.weight}} {{p.title}}</button></a>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</p>
|
|
|
|
{% endraw %}
|
|
```
|
|
Change "acme" to the name of your series.
|
|
|
|
Save this in your \_includes folder as series\_acme\_next.html.
|
|
|
|
## 3. Add the right frontmatter to each of your series pages
|
|
|
|
Now add the following frontmatter to each page in the series:
|
|
|
|
```json
|
|
series: "ACME series"
|
|
weight: 1.0
|
|
```
|
|
|
|
With weight, you could use 1, 2, 3, etc.., but Jekyll will treat 10 as coming after 1. This is why I use 1.0 and 1.1, 1.2, etc.
|
|
|
|
If you do use whole numbers, change the `plus: "0.1"` to `plus: "1".
|
|
|
|
## 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.
|
|
|
|
```html
|
|
{% raw %}
|
|
{% include custom/doc/series_acme.html %}
|
|
|
|
<!-- your page content goes here ... -->
|
|
|
|
{% include custom/doc/series_acme_next.html %}
|
|
{% endraw %}
|
|
```
|
|
|
|
## 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. |