× Home
Use pagination several times on one website

Hugo - Pagination for blog posts and tags

Use Hugo Pagination multiple times on one website

And it can be done - use pagination multiple times on a website. With the help of Joe Mooring, I created different pagination for my blog posts on the home page and for the tag list.

Conditionally instantiate multiple pagination. This does not succeed in a Partial, but in the baseof.html. In a Partial it is too late to create instances.

The need for at least 2 pagnination on a website exists for most blogs. I found no reference in the Hugo doc to allowing more than one pagination. Fortunately there is the Hugo Forum and - Joe Mooring - with his extensive knowledge and the following solution.

Hugo - Instantiating two pagination

The baseof.html is used as the first template each time it is generated. Therefore, instantiating pagination is possible. In my case, I only need 2 pagination, but more should be possible.

Hugo baseof.html Paginate

In the baseof.html insert the following source code:

<head>
..
{{ $paginator := slice }}
{{ if .IsHome }}
  {{ $paginator = .Paginate (where .Site.RegularPages "Section" "blog") }}
{{ else }}
  {{ $paginator = .Paginate .Pages }}
{{ end }}
..
</head>

With slice an array variable is created. When the home page (IsHome) is created, all pages from the section blog are stored in the array variable by .Paginate.

The number of elements per page

The default number of elements per page for a pagination is 10. This is too much for my few blog posts. Therefore, I have specified the number with paginate = 4 in the configuration file config.toml. For testing the pagination, the value there can also be 1. The Hugo server must be restarted after a change to the configuration.

Home - Calling the Pagination

My multilingual start pages are stored in the /themes/tekki/layouts/ directory.

themes/tekki
|__  
|__layouts
   |__index.html
   |__index.en.html
   |__partial
      |__blogTeaser.html

Home - index.html

The German and English versions differ only in the language displayed. Both have in common the call to the partial blogTeaser.html.

{{- define "main" -}}
<div class="content-header">
  <div class="container">
    <h1>Ein Blog über Hugo, Webdesign, CSS/SCSS, ..</h1>
    <p>Tipps und Tricks rund um den statischen Webseitengenerator Hugo.</p>  
  </div>
</div>
{{- partial "blogTeaser.html" . -}}
{{- end -}}

Home - Partial blogTeaser.html

The source code of blogTeaser.html is very clear and looks like this:

{{- range .Paginator.Pages -}}
{{- partial "articleTeaser.html" . -}}
{{- end -}}
{{- template "_internal/pagination.html" . -}}

In the partial articleTeaser.html, the teaser data of the individual blog posts are displayed. Then the Hugo internal template _internal/pagination.html is called up. The Hugo Generator assembles the respective pagination from this call. This magic of Hugo fascinates me again and again.

List of Tag Articles - Calling Pagination

My existing tags are displayed on an overview page in several colours. As soon as a tag is clicked on, the template tag.html is called, which in turn calls the partial tagTeaser.html.

themes/tekki
|__  
|__layouts
   |__partials
      |__tagTeaser.html
   |__taxonomy
      |__tag.html

List of Tag Articles - Template tag.html

{{- define "main" -}}
<section class="container tag">
  <h1>
    <span class="tag-icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-tags" viewBox="0 0 16 16">
        <path d="M3 2v4.586l7 7L14.586 9l-7-7H3zM2 2a1 1 0 0 1 1-1h4.586a1 1 0 0 1 .707.293l7 7a1 1 0 0 1 0 1.414l-4.586 4.586a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 2 6.586V2z"/>
        <path d="M5.5 5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm0 1a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM1 7.086a1 1 0 0 0 .293.707L8.75 15.25l-.043.043a1 1 0 0 1-1.414 0l-7-7A1 1 0 0 1 0 7.586V3a1 1 0 0 1 1-1v5.086z"/>
      </svg>
    </span>
    #{{- .Title -}}
  </h1>
  <div class="tagArticle">
    <p class="tagHint">{{- T "tagHint1" -}}<span>#{{- .Title -}}</span>{{- T "tagHint2" -}}</p>
  </div>
</section>
{{- partial "tagTeaser.html" . -}}
{{- end -}}

I have described the inclusion of SVG graphics in the article - Use free Bootstrap SVG Icons in Hugo - described.

Because of the multilingual texts, the Hugo T function (Translate) is used. This is followed by calling the partial tagTeaser.html.

List of Tag Articles - Partial tagTeaser.html

This is where the pagination is included. The content of tagTeaser.html is identical to blogTeaser.html. Identical source code should not really be used, but for me the partial name is clearer as a result. You don’t look at the code all the time and after half a year I have forgotten what I did back then.

{{- range .Paginator.Pages -}}
{{- partial "articleTeaser.html" . -}}
{{- end -}}
{{- template "_internal/pagination.html" . -}}

The SCSS for pagination

According to - Hugo Docu - the easiest way to integrate pagination into your own source code is to include the _internal/pagination.html template provided by Hugo. The template automatically has a Bootstrap compatible style. Since I use Bootstrap myself, I can’t say if this is really true without Bootstrap.

I have adapted the appearance of the pagination to my environment. What is in any case not included is a responsive style. The navigation is not suitable for upright smartphones and must be adapted accordingly.

.pagination {
  justify-content: center;

  .page-item.active {
    .page-link {
      background-color: var(--wk-linkactive-color) !important;
      border-color: unset;

      a {
        color: white;
      }
    }
  }
  li:nth-child(3) {
    margin-left: 1.0rem;
  }
  li:nth-last-child(2) {
    margin-left: 1.0rem;
  }
}
@media (max-width: 549.98px) {
  .pagination {
    li:first-child,
    li:nth-child(2),
    li:last-child,
    li:nth-last-child(2) {
      display: none;
    }
  }
  .pagination {
    li:nth-child(3) {  
      margin-left: 0;
    }
  }
}
@media (max-width: 399.98px) {
  .pagination {
    font-size: 0.7rem;
  }
}

In the general part, I have centred the pagination, adjusted the colour and given some elements a little more space. Up to a maximum width of 549.98px, I have switched off the display of various navigation elements. Otherwise it really doesn’t look nice. To make the whole thing suitable for even smaller displays - from 399.98px width then a smaller font.

Conclusion

Without the help of - Joe Mooring - I would not have been able to realise this. Since the solution is documented in the Hugo Forum, I didn’t really want to make this the subject of another blog post. A few months later I looked at the thread in the Hugo Forum again and at first I didn’t understand my own code and Joe’s code at all. By looking at it again, I also subsequently removed some things in my source that were superfluous. I hope that this article will help others to implement multiple pagination more easily.

Link list for this article

This might also interest you

|
6 minutes to read
0
This post was created with Hugo version 0.91.2.

With the German language setting, comments are not displayed in the English version of the website and vice versa.

© 2022 - Frank Kunert  -  About me
A service from webdienste-kunert.de