Create a pagination for a post list

Hello
I make my first hugo theme, and i try to make a pagination for my blog list but it does not work.

I put the paginate = 2 in my config.toml
And the paginator {{ range .Paginator.Pages }} in themes\sandbox\layouts\blog\list.html

{{ define "main" }}
<div class="container">
    <div class="section">
        <div class="content">
            <h1>{{ .Title }}</h1>
            {{ .Content }}
        </div>
        <div class="columns is-multiline">
            {{ range .Paginator.Pages }}

            <div class="column is-third">
                {{ partial "widgets/post-card.html" . }}
            </div>

            {{ end }}
        </div>
    </div>
</div>
{{ end }}

and a partial pagination in themes\sandbox\layouts\partials\widgets\pagination.html

{{ $pag := $.Paginator }}
{{ if gt $pag.TotalPages 1 }}
<nav class="pagination">
    <ul class="pagination-list">
        {{ with $pag.First }}
        <li>
            <a href="{{ .URL }}" class="pagination-link" {{ if not $pag.HasPrev }} disabled{{ end }}
                aria-label="First"><span aria-hidden="true">&laquo;&laquo;</span></a>
        </li>
        {{ end }}
        <li>
            <a href="{{ if $pag.HasPrev }}{{ $pag.Prev.URL }}{{ end }}" class="pagination-link" {{ if not $pag.HasPrev
                }} disabled{{ end }} aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
        </li>
        {{ $ellipsed := false }}
        {{ $shouldEllipse := false }}
        {{ range $pag.Pagers }}
        {{ $right := sub .TotalPages .PageNumber }}
        {{ $showNumber := or (le .PageNumber 3) (eq $right 0) }}
        {{ $showNumber := or $showNumber (and (gt .PageNumber (sub $pag.PageNumber 2)) (lt .PageNumber (add
        $pag.PageNumber 2))) }}
        {{ if $showNumber }}
        {{ $ellipsed = false }}
        {{ $shouldEllipse = false }}
        {{ else }}
        {{ $shouldEllipse = not $ellipsed }}
        {{ $ellipsed = true }}
        {{ end }}
        {{ if $showNumber }}
        <li><a class="pagination-link {{ if eq . $pag }}is-current{{ end }}" href="{{ .URL }}">{{ .PageNumber }}</a>
        </li>
        {{ else if $shouldEllipse }}
        <li class="pagination-link" disabled><span aria-hidden="true">&nbsp;&hellip;&nbsp;</span></li>
        {{ end }}
        {{ end }}
        <li>
            <a href="{{ if $pag.HasNext }}{{ $pag.Next.URL }}{{ end }}" class="pagination-link" {{ if not $pag.HasNext
                }}disabled{{ end }} aria-label="Next"><span aria-hidden="true">&raquo;</span></a>
        </li>
        {{ with $pag.Last }}
        <li>
            <a href="{{ .URL }}" class="pagination-link" {{ if not $pag.HasNext }}disabled{{ end }}
                aria-label="Last"><span aria-hidden="true">&raquo;&raquo;</span></a>
        </li>
        {{ end }}
    </ul>
</nav>
{{ end }}

But my list don’t show the pagination do you know why ?

You check my code on github

You need to call the partial that generates the pager navigation.

{{ partial "widgets/pagination.html" . }}
1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.