Hugo - Partial Templates

Now that we have the proper Three Musketeers (HTML + CSS + JS), it's time organize our template into components focused, similar to Facebook's React Framework. The main differences is that Hugo compiles the partials into a page before hosting while React renders on runtime using JavaScript.

Nevertheless, you can use both but it is a bit redundant since React framework is more for dynamic contents like a web application. In this checkpoint, we'll be creating partials to turn our HTML codes into components.

Hence, fire up your development server from the last tutorial and let's begin.

Objectives

Create and manage partials templates for layouts.

Create the Partial Directory

Based on the specification, partial gets loaded automatically at the a specific directory known as layouts/partials.

$mkdir -p layouts/partials

Create our First Meta Partial

Now our goal is to ensure the partial is working for now. Let's create a simple meta partial that holds the "subject" of the page. In this case, we want it to have it the same as our Title. Let's create the file in layouts/partials/meta.html.

In the file, fill in the actual html codes. Remember, it is a partial: it means, part of the html.

Then fill in:

<meta name="subject" content="{{ .Title }} | {{ .Site.Title }}" />

and save it.

Use Partial

We now have the meta partial. It's time to use it inside our layout template. Based on specification, to use the partial, we cal this tag:

{{ partial "path/to/file/inside/partials/folder" . }}

In our example, it should be:

{{ partial "meta.html" . }}

Let's call it inside our baseof.html main template. Since this is a meta tag, by HTML standards, it belongs in the <head> section. Let's insert inside there. Your outcome should have something like:

<head>

  <title>{{ block "title" . }}

    {{ .Title }} | {{ .Site.Title  }}

 {{ end }}</title>

 {{ partial "meta.html" . }}

 <link rel="stylesheet" href="{{ "css/kube.min.css" | absURL }}">

</head>

Check Meta Printout

After Hugo completed its compilation, we should check whether the partial is applied.

Now the thing about meta tag is that it doesn't show on your browser rendering. It's meant for robots or machines to read and understand a page, just like the cover of a book.

To verify, we need to "view source" the page. Right click on the site, select "view page source" or similar.

Then focus the <head> tag and check is the subject meta tag is included. The content should be the same as your title OR whatever you typed in.

Here, we learn that we can apply Hugo's Go rendering shortcodes inside the partials as well.

Partials of Partial

Just like the base template html, you can use partials within the partial html as well. Let's expand our meta partial further, with different sets of compulsory metas, like OpenGraph tags, Standards Tags, Favicon Tags, etc.

Let's create a sub-folder call metas to hold all these different tags in separate files, then call them inside the current partials/meta.html.

Take your time. This is a practice for you to familiarize with partials. As for this checkpoint, we had achieved the use of partials to compartmentalize our components. You can apply it to things like navigation bars, header, footer, etc.

Archetypes ➤