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

[bhd9]

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,

[jmooring]

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>

[bhd9]

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