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

Built with Errorist theme for Hugo site generator.