Splitting long listing pages

Hello all,

I have a quite old blog, ~4300 posts, or so, so I migrated to github+hugo, I hacked a bit a theme to get a nice one, and everything is working fine… but.

I converted the first chunk of 280 posts from Blogger’s atom to md (just to test my script), and everything went fine , with the only problem that the home page contains… a list of 280 posts. Now I have ~4000 posts to migrate to get all the archives online again.

I guess a 4300-items home page could be “too much” for lot of people :slight_smile: , so my problem is to split the home page. I can’t find an example of template code able to split the home page, at least a working one.

Could anyone show my the way to paginate , let’s say, 10 post at a time?

thanks in advance

Uriel


http://uriel-fanelli.github.io

There’s better support for pagination in v0.13. Take a look at http://gohugo.io/extras/pagination/ and see if that helps.

I want to make sure that I understand you. Are you after a way to limit the number of posts that appear on the home page (maybe the most recent 10) and then have a set of pages that lists all of the posts? Or do you want the home page to be the first of a set of pages that lists all the posts?

Here’s the simplest example I could think of that shows both ways.

<!DOCTYPE html>
<html>
<body>
  <!-- list of most recent pages on the home page -->
  {{ range first 10 .Data.Pages }}
    <h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
  {{ end }}
<hr />
  <!-- list of pages for the home page -->
  {{ template "_internal/pagination.html" . }}
</body>
</html>

It’s not useable as is since you’ll need templates for the sections, too.

Hi, first thanks for answering. :slight_smile:

Are you after a way to limit the number of posts that appear on the home
page (maybe the most recent 10) and then have a set of pages that lists
all of the posts? Or do you want the home page to be the first of a set
of pages that lists all the posts?

I want to keep the old content available, avoiding a 50Mb homepage. So the idea is to have
a page which shows the last then, with a button like “older posts”, and when not the oldest, also the “prev posts”.

The problem is not how to loop or request the first 10 pages, the problem is to force hugo to generate , assuming 10 post per page, 4000/10 “interstitial” pages, each one with 10 posts…


http://uriel-fanelli.github.io

Pagination is the solution you’re after. Take the pagination template in my example as a starting point. You’ll need to work with the list template to make things look the way you wish (either a summary or complete entry for each post). All are documented on the Hugo site. Take a look and let us know if you have any questions.

Also look at this theme:

Similar layout as yours, with pagination added.

2 Likes

I’ve just recently added this to my site too. I had a bit of trouble with the Hugo docs on pagination until i saw someone else’s example on this forum and finally understood how it works.

The built-in template works, but i wanted to customise it a little and make it a bit smarter. Here’s the pagination.html page i added to my theme’s layouts/partials directory:

{{ $pag := $.Paginator }}
{{ if gt $pag.TotalPages 1 }}
   <nav class="pagination">
    <h2>Page:</h2>
    <ul>
     {{ if $pag.HasPrev }}
     <li><a href="{{ $pag.First.Url }}">Newest</a></li>
     <li><a href="{{ $pag.Prev.Url }}">Newer</a></li>
     {{ end }}
     {{ range $pag.Pagers }}
     <li{{ if eq . $pag }} class="current"{{ end }}><a href="{{ .Url }}">{{ .PageNumber }}</a></li>
     {{ end }}
     {{ if $pag.HasNext }}
     <li><a href="{{ $pag.Next.Url }}">Older</a></li>
     <li><a href="{{ $pag.Last.Url }}">Oldest</a></li>
     {{ end }}
    </ul>
   </nav>
{{ end }}

This improves on the built-in template in the following ways:

  • Is only inserted into the HTML when there is more than one page of content.
  • If the page is the first page of content then the “newest” and “newer” links don’t appear.
  • If the page is the last page of content then the “older” and “oldest” links don’t appear.
  • The current page number has the “current” class attached to its list tag and can be styled differently.

If your theme isn’t HTML5 change the <nav> tag to a <div> (or similar).

To make use of this pagination code all my blog markdown files in the content/blog directory. In my theme’s layouts/section/blog.html page i have the following:

{{ partial "header-begin.html" . }}
{{ partial "rsslink.html" . }}
{{ partial "header-end.html" . }}
 <body>
{{ partial "navbar.html" . }}
    <div id="container">
     {{ $paginator := .Paginate (where .Data.Pages "Section" "blog") }}
     {{ range $paginator.Pages }}
	 <article class="post">
	  <header>
	   <h2>
	    <a href="{{ .Permalink }}">
        {{ .Title }}
        </a>
       </h2>
	    <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z" }}">
	     <span class="day">{{ .Date.Format "02" }}</span>
	     <span class="month">{{ .Date.Format "Jan" }}</span>
	     <span class="year">{{ .Date.Format "2006" }}</span>
	     <span class="time">{{ .Date.Format "15:04" }}</span>
	    </time>
	    <span class="author">by {{ .Params.author }}</span>
      </header>
     {{ .Content }}
     </article>
     {{ end }}
     {{ template "theme/partials/pagination.html" . }}
    </div>
{{ partial "footer.html" . }}

You can see the result on my blog (although it’s not a particularly interesting one).

1 Like