How to have custom single.html post for each individual product/post

support
1

Hi. I’m quite new to hugo.
I know we have list.html and single.html inside _default, and we can set a custom single.html using different folder.

My question is, if let said i have three products, all the data in three seperate .yml, which the three will use the products/list.html to list the three items.
how do i create a custom page for the three item? like having 3 single.html file, each unique to one items? Do i need to use layout?

2

Instead of storing data as data files, store them in content/products/product-*/index.md as frontmatter. Then you can specify the layout you want to use through the layout frontmatter variable.

Define the custom layout in layouts folder and you’ll be good to go.

4

I have already define a custom .html file in
layouts/products/productA.html
layouts/products/productB.html
layouts/products/productC.html

what should i put in the content/products/_index.md to tell the which page should use which page, and not to use the layouts/products/single.html?

When you mention specify the layout frontmatter variable, does that mean each .html should check if the variable equal to “A”, something like that?

5

did you mean in the layout/product/single.html, i should have a code to check the frontmmatter that i declare in content/product/productA.md? for example

author: testing
layout: contentA

then use the frontmatter “layout” to be check inside single.html?

or do you means inside the content/product/_index.md, i should declare “kind/layout” variable, and then it will somehow know which content should use which html?

6

Try it:

git clone --single-branch -b hugo-forum-topic-37085 https://github.com/jmooring/hugo-testing hugo-forum-topic-37085
cd hugo-forum-topic-37085
hugo server

content/
├── products/
│   ├── _index.md
│   ├── product-1.md  <-- front matter: layout = 'product-1'
│   ├── product-2.md  <-- front matter: layout = 'product-2
│   ├── product-3.md  <-- front matter: layout = 'product-3'
│   └── product-4.md
└── _index.md
layouts/
├── _default/
│   ├── baseof.html
│   ├── home.html
│   ├── list.html
│   └── single.html
└── products/
    ├── list.html       <-- used by content/products/_index.md
    ├── product-1.html  <-- used by content/products/product-1.md
    ├── product-2.html  <-- used by content/products/product-2.md
    ├── product-3.html  <-- used by content/products/product-3.md
    └── single.html     <-- used by content/products/product-4.md
2 Likes
7

wow thanks man!! Now I understand how to use the layout frontmatter. I though need by “set” means i need to set it to true, or others.
THanks for your example as well!!

8

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