Scratch works everywhere but not on 1st page of pagination

support
1

For example I have index.html
That index have partials inside: head.html and pagination.html.
In head.html I have another partial file - style.css.

In pagination.html I’m using:
{{ $.Scratch.Set "pagi" true }}

In style.css I;m using:
{{ if $.Scratch.Get "pagi" }} {{ end }}

It works properly for every page on my blog, except for 1st page of pagination.

http://example.com/page/2/ IT WORKS!
http://example.com/ DOESN’T WORK

http://example.com/tags/something/page/2/ IT WORKS!
http://example.com/tags/something/ DOESN’T WORK

Does anyone know reason of that?

Should I use Dict? https://gohugo.io/templates/functions/#dict

EDIT:
My last discovery is:
If scratch is set before CSS partial file - then $.Scratch.Get in CSS file will work for all pages of pagination…
For example, like this:

{{ $.Scratch.Set "pagi" true }}
{{ partial "head.html" . }}
{{ partial "header.html" . }}
<main>
    {{ range ( .Paginate (where .Data.Pages "Type" "post")).Pages }}
    <a href="{{ .Permalink }}"><h2>░ {{ .Title }}</h2></a>
    <p>{{ .Params.description }}</p>
    {{ end }}
</main>
{{ partial "pagination.html" . }}
{{ partial "footer.html" . }}

And in this way will Not work:

{{ partial "head.html" . }}
{{ $.Scratch.Set "pagi" true }}
{{ partial "header.html" . }}
2

Of course you will have to set the value before using it. Otherwise, how it’s gonna work?

1 Like
3

pagi have value “true”
{{ $.Scratch.Set "pagi" true }}

and I’m able to check if it is true by using:
{{ if $.Scratch.Get "pagi" }}

So what is the problem? Do I need to create new variable and assign something to it?
Do I need to pass that variable with dict to my partial CSS file? // Documentation of dict is very poor.

In last two days I checked all results in google.
Also I downloaded entire Hugo Themes repository to find any examples and I found nothing because nobody is using CSS in similar way.

I really have no idea how to solve this problem.

Can you give me example how to “set value” that will be accessible before my partial CSS will load?

// And I am reminding that my current way does not work properly only for 1st page of pagination.

4

index.html

{{ $.Scratch.Set "pagi" true }}
{{ partial "head.html" . }}
{{ partial "pagination.html" . }}

partials/head.html

{{ partial "style.css" . }}

partials/style.css

{{ if $.Scratch.Get "pagi" }}
  .className {
    property: value;
  }
{{ end }}

partials/pagination.html

{{/* whatever you want to do */}}
1 Like
5

I don’t think dict has any use-case here.

1 Like
6

index.html

{{ partial "head.html" . }}
{{ partial "pagination.html" . }}

partials/head.html

{{ partial "style.css" . | safeCSS }}

partials/style.css

{{ if $.Scratch.Get "pagi" }}
some CSS here...
{{ end }}

partials/pagination.html

{{ if or $.Paginator.HasNext $.Paginator.HasPrev }}
{{ $.Scratch.Set "pagi" true }}
{{end}}

See? I set Scratch “pagi” after loading CSS partial file and this is the problem.
It doesn’t work properly for 1st page of pagination.

http://example.com/tags/something/page/3/ IT WORKS!
http://example.com/tags/something/page/2/ IT WORKS!
http://example.com/tags/something/ DOESN’T WORK

I don’t know if that is because of Hugo, because of Scoping of Scratch… or because I’m doing something wrong.

7

Then why are you doing that? :confused:

It’s working just as it’s supposed to do. You can’t GET the value before you SET it.

Put this part at the top of you index.html file. I showed you the exact thing in my previous comment. :confused:

1 Like
8

Ohhh… I think I understand it finally. Value is SET at the End of 1st page, so 1st page is not processed with that value, but every next page have access to that value :smiley:

Thanks for your patience and all your help :slight_smile:

1 Like
9

You can use {{ if gt .Paginator.TotalPages 1 }} directly in the style.css partial. No need for using Scratch.

1 Like