How do I force a certain page to use a certain single.html file?

support
1

How do I force a certain page to user certain single.html file? I need a Contact page to use a particular single.html that contains a form. I don’t want other pages or posts to use that single.html. I’m using 0.65.

My Contact page at /pages/contact.md contains:

+++
title = “Contact”
description = “Contact”
+++

Contact Me

And I want contact.md to use /layouts/contact/single.html which contains

{{ define "main" }}

<h2>{{ .Title }}</h2>

{{ .Content }}

<form action="https://getform.io/f/" method="POST">
<input type="text" name="name" id=”name”>
<input type="email" name="email" id=”email”>
<button type="submit">Send</button>
</form>

{{ end }}

</div>

Directory structure:
Untitled

2

One way is to set the layout:

3

That doesn’t help much. What do I add in contact.md to call the layout /contact/single.html I want to use for contact.md?

4

layouts/contact/single.html loads the single template for the “contact” section. I think you want something at layouts/_default/contact.html, and then set layout to “contact” in front matter.

5

Thanks, we’re geting closer. In contact.md, I now have

+++
title = “Contact”
description = “Contact”
layout = “contact”
type = “contact”
+++

Contact

and now when I go to root/pages/contact/, that uses layouts/contact/contact.html I get a partially rendered page. I have to delete {{ define "main" }} and {{ end }} from contact.html and then I get the rest of the html output that is between the <article> tag and the ending </div>. So the {{ .Content }} and {{ .Title }} tags render OK. But in this case, something is wrong with the {{ define "main" }} tag.

6

Anyone have an idea of why I have to delete {{ define "main" }} and {{ end }} from contact.html to get the html output that is between the <article> tag and the ending </div> ?

7

People need to see the source code (a repo) to respond to this kind of question…

8

In your code above:

{{ define "main" }}

<h2>{{ .Title }}</h2>

{{ .Content }}

<form action="https://getform.io/f/" method="POST">
<input type="text" name="name" id=”name”>
<input type="email" name="email" id=”email”>
<button type="submit">Send</button>
</form>

{{ end }}

</div>

You have closing </div> tag floating outside of any defining blocks. The templating language isn’t defined for that happening I think? I remember reading somewhere that it’s not a great idea. Try making sure all html and whatnot are within {{ define "block" . }} <div> hello </div> {{ end }} blocks.

9

Thanks, but using a define "block" in contact.html throws an error when starting Hugo. If you want to take a look, I added a repo of the entire theme: https://github.com/mtbluedog/hugo_theme

10

Thanks! If you want to take a look, I added a repo of the entire theme: https://github.com/mtbluedog/hugo_theme

11

1. First thing, you have to correct your contact.md Front Matter. You missed the draft=false and you don’t need type=contact

+++
title = "Contact"
description = "Contact"
layout = "contact"
draft=false
+++

2. Move your contact.html file to layouts/_default/ folder. It’s done!

Tested locally with the last Hugo version…

1 Like
12

Thanks, that’s really strange; still doesn’t work for me. draft=false doesn’t make a difference.

But as soon as I use layout = "contact" in contact.md, contact.html (in layouts/_default/) won’t render anything, unless I remove the {{ define "main" }} and {{ end }} , and then I get the rest of the html, and also the output of {{ .Content }} and {{ .Title }}. So for some reason, {{ define "main" }} and {{ end }} are breaking.

I tried the same thing with a different page, too; same result. This is with the newest Hugo.

13

As mentioned above,

your contact.html layout page has the closing </div> outside the define block. This is breaking your template. See doc: Base templates and blocks | Hugo

Not Ok:

{{ define "main" }}
... 
{{ end }}

</div>

Ok:

{{ define "main" }}
... 
</div>
{{ end }}
14

I forgot to mention that you have to correct your template for the closing </div> outside the {{ define "main" }} loop. See @pointyfar reply here:

15

Ah, you’re right. Fixed that, now it works. That was the way the base theme I’m using was coded; I don’t know why it was working before with the div outside.

16

You’re right. Now it works. That was the way the base theme I’m using was coded; I don’t know why it was working before with the div outside.

17

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