Alright, let’s get our hands dirty with template variables. Think of these as the mad-libs of the Hugo world. You provide the template structure, and Hugo fills in the blanks with actual data from the front matter of your content files. It’s how a generic post.md file becomes a specific, published article about, say, “The Care and Feeding of Your New Robot Dog.”

The big three you’ll live and die by are .Date, .Name, and .Type. They seem simple, and mostly they are, but they have their quirks. Let’s break them down.

The Indispensable .Date

.Date is your go-to for anything time-related. But here’s the first thing you need to know: it’s not a string; it’s a Go time.Time object. This is fantastic because it means you have immense power to format it any way you want, right in the template. Don’t like January 2, 2006? Prefer 02-Jan-06? No problem.

<!-- This is the full month, zero-padded day, and full year -->
<time datetime="{{ .Date }}">{{ .Date.Format "January 02, 2006" }}</time>

<!-- This is a more compact, numeric version -->
<time datetime="{{ .Date }}">{{ .Date.Format "2006-01-02" }}</time>

“Why the weird date "2006-01-02"?” I hear you ask. Because that’s how Go does it. They picked a specific date (Mon Jan 2 15:04:05 MST 2006) to be their numeric constant. Just memorize it: 1-2-3-4-5-6 (for January, 2nd, 3pm, 4th minute, 5th second, 2006). It’s absurd, but you get used to it.

Pitfall: The biggest gotcha with .Date is that it pulls from the date field in your front matter. If you don’t set one, Hugo will, very helpfully, use the filesystem’s creation date of the file. This can lead to bizarre, time-traveling articles if you’re reorganizing content. Always explicitly set the date in your front matter.

The Deceptive .Name

.Name seems straightforward: it’s the name of the content file, right? Well, sort of. It’s actually the logical name of the item, which usually translates to the filename without the extension.

So for a file at content/posts/my-awesome-post.md, the .Name is my-awesome-post.

You’ll use this all the time for things like constructing permalinks or creating CSS classes.

<article class="post post--{{ .Name }}">
  <h1>{{ .Title }}</h1>
  ...
</article>

Edge Case & Best Practice: Be cautious. .Name can include characters that aren’t CSS-class-friendly, like spaces or underscores. For a robust CSS class, you should pipe it through Hugo’s anchorize function to make it URL-safe (post--{{ .Name | anchorize }}). This is a classic “it works on my machine” trap until someone creates a post with a title like “What’s the deal with airline food?” and it breaks your styling.

The Contextual .Type

This one is crucial for organization. .Type tells you what kind of content you’re dealing with. Is it a post? A project? A product?

Its value is derived from the top-level section directory the content file lives in. content/posts/post-1.md has a .Type of posts. content/projects/cool-go-project.md has a .Type of projects.

This is your primary tool for creating type-specific layouts. In your template, you can do logic based on it:

{{ if eq .Type "posts" }}
    {{ partial "post-header" . }}
{{ else if eq .Type "projects" }}
    {{ partial "project-header" . }}
{{ end }}

The Designer’s Questionable Choice: The potential confusion here is that .Type and Section are often used interchangeably. In most contexts, they are the same thing. But it’s a slight abstraction that can break if you start using non-standard content structures. Just remember: for 99% of use cases, “type” means “the name of the folder directly inside the content directory.”

Putting It All Together

Let’s see them in a realistic snippet. Imagine this in a li.html partial for a list page.

<li class='item item--{{ .Type }} item--{{ .Name | anchorize }}'>
    <a href="{{ .Permalink }}">
        <h3>{{ .Title }}</h3>
        <time class="date" datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "Jan 2, 2006" }}</time>
    </a>
    <p class="type-label">{{ .Type | humanize }}</p> <!-- 'projects' becomes 'Projects' -->
</li>

This gives you a structured, highly stylable list item with all the core metadata intact, demonstrating how these variables form the backbone of pulling dynamic data into your static templates. They’re the first tools you reach for to make your content come alive.