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.4  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.3  Bringing back the submenu using additional parameters to the menu partial

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

sitemap