Adding a menu messed up the blog posts

support
1

So I am currently working on this site: http://hugo.bitballoon.com/
It’s the first time I use Hugo and I don’t really have a full grasp of everything I’m doing yet.

So today I tried to implement a navigation menu, which I did and it works just fine. The problem is that when I did this, the posts on the index page stopped getting displayed in batches of 5. Instead there’s now a random amount of blog posts on each page. I have no idea of what I did to cause this. I have tried deleting the new code I added, but I couldn’t make it work.

Here’s how it looks now: http://something-is-wrong.bitballoon.com/
Notice that there’s only 2 posts being displayed on the first page.

Here’s my code at the moment for the parts I changed:

header.html:

The code I used for making the nav menu is from: https://gohugo.io/extras/menus/#section-menu-for-the-lazy-blogger:4044c7430755cd64e5b7c48e836cea57

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>{{ .Title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
  </head>

  <body>

    <div id="content" class="menu">
    <a href="#" id="menu-toggle-js">
      <div id="menu-bar-title">{{ .Site.Title }}</div>
      <div id="menu-bar-text">MENU</div>
    </a>

    <div>
      <nav class="menu-side">
        <div id="site-desc">
          <h1 id="site-header"><a href="{{.Site.BaseURL}}">{{ .Site.Title }}</a></h1>
          <p>
            This is a description of my website. It will be a couple of lines just to explain what it is all about.
          </p>
        </div>
        <ul>
          {{ $currentNode := . }}
          {{ range .Site.Menus.main }}
          <li><a class="navlink{{if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} active{{end}}" href="{{.URL}}">{{ .Name }}</a></li>
        {{ end }}
        </ul>
      </nav>
    </div>
    <div class="box">

index.html:

{{ partial "header.html" . }}
      <main>
        {{ range (.Paginator 5).Pages }}
        {{ if eq .Type "post" }}
        <div class="blog-post post">
          <h2><a href="{{ .RelPermalink }}"><img src="/img/post.png" class="post-img"/>{{ .Title }}</a></h2>
          <p>{{ .Description }}</p>
        </div>
        {{ end }}  
        {{ if eq .Type "link" }}
        <div class="link-post post">
          <h2><a href="{{ .Params.tags }}" target="_blank"><img src="/img/link.png" class="post-img"/>{{ .Title }}</a></h2>
          <p>{{ .Description }}</p>
        </div>
        {{ end }}
        {{ end }}
        {{ partial "pagination.html" .Paginator }}
      </main>
{{ partial "footer.html" . }}

single.html:

{{ partial "header.html" . }}
    <main>
      {{ if eq .Type "post" }}
      <div class="blog-post post">
        <h2>{{ .Title }}</h2>
        <small>{{ .Date.Format "Mon, Jan 2, 2006" }}</small>
        <p>{{ .Content }}</p>
      </div>
      {{ end }}  
      {{ if eq .Type "link" }}
      <div class="link-post post">
        <h2><a href="{{ .Params.tags }}" target="_blank"><img src="/img/link.png" class="post-img"/>{{ .Title }}</a></h2>
        <small>{{ .Date.Format "Mon, Jan 2, 2006" }}</small>
        <p>{{ .Description }}</p>
      </div>
      {{ end }}
      {{ if eq .Type "s" }}
      <div class="static-post post">
        <h2>{{ .Title }}</h2>
        <small>{{ .Date.Format "Mon, Jan 2, 2006" }}</small>
        <p>{{ .Content }}</p>
      </div>
      {{ end }}
    </main>
{{ partial "footer.html" . }}

config.toml:

This is the part I added.

SectionPagesMenu = "main"
  [[menu.main]]
        name = "About"
        weight = -110
        identifier = "about"
        url = "/s/about/"

  [[menu.main]]
        name = "Contact"
        weight = -110
        identifier = "contact"
        url = "/s/contact/"

  [[menu.main]]
        name = "Portfolio"
        weight = -110
        identifier = "portfolio"
        url = "/s/portfolio/"

  [[menu.main]]
        name = "Links"
        weight = -110
        identifier = "links"
        url = "/s/links/"
2

It looks like http://hugo.bitballoon.com/ has 3 more posts than http://something-is-wrong.bitballoon.com/. Notice that the pagination is showing the last page of the pagination listed in ascending order. I think you want to reverse the order.

Also, you may want to rethink your {{ range ...}}{{ if eq .Type "post" }} construct. You should probably do something like this instead:

{{ $paginator := .Paginate (where .Pages "Type" "post") 5 }}

You want to get the list of posts first, and then do pagination.

3

What do you mean? The posts are showing up in the right order for me, just not in the right amount per page.

But how does that work? Doesn’t that just list 5 pages with the type of “post”? I need it to mix pages with different types on the index page. Could you show how to implement it in my code?

I am really bad at Golang and I’m a total newbie to static generators.

4

Sorry, you’re right on the range clause. I didn’t notice the other types.

But back to the main issue: can you post your pagination.html template?

5 
  <div class="pagination">
  {{ if .HasNext }}<div class="pagination-button">
      <a href="{{ .Next.URL }}">&laquo; Older Posts</a>
    </div>{{ else }}<div class="pagination-button-off">
      <a href="#">&laquo; Older Posts</a>
    </div>
    {{end}}

    <div id="page-numbers">Page {{ .PageNumber }} of {{ .TotalPages }}</div>

  {{ if .HasPrev }}<div class="pagination-button">
      <a href="{{ .Prev.URL }}">Newer Posts &raquo;</a>
    </div>
    {{ else }}<div class="pagination-button-off">
      <a href="#">Newer Posts &raquo;</a>
    </div>
    {{end}}
  </div>
6

I still think the problem is that you need to reverse the order. Something like:

{{ range (.Paginate .Data.Pages.Reverse 5).Pages }}
7

That just put the oldest post on the first page, it did not solve anything.

The way I had it before worked great before I added the menu part. So I don’t think that is the problem.