Generating Series Navigation

tips & tricks
1

I saw a few people searching for a solution for this, and some things that worked, but seemed overly complex (like looping through every page to find the ones in a series). So hopefully this is a straightforward solution for most.

Using this assumes you have “series” set up in taxonomy and content marked in front matter with a series name, ie (series = ["mySeries"]. It does not require you to put a series in it’s own section, they can be anywhere.

This partial will output:

  • “Part x of totalCount”
  • an unordered list of links following the pagination class name conventions

as examples. Should be easily adaptable to desired output.

{{- if .Params.series -}}
  {{- $name := index .Params.series 0 -}}  
	{{- with (index .Site.Taxonomies.series $name) -}}
		{{- $total := .Count -}}
		{{- $startIndex := 0 -}}
		{{- $prevIndex := 0 -}}
		{{- $currIndex := 0 -}}
		{{- $nextIndex := 0 -}}
		{{- $endIndex := ( sub $total 1 ) -}}
		{{- range $index, $page := .Pages.Reverse -}}
			{{- if (eq $page $.Page) -}}	
				{{- $currIndex = $index -}}
				{{- $prevIndex = (sub $index 1) -}}
				{{- $nextIndex = (add $index 1) -}}
  			<p class="series_top_page">Part {{ add $index 1 }} of <a href="{{$.Site.BaseURL}}/series/{{$name | urlize}}">{{ $total }}</a></p>
			{{ end -}}
		{{- end -}}
		{{- /* Example series list following pagination class conventions */ -}}
		<nav role="navigation">
			<ul class="series-pagination pagination">
				<li class="page-item"><a class="page-link" href="{{ (index .Pages.Reverse $startIndex ).RelPermalink }}">First</a>		
				</li><li class="page-item{{ if (lt $prevIndex $startIndex) }} disabled{{ end }}"><a class="page-link" href="{{ (index .Pages.Reverse $prevIndex).RelPermalink }}">Prev</a>
				</li><li class="page-item active"><a class="page-link" href="{{ (index .Pages.Reverse $currIndex).RelPermalink }}">Part {{ add $currIndex 1 }}</a>
				</li><li class="page-item{{ if (gt $nextIndex $endIndex) }} disabled{{ end }}"><a class="page-link" href="{{ (index .Pages.Reverse $nextIndex).RelPermalink }}">Next</a>
				</li><li class="page-item"><a class="page-link" href="{{ (index .Pages.Reverse $endIndex).RelPermalink }}">Last</a>
			</li></ul>
		</nav>
	{{- end -}}
{{- end -}}

Note: before someone asks, the </li> elements are formatted that way because whitespace does matter sometimes in HTML.

4 Likes
2

Thanks you! I was about to decide maybe I didn’t need previous/next series links after all. Used a slightly tweaked version of your solution — and blogging about what I did, of course.

2 Likes