Paginator a-z

I’m using a paginator for a CLI command docs library and it works great but there’s been a request to group / display the buttons as A-Z instead of numbered pages. How would I best do that?

It sounds like you’re trying to build a glossary. There are a few ways to approach this. Perhaps the simplest is to use Hugo’s taxonomy system.

config.toml

[taxonomies]
glossary = 'glossary'

example content

+++
title = 'Apple'
date = 2021-01-01T00:00:00-00:00
draft = false
glossary = 'a'
+++

layouts/glossary/term.html

{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Pages }}
    <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
  {{ end }}

  <ul class="pagination">
    {{ range (site.GetPage "/glossary").Pages.ByTitle }}
      {{ if eq $.RelPermalink .RelPermalink }}
        <li class="page-item active">
          <a class="page-link" aria-current="page" aria-label="Page {{ .Data.Term }}" role="button" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
        </li>
      {{ else }}
        <li class="page-item">
          <a class="page-link" aria-label="Page {{ .Data.Term }}" role="button" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
        </li>
      {{ end }}
    {{ end }}
  </ul>

{{ end }}

Example:

git clone --single-branch -b hugo-forum-topic-40922 https://github.com/jmooring/hugo-testing hugo-forum-topic-40922
cd hugo-forum-topic-40922
hugo server
3 Likes