Partials

Hugo provides a powerful feature called Partials that allow us to create small reusable templates that can used inside of larger page templates.

In this lesson, we will create a navigation bar at the top of our site that will be the same for all pages, and we will use a partial for this.

Create a folder named partials inside of your layouts folder. Inside of the new partials folder, create a file named navbar.html.

Your folder structure should now look like this:

my-blog
├── archetypes
|   └── default.md
├── content
|   └── posts
|       └── my-first-post.md
├── data
├── layouts
|   ├── _default
|   |   ├── summary.html
|   |   ├── single.html
|   |   ├── list.html
|   |   └── baseof.html
|   ├── partials
|   |   └── navbar.html
|   ├── 404.html
|   └── index.html
├── static
├── themes
└── config.toml

Open the new navbar.html file and paste the following snippet:

<nav>
  <div>
    <a href="/">
      {{ $.Site.Title }}
    </a>
  </div>

  <div>
    <a href="/">
      Home
    </a>
    <a href="/posts">
      Posts
    </a>
  </div>
</nav>

Now we need to figure out how to get a navbar on every page.

Good thing we are using Hugo, we have the baseof.html template that is used for every page already, so we can modify our baseof.html template and add {{ partial "navbar.html" . }} to the <body> to have this new navbar show up on ever page.

Our newly modified baseof.html file should now look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ block "title" . }}
      {{ .Site.Title }}
    {{ end }}</title>
  </head>
  <body>
    {{ partial "navbar.html" . }}
    {{ block "main" . }}
      <!-- The part of the page that begins to differ between templates -->
    {{ end }}
  </body>
</html>

Now if we save our changes and visit our locally running web server in our browser, we should see a new navbar on top of every page that allows us to easily navigate to our homepage and posts page, no matter what page we are currently visiting.

Let’s also create a footer for our site. Footers are typically used for showing copyright text and links to other less important pages. In our case we will just show the current year with a copyright.

Create a file in our new partials folder called footer.html.

Your folder structure should now look like this:

my-blog
├── archetypes
|   └── default.md
├── content
|   └── posts
|       └── my-first-post.md
├── data
├── layouts
|   ├── _default
|   |   ├── summary.html
|   |   ├── single.html
|   |   ├── list.html
|   |   └── baseof.html
|   ├── partials
|   |   ├── footer.html
|   |   └── navbar.html
|   ├── 404.html
|   └── index.html
├── static
├── themes
└── config.toml

Open the footer file and paste the following snippet:

<footer>
  <p>
    Copyright &copy; {{ now.Format "2006" }} {{ $.Site.Title }} | All rights reserved.
  </p>
</footer>

Then edit the baseof.html and place the partial in the <body>, just like we did for the navbar.

The new baseof file should look like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ block "title" . }}
      {{ .Site.Title }}
    {{ end }}</title>
  </head>
  <body>
    {{ partial "navbar.html" . }}
    {{ block "main" . }}
      <!-- The part of the page that begins to differ between templates -->
    {{ end }}
    {{ partial "footer.html" . }}
  </body>
</html>

If we visit our site now in our browser, we’ll see a nice footer at the bottom with the current year, our site title and nice copyright entity.

The way we got that copyright circle was by using HTML entity codes, the © is converted by browsers into the circle logo that you see.

For all possible HTML entity codes, check out this reference site.

Partials

Learn about Hugo Partials to create reusuable components that can be shared across templates.

Navbar

Footer

Share this page