Making a pager partial that works with paginators and section navigation

support
1

I’m currently in the process of refactoring the Beautiful Hugo theme to remove some of the repetition in the templates. There is some enticingly similar code that I would like to move into a partial template, but I can’t quite make it work.

In layouts/index.html:

{{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
  <ul class="pager main-pager">
    {{ if .Paginator.HasPrev }}
      <li class="previous">
        <a href="{{ .Paginator.Prev.URL }}">&larr; {{ i18n "newerPosts" }}</a>
      </li>
    {{ end }}
    {{ if .Paginator.HasNext }}
      <li class="next">
        <a href="{{ .Paginator.Next.URL }}">{{ i18n "olderPosts" }} &rarr;</a>
      </li>
    {{ end }}
  </ul>
{{ end }}

In layouts/post/single.html:

<ul class="pager blog-pager">
  {{ if .PrevInSection }}
    <li class="previous">
      <a href="{{ .PrevInSection.Permalink }}" data-toggle="tooltip" data-placement="top" title="{{ .PrevInSection.Title }}">&larr; {{ i18n "previousPost" }}</a>
    </li>
  {{ end }}
  {{ if .NextInSection }}
    <li class="next">
      <a href="{{ .NextInSection.Permalink }}" data-toggle="tooltip" data-placement="top" title="{{ .NextInSection.Title }}">{{ i18n "nextPost" }} &rarr;</a>
    </li>
  {{ end }}
</ul>

When I tried to make this into one partial, I ran into problems with .Paginator.Prev.URL in index.html. If you just try to pass it to a partial as-is, you get an error because .Paginator.Prev is nil if there is no previous page. (And the same with .Paginator.Next.URL if there is no next page.) Is there a neat way of doing this?

2

I’ve managed to make a version that works, so I’ll share it here in case anyone finds it useful. I now have the following code:

layouts/partials/pager.html:

{{ if or .HasPrev .HasNext }}
  <ul class="pager {{ .Class }}">
    {{ if .HasPrev }}
      <li class="previous">
        <a href="{{ .PrevURL }}"{{ if .PrevTitle }} data-toggle="tooltip" data-placement="top" title="{{ .PrevTitle }}"{{ end }}>&larr; {{ i18n .PrevMessage }}</a>
      </li>
    {{ end }}
    {{ if .HasNext }}
      <li class="next">
        <a href="{{ .NextURL }}"{{ if .NextTitle }} data-toggle="tooltip" data-placement="top" title="{{ .NextTitle }}"{{ end }}>{{ i18n .NextMessage }} &rarr;</a>
      </li>
    {{ end }}
  </ul>
{{ end }}

In layouts/index.html:

{{ partial "pager.html" (dict "Class" "main-pager" "HasPrev" .Paginator.HasPrev "HasNext" .Paginator.HasNext "PrevURL" (default (dict "URL" "") .Paginator.Prev).URL "NextURL" (default (dict "URL" "") .Paginator.Next).URL "PrevMessage" "newerPosts" "NextMessage" "olderPosts" ) }}

In layouts/post/single.html:

{{ partial "pager.html" (dict "Class" "blog-pager" "HasPrev" .PrevInSection "HasNext" .NextInSection "PrevURL" (default (dict "Permalink" "") .PrevInSection).Permalink "NextURL" (default (dict "Permalink" "") .NextInSection).Permalink "PrevMessage" "previousPost" "NextMessage" "nextPost" "PrevTitle" (default (dict "Title" "") .PrevInSection).Title "NextTitle" (default (dict "Title" "") .NextInSection).Title ) }}

The calls to the partial are not the cleanest, so I’m still trying to find a way to make them neater, but this at least gets the job done.