Help with single page layouts

support
1

Hello, I’ve been using Hugo for a while now, but I’m having some trouble understanding the correct way that I should be setting up a new custom single page layout. In the past I’ve just hacked it in via HTML in the .md files in the content directory :shushing_face: I know this is not really the proper way to do it though, hence the questions.

I am using the Universal theme. I believe most of my questions are not specific to this theme though, they are general understanding questions.

Ultimately I am trying to create a staff profiles page (as per example here, not a Hugo site), with individual sub-pages for each person.
I.e. I want the following structure:

domain.tld/staff
with links there to:
domain.tld/staff/person1
domain.tld/staff/person2
etc

My questions are:

  1. I want to set up a custom single page. In general, should I be using a single page template for that, or would it just be a partial?

  2. If single page template, where does this get placed in the directory structure? layouts/? layouts/page/? Somewhere else?

  3. The setup of the contact page is somewhat similar to what I’m trying to achieve (in that it’s different from regular single pages) but only uses a partial, so perhaps that’s how I should approach this? How does this contact partial create a separate contact page that doesn’t use the regular single page template?

  4. Once the single page is set up, I want to be able to populate sub pages via parameterised files. Things like a title, image, some body text. Should they go in data/ or `content/'? I would like to reuse parts of those parameterised files elsewhere (e.g. the home page).

Thanks in advance for any help and explanation :slight_smile:

2

It is unclear to me if you want to create a markdown page for each person, or if you are trying to create each page from data.

Create a markdown page for each person

content/
├── staff/
│   ├── _index.md
│   ├── person-1.md
│   └── person-2.md
└── _index.md

Each person page will be of content type “staff”, inferred from the top-level section. Following the lookup rules for single pages, create a template at layouts/staff/single.html.

Create pages from data

This is not a trivial exercise for a casual/infrequent user; you need to know what you’re doing. Here’s an example:

git clone --single-branch -b hugo-forum-topic-45433 https://github.com/jmooring/hugo-testing hugo-forum-topic-45433
cd hugo-forum-topic-45433
rm -rf prebuild/public && hugo -s prebuild && hugo server
1 Like
3

Many thanks @jmooring.

It is unclear to me if you want to create a markdown page for each person, or if you are trying to create each page from data.

I’m open to whichever is easier to manage and meets the requirements. It sounds as though both would be possible, but markdown would be easier, so I think I’ll try that first.

You did already help me in another thread with accessing items in as data resources, so I will see if I can cobble together something from that advice as well if markdown isn’t doing what I want. But I think with the clarity of the layout that you’ve given me, I should be able to get it working.

4

I think I have one final point of confusion.

In the following structure:

content/
├── staff/
│   ├── _index.md
│   ├── person-1.md
│   └── person-2.md
└── _index.md

The content/staff/_index.md defines text and some metadata for the domain.tld/staff/ page, correct? So where does the template to define the structure/layout of this page go? Because this structure will be different to the structure defined in layouts/staff/single.html which defines the layouts for items of the staff type correct?

5

In the same place, named list.html.

1 Like
6

Of course! Many thanks for your assistance!

1 Like
7

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