Unique template for a single page

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: https://github.com/nicholasjhs/hughsambros/tree/development

THANKS

1 Like

In your front matter add

type: "singles"

And the template will be picked up.

1 Like

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?

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

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

1 Like

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

That’s fine.

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 !

This is my directory with the file opened.

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.

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.

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.

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?

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.

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/’.

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 !