6 Structuring web pages

 

This chapter covers

  • Organizing the template for better understanding and reuse
  • Using layouts and partials to structure code and improve compilation speeds
  • Using content types to organize templates
  • Manipulating assets using Hugo Pipes
  • 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 will enable multiple types of pages, sharing template code and snippets between them (figure 6.1). We will also look at how Hugo can help with the JavaScript, images, and CSS files using Hugo Pipes. We will build our foundation to move away from the Eclectic theme and have more control over the entire website rendering using custom template code.

Figure 6.1 Chapter 6 focuses on getting multiple pages to work together, sharing the right set of snippets between them, and using assets like images, CSS files, and HTML optimally.
CH06_F01_Jain

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

So far, we have focused on creating index.html for the home page using the Go template language. While we don’t have a large and unmanageable file yet, it can quickly get out of hand if we keep adding code to this file. Also, with one file, we cannot share template code between various web pages that are slightly different.

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 in 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.3.1 Handling textual assets

sitemap