Pagination

support
1

Maybe I just don’t understand Go that well, but trying to figure out how to build a simple next and previous pagination on the homepage to the next list of blog posts. I’ve tried all that I can think of to get it working. It just doesn’t really seem to let me output much. I know I probably should put the limit of how many per pager, but not even sure how to do that at the moment. Just barely figuring out how to use the object stuff to actually pull the paramters (I think there should be some documentation on this, especially for non-Go users). The latest code I have used is:

{{ $paginator := .Paginate (where .Data.Pages "Type" "post") }}
{{ template "_internal/pagination.html" . }}
{{ range .Paginator.Pages }}
{{ $paginator.Prev }}{{ $paginator.Url }} {{ $paginator.Next }}
{{ end }}

I have also tried to keep it within the original range that I display my other post summaries, but it would give me errors about cannot use pagination in content areas. There aren’t enough other themes out there using it, so was curious if others were getting the same roadblocks as me.

2

There are themes using pagination, you do not need many, it’s a fairly binary feature. What you have inside the page range is wrong. You range over a list of pages (the current page in the paginator) - here you can show the title and maybe link to the page itself.

An example of the small change needed from a regular page listing to a paginated one:

An example from my site:

https://github.com/bep/bepsays.com/blob/master/layouts/index.ace

3

I will be able to check the code later tonight, but I think I see some different avenues to pursue that could correct it. I had checked a number of the themes on the spf13’s hugo theme repo, but the ones that used it tended to just use the internal reference to paginator and that was it. I never saw other modifications like I do in your theme. This is my first ever theme/site I’m building in hugo, so really coming at it from a newbie perspective. I’ve done themes/designs in a number of CMSes, just trying to build this new site in the hopes that I can use hugo more in the future. I’d like to move some of my jekyll ones to it if this proves doable.

4

Maybe I am confused on how this works, but I cannot seem to get any output whatsoever from the pagination, this is my full template code that outputs my listing of the posts (there are two posts, one with tags and one without tags):

{{ range .Paginator.Pages }}
{{ if eq .Type "post"}}

  <div class="post-title">
    <a class="post-title-link" href="{{ .Permalink }}">{{ .Title }}</a>
  </div>
  {{ if isset .Params "tag" }}
      <div class="tags">tags:</br>
        {{ range  .Params.tag }}<a class="tag-link" href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }} </a>
        {{ end }}
    </div>
    <div class="content-tags">{{.Summary}}</div>
  {{ end }}
  {{ else }}
    <div class="content-full">{{.Summary}}</div>
  {{ end }}

{{ end }}
{{ partial "pagination.html" . }}

The pagination partial looks like this:

<nav class="pagination">
    {{ template "_internal/pagination.html" . }} Test shows up
    {{ if gt .Paginator.TotalPages 1 }}
    <div class="summary">Test Doesnt shot up
      {{ .Paginator.PageNumber }} 
    </div>
    {{ end }}
</nav>

The only html from the pagination partial that outputs is the following:

<nav class="pagination">
    
     Test shows up
    
</nav>

I have even killed this:

{{ range .Paginator.Pages }}
{{ if eq .Type "post"}}

and replaced it with this:

    {{ range (.Paginate (where .Data.Pages "Section" "==" "post")).Pages }}

but that code breaks the output of summaries that have no tags associated with them. Somehow I think I am making this more complicated than it needs to be, but not sure where I am going wrong.

5

I pulled the code from the paginator from the purehugo theme and it works on my theme (still have to clean it up). For some odd reason, referencing the internal paginator never worked, but the code that purehugo uses manually redoes it all:

<div class="pagination">
  <nav role="pagination" class="post-list-pagination">
      {{ if .Paginator.HasPrev }}
      <a href="{{.Paginator.Prev.Url}}" class="post-list-pagination-item pure-button post-list-pagination-item-prev">
        <i class="fa fa-angle-double-left"></i>&nbsp;Newer
      </a>
      {{ end }}
    <span class="post-list-pagination-item post-list-pagination-item-current">Page {{.Paginator.PageNumber}} of {{.Paginator.TotalPages}}</span>
    {{ if .Paginator.HasNext }}
      <a href="{{.Paginator.Next.Url}}" class="post-list-pagination-item pure-button post-list-pagination-item-next">
        Older&nbsp;<i class="fa fa-angle-double-right"></i>
      </a>
    {{ end }}
  </nav>
</div>
6

These kinds of questions/problems is impossible to answer without the complete picture => a complete, failing project.

1 Like
7

Indeed. If it kept stop working, I probably would have put it up on a github to see if a second pair of eyes could see something I didn’t.