Best method to use class="somethingcustom" in body element for 404 page

1

I want my 404 page to be distinct from the rest of partials and templates, and it needs a custom class=“myspecialclass” attribute added to the baseof.html (or a higher level template).

How can I accomplish this best? Can I define something in the lower level templates that will override a higher level template? ex. a variable that is tested for presence in baseof.html, and defined in my 404.html.

2 
{{ if (eq .Kind "404") }}
    do 404 thing
{{ else }}
    not a 404
{{ end }}
3

Thank you Thomas, appreciated. I will try this!

I will also look into what is the neatest way to make the inheritance of blocks work across templates, as I defined a main block but the body is only inside the baseof.html template. I suppose I could override blocks as I see fit by simply including them in other templates or partials?

4

Hm, does not seem to be recognized:

{{ $body_class := "" }}
{{ if (eq .Kind "404") }}
{{ $body_class := "g-bg-gray-dark-v1 g-color-white" }}
{{ end }}

{{ $main_class := "" }}
{{ if (eq .Kind "404") }}
{{ $main_class := "g-height-100x g-min-height-100vh g-flex-centered g-pa-15" }}
{{ end }}

<body class="{{ $body_class }}">
  <main class="{{ $main_class }}">

from baseof.html

5 
{{ $body_class := "" }}
{{ if (eq .Kind "404") }}
{{ $body_class := 
                ^-- this should be "="  not ":="

Same for the $main_class assignment in the second if block.

6

you’re almost there. . .

{{ $body_class := "" }}
{{ if (eq .Kind "404") }}
{{ $body_class = "g-bg-gray-dark-v1 g-color-white" }}
{{ end }}

{{ $main_class := "" }}
{{ if (eq .Kind "404") }}
{{ $main_class = "g-height-100x g-min-height-100vh g-flex-centered g-pa-15" }}
{{ end }}

<body class="{{ $body_class }}">
  <main class="{{ $main_class }}">

Notice the = vs the :=.only the very 1st variable instantiation takes :=, when you update the variable afterwards you use =.

(saying that, question on the side for someone closer to the Hugo+Go templating core than I am, I’m almost halfway sure Hugo used to throw an error if you tried to := a variable more than once? Whereas here it just failed quietly.)

And back to @blableblu, your other question:

I suppose I could override blocks as I see fit by simply including them in other templates or partials?

It’s really up to you how you want to structure your templates. Speaking for myself, rather than start introducing IF conditionals into base.html, I would probably instead keep baseof to serve as the base of, well, everything, and that might well mean moving the <body> element out into single/list/404 templates so that each one can set it to what it wants without having to jump through hoops like these.

But I don’t want to say that’s the “only way” or the “the only right way” of doing it. . . the important thing is whether it works for you and doesn’t cause you trouble. If not, all good! If none of your other pages do anything with the body/main elements and it really is just the 404, it could maybe be easier in your particular case to do by just checking for 404 in baseof.

7

Ehm, not sure if I miss something here, but I have a 404.html in my layouts…

If the class needs to be added to the body tag of the page then have a look at the base template documentation:

You could do the following in the basetemplate:

<body class="{{ block "bodyclass" . }}defaultclass{{ end }}">

And in your 404 template:

{{ define "bodyclass" }}is--404{{ end }}

If other templates don’t define bodyclass then defaultclass is added.

1 Like
8

Hi. You can specify css_class in page’s front matter like so

{{ $css_classes := $st.Params.css_class | default "" }}

Or just use css.inline shortcode, at the bottom of markdown file

{{< css.inline >}}

<style> 
h3[id^=info] > a { text-decoration: none !important; 
color: #fc6f5c !important; } 
</style>

{{< /css.inline >}}