{{ if .IsHome }} and pagination

support
1

So I want to display my first 5 posts as a nice little banner header thingy, and then the rest of the posts after that as regular cards.

No problem, I got that.

The problem is those first 5 posts are displayed outside of the paginated range, and so they appear on every page.

I tried wrapping them in {{ if .IsHome }} but it turns out every variation of the index page counts as home (in other words site.com/ and site.com/page/2 are both considered by Hugo to be a home page).

I tried using @pointyfar’s {{ if and .IsHome ( eq $paginator.PageNumber 1 ) }}, but that fails because this is happening outside of the paginated range.

Should I just put it inside the pagination? How would I write it?

Here’s the code in question, in its entirety:

{{ define "main"}}

{{ $paginator := (.Paginate (after 5 (where site.RegularPages "Section" "eq" "articles"))).Pages }}

	{{ if and .IsHome (eq $paginator.PageNumber 1) }}
		<div class="flex flex-col sm:flex-row justify-evenly container-break" style="max-width:98vw">
			{{ range $index, $element := first 5 (where site.RegularPages "Section" "eq" "articles") }}
				
				{{ $img := "" }}
				{{ with .Params.images }}
					{{ range first 1 . }}
						{{ $resource := printf ("images/%s") . }}

						{{ $img = ((resources.Get $resource).Resize "x500 q85 jpg").RelPermalink }}
					{{ end }}
				{{ else }}
					{{ $img = ((resources.Get "images/stand-in.jpg").Resize "x500 q85 jpg").RelPermalink }}
				{{ end }}
				
				<a href="{{ .Permalink }}" class="h-96 rounded-lg flex flex-col justify-end bg-center bg-cover sm:w-1/6 my-5 md:my-0 mx-2 md:mx-0 bg-gray-900/70 shadow transition-all duration-200 hover:bg-pink-900/30 filter bg-blend-overlay" style="background-image:url('{{- $img -}}');">
					<span class="text-white hover:text-pink-300 px-5 py-2 text-xl text-center">
						{{ .Title }}
					</span>
					<hr class="border-t border-pink-200 w-1/2 mx-auto">
					<span class="py-2 text-center text-pink-100 text-sm">
						{{ .Date.Format "January 02, 2006" }}
					</span>
				</a>
			
			{{ end }}
		</div>
	{{ end }}

		<section class="container-break my-10 w-full flex flex-wrap justify-evenly px-5 text-lg sm:text-xl" style="max-width:98vw">
			{{ range $paginator }}
				
		    <div class="w-full sm:w-1/4 px-8 py-4 m-5 bg-white rounded-lg shadow-md ">
		        <div class="flex items-center justify-between">
		            <span class="text-sm font-light text-gray-600 ">{{ .Date.Format "Jan 02, 2006" }}</span>
		            <span class="px-3 py-1 text-sm font-bold text-red-900 bg-rose-200 rounded">{{ with .Params.categories }}{{ delimit . " " }}{{ end }}</span>
		        </div>

		        <div class="mt-2">
		            <a href="{{ .Permalink }}" class="text-2xl font-bold text-gray-700  hover:text-gray-600  hover:underline">{{ .Title }}</a>

		            <a href="{{ .Permalink }}">
									{{ $img := "" }}	
									{{ with .Params.images }}
										{{ range first 1 . }}
											{{ $src := printf ("images/%s") . }}
											{{ $img = (resources.Get $src).Fill "400x100 smart q85 webp" }}
											<img src=" {{ $img.RelPermalink }}" height="{{ $img.Height }}" width="{{ $img.Width }}" class="rounded my-5 w-full">
										{{ end }}
									{{ end }}
								</a>

		            <p class="mt-2 text-gray-600 ">{{ .Summary }}</p>
		        </div>
		        
		        <div class="flex items-center justify-between mt-4">
		            <a href="{{ .Permalink }}" class="text-pink-600  hover:underline"><i class="fa-light fa-cat"></i>&nbsp;Read more</a>

		            <div class="flex items-center">
		                <img class="hidden object-cover w-10 h-10 mx-4 rounded-full sm:block" src='{{ (( resources.Get "images/avatar.jpg" ).Fill "125x125 q65 webp").RelPermalink }}' alt="avatar">
		                <span class="font-bold text-gray-700">{{ .Site.Params.author }}</span>
		            </div>
		        </div>
		    </div>

			{{ end }}
		</section>

{{ partial "paginate" . }}

{{ end }}

Here’s the repo: GitHub - remysheppard/gabby-the-tabby

Here’s the live demo: https://gabby-the-tabby.netlify.app

Built using Hugo and Tailwind 3

2

Use the paginator’s PageNumber method to determine the current pager.

{{ $p := where site.RegularPages "Type" "post" }}
{{ $p1 := first 5 $p }}
{{ $p2 := after 5 $p }}
{{ $paginator := .Paginate $p2 }}

{{ if eq $paginator.PageNumber 1 }}
  {{ range $p1 }}
    <a href="{{ .RelPermalink }}">{{ .Title }}</a><br>
  {{ end }}
{{ end }}

{{ range $paginator.Pages }}
  <a href="{{ .RelPermalink }}">{{ .Title }}</a><br>
{{ end }}

{{ template "_internal/pagination.html" . }}
6 Likes
3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.