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.

Example Problems

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.

Hugo Content Types

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 baseof.html, single.html or list.html – whichever you need to customize. And you can even create the markdown hooks for images, links and headings.

Read up on Hugo template lookup order