Customize Web Page Layout: Hugo Content Types
Style consistency is important, and one of the benefits of generating pages with Hugo (as opposed to editing HTML code for each page directly) is a very little amount of HTML code to handle. So far, all the HTML we used were just four (!) template files plus a partial for the breadcrumbs and an image markdown hook. However, some types of content inevitably won’t fit the Procrustean bed of a simplistic theme.
Let’s assume you will blog about programming, cooking and traveling – pretty usual blogging topics. Now, you want each of your travel page to start with a theme-setting photo, and at the bottom there should be included a map of the area you are writing about. Your cooking articles should include a YouTube video and appropriately formatted list of ingredients, and a photo of the dish you are writing about. It might make sense to include the list of ingredients as a separate page resource.
You can chop your content in a manner of the legendary Procrustes, but some may argue you should instead customize the bed, that is, your templates.
Each page in Hugo has a content type. By default, it is the name of the top-most section the page
belongs to. However, this can be overridden with the built-in
type: front matter parameter.
Both the theme and the project directories contain a
layouts sub-directory. These are the places
where you define your custom templates. Just create a directory
layouts/<TYPE>, and create any of
list.html – whichever you need to customize. And you can even
create the markdown
links and headings.
Read up on Hugo template lookup order