Unique template for a single page

support
1

Hi everyone, I started HUGO about 3 days ago and I now want to make a contact page.
I read on the forum (discourse) and the documentation about the lookup order of templates, but I still can’t get my contact page to show what is in my layout template.

This is my front matter in my contact.md file:

---
title: "Contact"
date: 2017-12-28T09:38:48-05:00
layout: "contact-us"
slug: "contact"
draft: true
---

This is where my file is:
content/singles/contact.md

This is where my template is:
themes/osaron/layouts/singles/contact-us.html

Any help trying to solve this would be greatly appreciated.
Also, I used to have an “about” page with the SAME setup as the contact, but with about.html and it worked fine, but I can’t seem to get it to work with my contact page.

Link to repo: GitHub - nicholasjhs/hughsambros at development

THANKS

1 Like
2

In your front matter add

type: "singles"

And the template will be picked up.

1 Like
3

Thanks, I’ll try it out. But shouldn’t the lookup order automatically search in the “singles” folder since my section is also named singles?

4

You need to specify the type to use a custom template for a page, because if you don’t then that page will be rendered with the default single.html template.

EDIT
Also if you are like me and prefer to have everything controlled from a single template.

Place your special layout in /_default/single.html like this:

{{- if eq .Type "singles" -}}
<--- Singles layout here --->
{{- end -}}

And then just delete your template at themes/osaron/layouts/singles/contact-us.html

1 Like
5

You might want to make that “false”. Then you can debug your templates. :slight_smile:

1 Like
6

Oh, but I’m running hugo server -D when testing my template so it should work no?

7

That’s fine.

8

I added the type to the front matter, but it is still not working. Any suggestions? I can do a workaround, but I really want to know why it doesn’t work. thanks !

9

This is my directory with the file opened.

image
image.png614×659 37.1 KB

10

I just took a look at your repo.

Rename
themes/osaron/layouts/singles/contact-us.html
to
themes/osaron/layouts/singles/single.html

Remove the layout parameter from your front matter. (You don’t really need this, since both content files under/singles/ use the same layout).

The template will be picked up.

11

Thank you for your help, but I would like to have 2 different templates for my about and my contact page that is why I wanted to have unique templates.

12

In that case you need to include the 2 different templates not under/themes/ but under /layouts/ at the root of your Hugo site i.e. /layouts/singles/contact.html and do the same for about-us.

I have tested this locally and the pages render.

But there is something weird going on with the theme you use. And I’m afraid I don’t have the time to debug it for you. It seems that the content of those two .md files is ignored. You haven’t included {{ .Content }} in your templates.

I would suggest you try out a different theme from the official Hugo site. Especially since you’ve just started out using Hugo, it’s better to learn through customizing an official theme than trying to work around a broken one.

13

I’ve followed this discussion, because I’m also new and trying to understand Hugo organization and structure. I had the same question about About page or Contact page since they have a different format that I’ve not been able to boil down to a single template page (yet).

I’ve gotten both Contact and About page to work.
From the site’s root folder I’ve created content/singles/about.md.
Also from the site’s root folder I’ve created layout/singles/about.html.

In about.md I have:
+++
title = "About"
type = "singles"
layout = "about"
slug = “about”
+++

Then in my config.toml, I had to do the following to get it things to work:
[[menu.main]]
name = "About"
url = "singles/about/"
weight = 4

I repeated the above for the Contact page.
There are a couple oddities I don’t understand yet.

  1. From my index.html, the URL for about is singles/about and I’d like it to just be /about/. Similarly for the Contact page. Is this possible?
  2. Maybe related to the above, when I navigate from index to About page, the URL for Contact or About has changed to be ‘singles/about/singles/about’, redundant. If I go back to index, it is ‘singles/about’ or ‘singles/contact’. Why is this happening?
14

Regarding your first question see permalinks configuration at the Hugo Docs to exclude /singles/ from the Url.

Your second question sounds like a bug in your theme. It’s difficult to say what’s going on without seeing a repo.

15

Thank you @alexandros.

Your suggestion looks to have fixed both problems. I added a permalinks section in the config.toml and then adjusted the menu URL to point to ‘/about/’.

16

Hi everyone, I don’t know if this is 100% exactly why stuff wasn’t working, but I think I created my contact.md file without using “hugo new contact/contact.md” and just created the folder and the file by clicking “new Folder” and “new File”. I did exactly the same thing, but through the CL and was able to have a singles folder with contact-us.md and about.md and each of them have a unique template in my layouts > singles > xxx.html, where xxx is the name given in the front matter after “layout”. So thanks !