How to set pagination while blogs grow more and more?

[looker53]

when I get too many posts, how to load them page by page

[kubido]

Since the current theme only displaying "see more" to the identifier root page.

I manage to do pagination like this in layouts/index.html:

{{ partial "header.html" . }}
<section class="main">
    <div class="container">
        <div class="content">
            {{ if .Content }}
                <div class="markdown">
                    {{ .Content }}
                </div>
            {{ end }}
            {{ $totalpostscount := len (where .Data.Pages "Section" "blog") }}
            {{ $latestpostscount := .Site.Params.latestpostscount | default $totalpostscount }}
            {{ if gt $latestpostscount 0 }}
                <div class="page-heading">{{ i18n "latestPosts" }}</div>
                <ul>

                    {{ $paginator := .Paginate (where .Data.Pages.ByPublishDate.Reverse "Section" "blog") .Site.Params.latestpostscount }}
                    {{ range $paginator.Pages }}
                        {{ partial "li.html" . }}
                    {{ end }}

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

                </ul>
            {{ end }}
        </div>
    </div>
</section>
{{ partial "footer.html" . }}

[pgrandinetti]

The suggestion above didn't work for me.

Here's how I've changed the index.html (entire file)

{{ partial "header.html" . }}
<section class="main">
    <div class="container">
        <div class="content">
            {{ if .Content }}
                <div class="markdown">
                    {{ .Content }}
                </div>
            {{ end }}

            <div class="page-heading">{{ i18n "latestPosts" }}</div>
            <div style="padding-bottom:20px;">
                {{ $pag := .Paginate (where site.RegularPages "Type" "in" "blog") .Site.Params.Paginate }}
                <ul>
                {{ range $pag.Pages }}
                    {{ partial "li.html" . }}
                {{ end }}
                </ul>
            </div>

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

        </div>
    </div>
</section>
{{ partial "footer.html" . }}

Additional changes:

• Added paginate = 10 into config.toml. Use lower number to test.
• Added newerPosts and olderPosts into i18n/en.yaml

Commit is here: https://github.com/pgrandinetti/cocoa-hugo-theme/commit/99ed865ea5f826fcc200cad30fb317e785ab6f42 Let me know if you'd like a PR @nishanths

[nishanths]

Thanks, that would be good. But I also like the old behavior because it displays all links on a single page when See more is clicked, and would like to preserve it too.

I can merge a PR that does something like below, if you can find time.

{{ if isset .Site.Params "paginate" }}
... new pagination code ...
{{ else }}
... old code ...
{{ end }}

[pgrandinetti]

@nishanths I will! Though the reason why I implemented it like that is that the "old way" didn't work for me. When I check the $totalpostscount variable is not set correctly from within the template. Not totally sure why though. Anyway I'll implement the if/then/else and let you know.

[nishanths]

When I check the $totalpostscount variable is not set correctly from within the template. Not totally sure why though. Anyway I'll implement the if/then/else and let you know.

Thanks for reporting this. I'm also seeing the issue with $totalpostscount. I'll look into it more. We can just keep the broken $totalpostscount code in the if/else for now though.

[pgrandinetti]

@nishanths I believe that was a syntax bug. I fixed it and enabled both options in this PR: https://github.com/nishanths/cocoa-hugo-theme/pull/151

I think you were trying to do an "infinite-scrolling"-like page, but without ajax. So that's what my PR does. I left a comment there in.

[pgrandinetti]

Cool, This can be closed!

[nishanths]

Thank you, missed it.