Hugo - Pagination - Number

   
   
 hugo  navigation  bootstrap  sass  
 ssg  frontend  
Article Series

This article series contain few sections.

Supplementary Article for Windows User.

Clone Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

Goal: Pagination using Number.

1: Prepare

Consider use a new partial named pagination-number.html, in our previous list.html

  {{ $paginator := .Paginate (where .Site.Pages "Type" "post") }}
  {{ partial "pagination-number.html" (dict "p" $paginator) }}

Layout: List

The code would looks similar as below:

  {{ $paginator := .Paginate (where .Site.Pages "Type" "post") }}
  {{ partial "pagination-number.html" (dict "p" $paginator) }}
  <section id="archive">
  <div class="post-list">
    {{ range $paginator.Pages }}
      {{ partial "summary-blog-list.html" . }}
    {{ end }}
  </div>
  </section>

2: Preview: General

This is what we want to achieve in this tutorial.

Hugo Pagination: Stylesheet Before After

HTML Preview

The HTML that we want to achieve in this article, is similar as below.

<ul class="pagination justify-content-center">
  <li class="page-item blog_previous disabled">
    <span class="page-link">«</span>
  </li>
  <li class="page-item  active">
    <span class="page-link">1</span>
  </li>
  <li class="page-item ">
    <a href="/pages/page/2/" class="page-link">2</a>      
  </li>
  <li class="page-item ">
    <a href="/pages/page/3/" class="page-link">3</a>
  </li>
  <li class="page-item blog_next">
    <a class="page-link" href="/pages/page/2/" rel="next">»</a>
  </li>
</ul>

We will achieve this with Hugo code.

3: Navigation: Number

Pagination by number is also simple.

Partial: Pagination Number

<nav aria-label="Page navigation">

  {{ if gt .p.TotalPages 1 }}
  <ul class="pagination justify-content-center">

    <!-- Page numbers. -->
    {{ $pagenumber := .p.PageNumber }}

    {{ range .p.Pagers }}
    <li class="page-item {{ if eq $pagenumber .PageNumber }} active{{ end }}">
      {{ if not (eq $pagenumber .PageNumber) }} 
      <a href="{{ .URL }}" class="page-link">
        {{ .PageNumber }}
      </a>
      {{ else }}
      <span class="page-link>
        {{ .PageNumber }}
      </span>
      {{ end }}
    </li>
    {{ end }}

  </ul>
  {{ end }}

</nav>

Browser: Pagination Preview

Hugo Pagination: Number List

How does it works ?

Just a simple loop.

  {{ range .p.Pagers }}
    {{ .PageNumber }}
  {{ end }}

4: Navigation: Previous and Next

Consider give it a prev next button.

<nav aria-label="Page navigation">

  {{ if gt .p.TotalPages 1 }}
  <ul class="pagination justify-content-center">

    <!-- Previous Page. -->
    {{ if .p.HasPrev }}
      <li class="page-item blog_previous">
        <a class="page-link" href="{{ .p.Prev.URL }}" rel="prev">&laquo;</a>
      </li>
    {{ else }}
      <li class="page-item blog_previous disabled">
        <span class="page-link">&laquo;</span>
      </li>
    {{ end }}

    ...

    <!-- Next Page. -->
    {{ if .p.HasNext }}
      <li class="page-item blog_next">
        <a class="page-link" href="{{ .p.Next.URL }}" rel="next">&raquo;</a>
      </li>
    {{ else }}
      <li class="page-item blog_next disabled">
        <span class="page-link">&raquo;</span>
      </li>
    {{ end }}
  </ul>
  {{ end }}

</nav>

Browser: Pagination Preview

Hugo Pagination: Symbol Previous Next

Changes

That code above is using:

  • symbol « instead of previous word.

  • symbol » instead of next word.

Notice that, we also have additional stylesheet named

  • blog_previous, and

  • blog_next

5: Stylesheet: Before and After

Consider define these pagination classes:

.blog_previous {
  span:after,
  a:after {
    content: " previous"
  }
}

.blog_next {
  span:before,
  a:before {
    content: "next "
  }
}

And add the new scss in main file.

@import
  ...

  // custom
    "layout",
    "decoration",
    "list",
    "pagination"
;

Browser: Pagination Preview

Hugo Pagination: Stylesheet Before After

6: Stylesheet: Responsive

Pure CSS

You can make this responsive by using standard css

@media only screen and (min-width: 768px) {
  ...
}
@media only screen and (min-width: 768px) {

  .blog_previous {
    span:after,
    a:after {
      content: " previous"
    }
  }

  .blog_next {
    span:before,
    a:before {
      content: "next "
    }
  }

}

Bootstrap Mixins

By the help of mixins/breakpoints, we can rewrite it in bootstrap style.

@include media-breakpoint-up(md) {
  ...
}
@include media-breakpoint-up(md) {

  .blog_previous {
    span:after,
    a:after {
      content: " previous"
    }
  }

  .blog_next {
    span:before,
    a:before {
      content: "next "
    }
  }

}

Do not forget to add mixins/breakpoints. So we have the complete main.scss as below.

@import
  // taken from bootstrap
    "sticky-footer-navbar",
    "blog",
    "bootstrap-custom",

  // variables
    "bootstrap/functions",
    "variables",
    "bootstrap/variables",
    "bootstrap/mixins/breakpoints",

  // custom
    "layout",
    "decoration",
    "list",
    "pagination"
;

7: Math: Algebra

Assumption

Consider an example, a blog post contain ten posts.

# CONST

$totalPost   = 10

Equation

And change the number of page for each pagination, by number for example: 1, 2, 5, 7, and 10.

  {{ $paginator := .Paginate (where .Site.Pages "Type" "post") 2 }}
  {{ partial "pagination-number.html" (dict "p" $paginator) }}

Do not worry! $paginator do the math internally.

Table

We can also achieve $totalPages by ceiling division. And the result is on this table below.

# ALGEBRA

+--------------+-------+-------+-------+-------+-------+
| $pagination  |   1   |   2   |   5   |   7   |  10   |
+--------------+-------+-------+-------+-------+-------+
| VARIABLE                                             |
| $division    | 10.0  |  5.0  |  2.0  |  1.4  |   1   |
| $totalPages  |  10   |   5   |   2   |   2   |  N/A  |
+--------------+-------+-------+-------+-------+-------+

Of course, we do not need to show any pagination, if there is only one page for all result. That is why we can optionally, convert 1 into N/A.

What is Next ?

Do not get confused yet. Keep calm, just like this cute kitten. Our pagination tutorial still have some materials to go.

adorable kitten

There are, some interesting topic about Pagination in Hugo. Consider continue reading [ Hugo - Pagination - Adjacent ].

Thank you for reading.