Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Base Templates

We are going to create the outer shell of our website using what Hugo calls Base Templates, blocks, and Partials.

Each page will have the following sections:

  • Header. Contains the logo and title, and main navigation.
  • Navigation. Links to different sections or pages.
  • Main Content. The primary content of the page.
  • Footer. Contains copyright, contact information, etc.

Using your favorite text editor, create the default base template at themes/opinionated-theme/layouts/_default/baseof.html. This will be the shell for all of our pages.

<!doctype html>
<html lang="{{ .Site.LanguageCode }}">
  <head>
    <title>{{ block "title" }}{{ .Site.Title }}{{ end }}</title>
  </head>
  <body>
    
    <header>
      {{ partial "header.html" . }}
    </header>

    <nav>
      {{ partial "nav.html" . }}
    </nav>

    <main>
      {{ block "main" . }}

      {{ end }}
    </main>

    <footer>
      {{ partial "footer.html" . }}
    </footer>

  </body>
</html>

The .Site.LanguageCode variable will be replaced with the languageCode variable in the hugo.toml file.

The Go Templates that start with partial will be replaced with the content of themes/<THEME>/layouts/partials/<PARTIALNAME>.html. The templates that starts with block will be filled in by other templates that we will build later on. We’ll build the three partials in the next chapter.