Define 404 page content in an .md file under the content/ directory

support
1

I am creating a 404 page for my website using the guide from the docs: Custom 404 page | Hugo

The docs mention

404 pages will have all the regular page variables available to use in the templates.

How can I define the contents of the 404 page in a Markdown file under the content directory?

I tried this, but it didn’t work:

content/404.md

---
foo: "bar"
---

layouts/404.html

<pre>{{ .Params.foo }}</pre>
2

For content specific to the 404 page I use a partial that I call from the 404 page template.

3

but the partial lives in the layouts/ directory, which doesn’t allow translations.

Since the 404 page should have all the regular page variables available, I don’t see why I cannot add the content in a content file in the content/ directory.

4

In that case, have you defined a template for your 404.md?

Under /layouts/404.html

5

Yes, as I described in the in my post :wink:

6

Can you please post the contents of your 404 template?

7

layouts/404.html

{{ define "body" }}
  <main class="page-404" data-transition="fadeIn">
    <div class="container">
      <div class="page-404-content">
        <h1>404. Sorry, the page was not found.</h1>
        <p>
          The page you are looking for doesn’t exists.<br>
          Please check your URL address.
        </p>
        <a class="go-home-button" href="{{ .LanguagePrefix | absURL }}">
          {{- i18n "goToHome" -}}
        </a>
      </div>
    </div>
  </main>
{{ end }}
8

I want to move the texts into a file under content/.

9

Right.

404.md is supposed to go directly under /content/

I don’t see how you call .Params.foo in your 404 template above.

If you are trying to use this parameter in the body of your 404.md you need to use a shortcode.

You cannot put <pre>{{ .Params.foo }}</pre> directly within 404.md

10

Sorry, I thought I made myself clear. Here’s more explicitly what I am trying to do:

content/404.md:

---
page_title: "404. Sorry, the page was not found."
page_subtitle: "The page you are looking for doesn’t exists.<br>
          Please check your URL address."
---

layouts/404.html:

{{ define "body" }}
  <main class="page-404" data-transition="fadeIn">
    <div class="container">
      <div class="page-404-content">
        <h1>{{ .Params.page_title }}</h1>
        <p>
          {{ .Params.page_subtitle | markdownify }}
        </p>
        <a class="go-home-button" href="{{ .LanguagePrefix | absURL }}">
          {{- i18n "goToHome" -}}
        </a>
      </div>
    </div>
  </main>
{{ end }}

layouts/default/baseof.html:

<!doctype html>
<html class="no-js" lang="{{ .Site.LanguageCode }}">
  <head>
    {{ partial "head.html" . }}
  </head>
  <body>
    {{ block "body" . }}
      {{ partial "navigation.html" . }}
      <main class="page" data-transition="fadeInDown">
        {{ block "main" . }}{{ end }}
      </main>
      {{ partialCached "footer.html" . }}
    {{ end }}
    {{ partial "scripts.html" . }}
  </body>
</html>

Am I missing anything? The above configuration does not work. When I navigate to localhost:1313/404.html I don’t see the title and subtitle of the 404 page.

11

You have already defined "body" in your baseof.html

You should use {{ define "main" }} in your 404.html.

12

That’s not how Hugo works. That’s not the problem. The problem is accessing the variables. The template works fine the way it’s configured. I can see the 404 page. I just cannot access the content of contents/404.md.

13

You really need to post a link to a sample repository to see the full context of your project.

If you cannot share the actual project dummy content will do.

I am afraid that I am not any good at guessing.

14

The files snippets I submitted here are sufficient to reproduce the issue. Anyhow, thanks for your time!

15

No. I’m afraid that they’re not sufficient.

Also you are asking us to take the time and incorporate your snippets in a Hugo project on our own.

That is not how things work here.

Please read the Requesting Help Guidelines at the top of the forum.

16

When I have the time to setup a dummy project in order to be able to share a link, I’ll do so. I was looking for a quick answer, in case I was doing something wrong. Since the solution is not so obvious, I’ll take the time to create a dummy project and update this ticket, in the future.

17

Thank you. Please do that.

I just want to note that when unexpected behavior is encountered there can be various factors causing it.

And unfortunately it is hard to resolve this just from code snippets.

That’s why we ask for a sample repository.

18

@nop33

No need for a sample repo. I was able to reproduce. It seems that this is a case of a mix-up in the documentation. Although I am not 100% sure.

I have opened a GitHub issue in the Hugo Docs repo for you to follow. It includes a solution to your problem. See here:

P.S. The issue you encountered has nothing to do with the code snippets you posted above. Anyway I took the time to investigate further and not wait for your sample repo because I also have a multilingual project coming up and I needed to know what’s going on.

4 Likes
19

Awesome, thanks.

20

Wish I could give you more than one :heart: for that post because you really went out of your way to help here!

1 Like