Need Help About Permalink And Pagination Issue

support
1

Dear All

I’ve read Hugo documentation and some thread here, but I still get an issue.

I want to setting my permalink to this:
mysite.netlify.com/my-title/

Also I want to limit post from default 10 posts per page to only 6 posts per page with this pagination slug on blog:
mysite.netlify.com/blog/ <- 6 posts here
mysite.netlify.com/blog/2/ <- 6 posts here
mysite.netlify.com/blog/3/ <- 6 posts here

This is my repo:

Regards

3

For pagination, you’re best off using the built in pagination functions and variables in /layouts/_default/main.html.

5

It’s mean that adding paginate = 6 at config.yaml file isn’t enough?

6

paginate=6 will do what you want - IF your theme implements pagination correctly.

If you want to show your site at mysite.netlify.com/my-title and then subpages at mysite.netlify.com/my-title/blog/2 and so on then you use the baseURL parameter in the config.toml.

If however your blog should not have the my-title part then you need to create a single page at content/my-title and forward the homepage to my-title (via _headers file in netlify)

7

Thanks for your reply. By the way about blog page, it’s not like that. I mean, mysite,netlify,com/my-title/ is only for every single post. I fixed this issue for single post.

But for pagination, I need this is structure:

Home page:
mysite,netlify,com with about page (not to blog archive page) <- no issue here

Blog archive page:
mysite.netlify.com/blog/ mysite.netlify.com/blog/2/
mysite.netlify.com/blog/3/
etc

Not like this:
mysite.netlify.com/blog/ mysite.netlify.com/blog/page/2/
mysite.netlify.com/blog/page/3/
etc

On my config.yaml, I changed from default paginatePath: “/page/” to paginatePath: "/"

Is that a right way?

8

Hi,

A few things I want to point out. Pagination docs reference: Pagination | Hugo

  1. Pagination is supported only on homepage and list pages, which includes section pages (ref: see link above).
  2. yoursite.com/blog/ is being rendered from your content/blog.md.
    content/blog.md is a regular single page. This is not a section page / list type page. Therefore you cannot have pagination on this page. Read about sections here: Sections | Hugo
  3. You do not currently have a list template. Therefore Hugo has no means of rendering list-type pages, such as section pages. You can see this when you run hugo server on your site, you probably see some warnings on the console saying something like
WARN ... found no layout file for "HTML" for "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
  1. You really need to read the Pagination docs. It discusses how to add pagination to your page under Build the navigation. For example:

The easiest way to add this to your pages is to include the built-in template (with Bootstrap -compatible styles):

{{ template "_internal/pagination.html" . }}

Again, you need to add this to a list template. Read about list templates here: Lists of content in Hugo | Hugo

  1. This part of your code:
{{ $display_posts := ((.Site.GetPage "section" "/posts").Pages).ByDate }}
{{ range $post := $display_posts }}
...

only lists all the pages under /posts/. It is not for paginating, only for listing.

Why do you have a separate /blog/ page that displays the contents of /posts/? Why not just have the /posts/ pages under /blog/?

In any case, you need to create a list template. Then add pagination code to template (see point #4 above).

3 Likes
10

Thanks for answer. I changed the blog part from single page to blog folder with _index.md inside it. The paginator part is fixed. But the prev next code is not working.
Even when I change to this code:

      <nav class="pagination">
        <div class="nav-links">
          <a class="older-posts button" href="{{ $paginator.Prev.URL }}"><span class="icon-arrow-left" aria-hidden="true"></span></a>
          <a class="newer-posts button" href="{{ $paginator.Next.URL }}"><span class="icon-arrow-right" aria-hidden="true"></span></a>
        </div>
      </nav>

I still getting an error?

11

The error is probably because some pages will not have a .Prev or .Next. Page 1 for example will not have a .Prev, and the last page will not have a .Next. You should wrap them in a conditional to check first:

{{if $paginator.HasPrev}}<a class="older-posts button" href="{{ $paginator.Prev.URL }}"><span class="icon-arrow-left" aria-hidden="true"></span></a>{{end}}
{{if $paginator.HasNext}}<a class="newer-posts button" href="{{ $paginator.Next.URL }}"><span class="icon-arrow-right" aria-hidden="true"></span></a>{{end}}
1 Like
12

Wow, it works. Thank you so much.

13

So many thanks to @funkydan2 @davidsneighbour and @pointyfar

Your response really helps alot. I really love this community.