Cant get to grips with Hugo - Help needed

support
1

First time using Hugo and finding it a bit confusing. For my first project I am trying to develop and single page site, not a blog, just a single page with different sections/components.

The approach I’ve used is as follows:

Content structure:
/content
–/homepage
----about.md
----hero.md

Heres and example of a .md file

---
title: 'Heating, Gas, Plumbing.</br>Servicing & Repair.'
date: 2024-02-08T06:34:07Z
draft: true
ctaText: 'Need a quote?'
ctaLink: '#contact'
---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales, nisl eu ultricies fermentum, nunc leo ultricies nunc, quis mattis leo libero vitae libero. Nulla facilisi. Nulla facilisi.

Layout structure:
/layouts
–/_default
----baseof.html
–/partials
----header.html
----footer.html
----hero.html
----about.html
index.html

I’ve been attempting to call my partials inside my index.html using the following structure

{{ partial "hero.html" . }}

I am then unsure how I can output the content of the hero.md in the hero.html, e.g.

<section class="hero">
    <h1>{{ .Params.title }}</h1>
    {{ .Content }}
</section>

The partial is successfully called as I can hardcode html and view it, but struggling to get front matter properties and main content.

Where am I going wrong? I know I haven’t got the hang of Hugo workflow, but really do want to get to grips with it. I’ve tried looking at the docs, but find it confusing.

Thanks in advance.

2

project structure

content/
├── headless/
│   ├── about.md
│   ├── hero.md
│   └── index.md
└── _index.md     <-- home page content
layouts/
└── index.html    <-- home page template

content/headless/index.md

---
title: headless <-- irrelevant/whatever
headless: true
---

layouts/index.html

{{ with site.GetPage "headless" }}
  {{ with .Resources.Get "hero.md" }}
    {{ .Content }}
  {{ end }}
{{ end }}

{{ with site.GetPage "headless" }}
  {{ with .Resources.Get "about.md" }}
    {{ .Content }}
  {{ end }}
{{ end }}

You could obviously stuff those blocks in their own partials or shortcodes. Each block “gets” the “headless” page then “gets” the named resource then returns the resource’s content.

Try it:

git clone --single-branch -b hugo-forum-topic-48200 https://github.com/jmooring/hugo-testing hugo-forum-topic-48200
cd hugo-forum-topic-48200
hugo server
1 Like
3

Thanks @jmooring that has helped :+1:

4

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