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

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?

Instead of storing data as data files, store them in content/products/product-*/ 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.

I have already define a custom .html file in

what should i put in the content/products/ 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?

did you mean in the layout/product/single.html, i should have a code to check the frontmmatter that i declare in content/product/ 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/, i should declare β€œkind/layout” variable, and then it will somehow know which content should use which html?

Try it:

git clone --single-branch -b hugo-forum-topic-37085 hugo-forum-topic-37085
cd hugo-forum-topic-37085
hugo server
β”œβ”€β”€ products/
β”‚   β”œβ”€β”€
β”‚   β”œβ”€β”€  <-- front matter: layout = 'product-1'
β”‚   β”œβ”€β”€  <-- front matter: layout = 'product-2
β”‚   β”œβ”€β”€  <-- front matter: layout = 'product-3'
β”‚   └──
β”œβ”€β”€ _default/
β”‚   β”œβ”€β”€ baseof.html
β”‚   β”œβ”€β”€ home.html
β”‚   β”œβ”€β”€ list.html
β”‚   └── single.html
└── products/
    β”œβ”€β”€ list.html       <-- used by content/products/
    β”œβ”€β”€ product-1.html  <-- used by content/products/
    β”œβ”€β”€ product-2.html  <-- used by content/products/
    β”œβ”€β”€ product-3.html  <-- used by content/products/
    └── single.html     <-- used by content/products/

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!!

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