6 Structuring web pages

This chapter covers:

Organizing the template of a web page for better understanding and reuse
Using Hugo base layouts and partials to structure code and improve compilation speeds
Understanding Hugo content types for multiple designs
Using Hugo pipes for handling assets
Using templates bundled with Hugo

With the Go Template Language in Hugo we can build templates for markup controlled HTML pages in as much detail as needed. In this chapter we enable having multiple types of pages sharing template code and snippets between them. We will also be looking at how Hugo can help with the JavaScript, Images and CSS with Hugo Pipes. We will be building our foundation to move off the Eclectic theme and have more control over the entire website rendering using our own template code.

6.1 Using content types, base templates and blocks to structure templates

6.1.1 Encapsulating templates with different content types

6.1.2 Providing the base template for reuse

6.1.3 Defining blocks of code

6.1.3 Reusing the base template on a different layout

6.2 Reusing content with partials

6.2.1 Moving to a partial

6.2.2 The Partial Context

6.2.4 Partials and performance

6.2.5 A detour to partial returns

6.3 Asset handling with Hugo Pipes

6.3.1 Handling textual assets

6.3.2 Handling images

6.3.3 Other assets

6.4 Using bundled templates for common work

6.5 Summary