Creating Reusable Partials for Static Content

What are Partials and Why Do They Matter?

In Hugo, partials are reusable pieces of template code. Think of them as custom LEGO bricks. You design a brick once—like a header, a footer, or a hero banner—and then you can use it anywhere on your site, as many times as you want. This makes your code clean, modular, and much easier to manage.

To get a quick overview of what partials are and how they work, let's watch a short video.

As the video explained, we create a file in layouts/partials/ and then call it from our main templates. The . we pass along is the "context"—it's the data the partial needs to do its job. In our case, the context will be the data for a specific homepage section from our JSON file.

Step 1: Defining the Data for Our Hero Banner

Let's revisit the data/homepage.json structure we planned. A hero banner section would contain all the information needed to render it:

{
  "id": "hero",
  "type": "hero-banner",
  "title": "Build Complex Websites with Vibe Coding",
  "content": "Leverage AI to create stunning, modern websites with Hugo and Google Sheets. The future of agile web development is here.",
  "image": "/images/hero-background.jpg",
  "cta_text": "Get Started Now",
  "cta_link": "/course/overview"
}

Our dispatcher in layouts/index.html will find this object, see that its type is hero-banner, and then call the partial layouts/partials/homepage/hero-banner.html, passing this entire block of data as the context.

Step 2: Prompting the AI for the Partial

Now for the "vibe coding" part. Let's write a detailed prompt to ask our AI assistant to generate the hero-banner.html partial. We'll use the same structured approach as last time.

Prompt for AI:

I need you to generate a Hugo partial template for a hero banner section. The file should be named hero-banner.html and located in the layouts/partials/homepage/ directory.

Context:
This partial will be called by a template that passes it a data object (the context, .) with the following fields: title, content, image, cta_text, and cta_link.

Instructions:

1. Create an HTML <section> element that will serve as the container.
2. Use the .image value to set a background image for the section using inline CSS. Add a semi-transparent dark overlay to ensure text is readable.
3. The section content (heading, paragraph, button) should be vertically and horizontally centered. Use CSS Flexbox for this.
4. Display the .title in an <h1> tag.
5. Display the .content in a <p> tag.
6. Create an <a> tag that acts as a call-to-action button. Use .cta_link for the href attribute and .cta_text for the button text.
7. Add some basic CSS classes for styling the text and button, which I can define later in a separate stylesheet.

This prompt is specific about the data it expects, the HTML structure, and even the desired layout, giving the AI a clear blueprint.

Step 3: Analyzing the AI-Generated Code

The AI would likely produce something like this. Let's analyze the result.

layouts/partials/homepage/hero-banner.html

{{/* 
  This partial receives a context object with hero banner data.
  Example fields: .title, .content, .image, .cta_text, .cta_link 
*/}}
<section class="hero-banner" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ .image }}');">
  <div class="hero-content">
    <h1 class="hero-title">{{ .title }}</h1>
    {{ with .content }}
      <p class="hero-subtitle">{{ . }}</p>
    {{ end }}
    {{ if and .cta_text .cta_link }}
      <a href="{{ .cta_link }}" class="btn btn-primary">{{ .cta_text }}</a>
    {{ end }}
  </div>
</section>

Explanation:

• style="...": The AI correctly used the .image field to construct an inline background-image style. The linear-gradient is a nice touch for readability.
• .title, .content, .cta_link, .cta_text: These are direct references to the fields in the JSON data object that was passed to the partial.
• {{ with .content }}...{{ end }}: This is a robust way to handle optional fields. The paragraph tag will only be rendered if the content field exists and is not empty.
• {{ if and .cta_text .cta_link }}...{{ end }}: Similarly, this checks that both the button text and link are present before rendering the <a> tag. This prevents broken or empty buttons.

When rendered, this partial would produce a section that looks conceptually similar to this:

Making Partials More Flexible

Our partial works perfectly within our homepage dispatcher system. But what if you wanted to reuse this hero banner on another page, without adding it to the homepage.json file? This is where passing parameters as a dictionary (dict) becomes incredibly powerful.

A Hugo partial can only accept one parameter. We've been passing the data object as that one parameter. However, we can construct a new "dictionary" on the fly to serve as that parameter. This makes our partials more self-documenting and flexible.

Based on that principle, we could call our hero partial from any template like this:

{{ partial "homepage/hero-banner.html" (dict 
    "title" "A Custom Title For This Page" 
    "content" "This content is unique to this specific usage."
    "image" "/images/another-bg.jpg"
    "cta_text" "Learn More Here"
    "cta_link" "/about") 
}}

The partial code remains exactly the same because it still accesses the data via .title, .content, etc. The only difference is how the data is passed. This approach turns your partial into a true, self-contained component that you can drop in anywhere, customizing it as needed. For your work in SEO, this is a powerful technique for creating and placing targeted call-to-action sections across a site.

Conclusion

You've successfully built your first reusable homepage component! You translated a data structure from your Google Sheet into a tangible, styled hero banner. You practiced crafting a detailed prompt for an AI assistant and analyzed the resulting Hugo template code.

Key Takeaways:

• Partials are the building blocks for modular Hugo sites, located in layouts/partials/.
• We can generate a partial by prompting an AI with the data structure it will receive (context) and clear instructions for the desired HTML output.
• Inside a partial, variables like .title and .content are used to access the data passed into it.
• Using with and if statements makes partials more robust by gracefully handling optional data fields.
• For maximum reusability, you can call a partial with a dict to pass custom, named parameters.

Preview of the next lesson:
Our hero banner is a static component—it just displays the data it's given. But homepages often need dynamic components that pull in content from elsewhere. In our next lesson, we will tackle exactly that: generating a reusable partial that displays a curated list of content from a specific site section (e.g., 'Latest Blog Posts'). This will be our first step in connecting different parts of the site together on the homepage.