Can the first and last pages in next and prev be targeted?

support
1

I am using prev and next on my site chained with with. First page shows next button and last page shows previous button only. I want to style these buttons differently on these pages. Is it possible to target these excluding other pages where they appear together?

2

I am not 100% sure I get what you want, so here is a more verbose sample:

  • page 1: prev = nothing, next = page 2
  • page 2: prev = page 1, next = page 3
  • page 3: prev = page 2, next = nothing

You want to display the navigation on page 1 and page 3 different? I would use 2 approaches based on what exactly you want:

Method 1: If nothing still outputs “something” then target that via CSS (p::empty targets for instance all empty p tags…) — not a fan of this solution because it adds markup without much use.

Method 2: with has an else. If there is no prev navigation then you could do something in the else of the command and then you might have a way to add something like class="has-no-prev" to your output.

Ideas only. Add your layout for the prev/next navigation and we might be able to add.

3

Here you go

{{- $pages := (append .CurrentSection.Pages.ByWeight (slice .CurrentSection)).Reverse }}

{{ with $pages.Prev . }}
  <a href="{{ .RelPermalink }}">Previous</a>
{{ end }}

{{ with $pages.Next . }}
  <a href="{{ .RelPermalink }}">Next</a>
{{ end }}

These two links are joined together and bordered all around. Issue is that where both appear (pages 2 to 2nd last) the border width at the center is twice the size of the rest of the border. So, I would like to remove the border for one, but retain it for first and last pages.

4

You could use classes like so

a.previous + a.next {
  border-left: ...;
}

not a Hugo issue, though – HTML and CSS only.

5

I’m using this code to style Previous and Next differently when each is at the end of its range:

<div class="flex justify-center mt-8">
    <ul class="inline-flex -space-x-px text-base h-10 list-none">
      {{ with $pages.Prev . }}
        <li>
          <a href="{{ .RelPermalink }}" aria-label="Previous" class="w-30 flex items-center justify-center px-4 h-10 ms-0 leading-tight text-black bg-white border border-gray-300 rounded-s-lg hover:bg-red-600 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" role="button"><span aria-hidden="true">Previous</span></a>
        </li>
      {{ else }}
        <li>
          <a aria-label="Previous" class="w-30 flex items-center justify-center px-4 h-10 ms-0 leading-tight text-gray-400 bg-white border border-gray-300 rounded-s-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" role="button"><span aria-hidden="true">Previous</span></a>
        </li>
      {{ end }}

      {{ with $pages.Next . }}
        <li>
          <a href="{{ .RelPermalink }}" aria-label="Next" class="w-30 flex items-center justify-center px-4 h-10 leading-tight text-black bg-white border border-gray-300 rounded-e-lg hover:bg-red-600 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" role="button"><span aria-hidden="true">Next</span></a>
        </li>
      {{ else }}
        <li>
          <a aria-label="Next" class="w-30 flex items-center justify-center px-4 h-10 leading-tight text-gray-400 bg-white border border-gray-300 rounded-e-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400" role="button"><span aria-hidden="true">Next</span></a>
        </li>
      {{ end }}
    </ul>
  </div>

Is that what you were thinking?

6

That looks like Tailwind :slight_smile:

You want to have the PREV link be start/left and NEXT be end/right.

<li class="self-start"> and <li class="self-end"> for PREV and NEXT in both (with/else) should do the trick. I am not sure about the “inline-flex” in the UL - I would get rid of the UL at all and keep the LI and change into DIVs.

On the other side: It’s always just two items, not n items, so having two 50% divs that left and right aligned would do it too.

1 Like
7

Yes, it’s Tailwind plus Flowbite—my first experiment with each.

8

I find all these classes weird. It’s like writing CSS disguised in classes. Quite repetitive, too.

9

In my site, first page shows only the next button and last page the previous button. So, hence the need to target those pages individually. paginator and paginate have that ability, hence the question about prev-next.

10

It seems like you’re referring to the HasNext and HasPrev methods.

You can do the same thing with the Next and Prev methods on a page collection.

layouts/posts/list.html 
{{ $p := (site.GetPage "/posts").Pages.ByParam "foo" }}

{{ range $p }}
  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
layouts/posts/single.html 
{{ $p := (site.GetPage "/posts").Pages.ByParam "foo" }}

{{/* The Next and Prev anchor texts are intentionally reversed; see docs regarding this regrettable historic error */}}

{{ with $p.Next . }}
  {{ $class := "" }}
  {{ if not ($p.Prev $) }}
    {{ $class = "isLast" }}
  {{ end }}
  <a {{ with $class -}} class="{{ . }}" {{- end }} href="{{ .RelPermalink }}">Previous</a> {{ with $class }} (class={{ . }}) {{ end }}
{{ end }}

{{ with $p.Prev . }}
  {{ $class := "" }}
  {{ if not ($p.Next $) }}
    {{ $class = "isFirst" }}
  {{ end }}
  <a {{ with $class -}} class="{{ . }}" {{- end }} href="{{ .RelPermalink }}">Next</a> {{ with $class }} (class={{ . }}) {{ end }}
{{ end }}

git clone --single-branch -b hugo-forum-topic-54147 https://github.com/jmooring/hugo-testing hugo-forum-topic-54147
cd hugo-forum-topic-54147
hugo server
1 Like
11

True!

Thank you @jmooring. That is just what I was looking for.

12

Great. It’s a bit of brain-bender due to the next/prev reversal, but that’s a problem for another day.

1 Like
13

Indeed! This issue had me wracking my brain!

14

Off topic, but yeah, I’m not sure I’m liking everything about Tailwind or why it’s all the rage.

15

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