DEV Community

Cover image for Hugo Partials
David Large for CloudCannon

Posted on • Updated on • Originally published at cloudcannon.com

Hugo Partials

By Mike Neumegen

Brought to you by CloudCannon, the Git-based CMS for Hugo.

The idea behind a partial is simple: it’s a file that can be included into a layout to reduce repetition or simply hide some complexity. You’ll add a nav bar to your site with a partial. While you could add this logic directly to your baseof.html, sometimes it’s nice to split a layout up into smaller partials so you don’t need to deal with a 2000-line file.

Your first partial

Create a partials directory in your layouts directory so the final path will be /layouts/partials/. Inside create nav.html with the following contents:

    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
      </ul>
    </nav>
Enter fullscreen mode Exit fullscreen mode

That’s the navigation taken care of. Now it’s time to include it in your layout. Open /layouts/_default/baseof.html and add the following below <body>:

    {{ partial "nav.html" }}
Enter fullscreen mode Exit fullscreen mode

In Go, your single quotes are no good for strings; only double quotes designate a string.

Render your page, and there you have it.

Your second partial

Let’s try another scenario to demonstrate the power of partials. We will simplify baseof.html even further by moving the contents of <head> to a partial. Create /layouts/partials/meta.html with the following content:

    <meta charset="utf-8">
    <title>{{ print .Page.Title }}</title>
    {{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify }}
    <link rel="stylesheet" href="{{ $style.Permalink }}">
Enter fullscreen mode Exit fullscreen mode

In this partial, we have variables that need the context of the current page. Lucky for you, passing the context of the current page can be done with a single character.

Open up /layouts/_default/baseof.html and replace the contents of <head> with the following:

    {{ partial "meta.html" . }}
Enter fullscreen mode Exit fullscreen mode

That little . at the end is passing the context of the current page, which allows the partial to print out the current page’s title. You’ll see this come up a lot in your Hugo sites, just you wait.

What’s next?

In the next lesson we’ll go through the basics of Hugo templating and see how we can manipulate and iterate over data.

Top comments (0)