Using drop-in component (content + partial template) in Hugo

In my home page, I have many components like hero, team, pricing partials. When rendering these partials like hero, I would like to use a hero.md as a content for rendering the hero.html partial. Is this possible? (I have a feeling that an index.html template will ONLY use index.md file, and the only think available to hero.html is what is available in the index.md context and not the hero.md context). I would like to confirm.

Why do I want to do this? Because I would like to create drop in components that are isolated from others and can swap them with other hero (content + template) as needed. I will be using netlifycms eventually,

Search this forum for β€œheadless bundle”.

directory structure
content
β”œβ”€β”€ headless/
β”‚   β”œβ”€β”€ hero/
β”‚   β”‚   β”œβ”€β”€ index.md
β”‚   β”‚   └── kitten.jpg
β”‚   └── _index.md
└── _index.md

content/headless/_index.md
+++
title = 'Headless'
date = 2022-04-20T17:07:30-07:00
draft = false
[cascade._build]
  list = 'never'
  render = 'never'
  publishResources = false
+++

layouts/_default/home.html
{{ partial "hero.html" . }}

layouts/partials/hero.html
{{ $p := site.GetPage "headless/hero" }}

<div class="hero-image">
  {{ with $p.Resources.Get "kitten.jpg" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
</div>

<div class="hero-content">
  {{ $p.Content }}
</div>

1 Like

Thank you for your response! This is what I was looking for @jmooring

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.