How to divide a content page?

Viewed 111

I am still fairly new to HUGO, as well as Markdown, and also neither really fluent in HTML nor CSS nor JS. Some stuff still puzzles me a lot despite watching a ton of videos and reading pages upon pages.

So, I got my main page setup all nice and working, dropdown top menu and all, but the content pages are giving me a ton of a hard time, and I’m not even entirely sure if I am not better off hard coding them all into HTML - it’s an entirely static website after all, no blog or anything that changes regularly.

Now, on to my question: Most of the content pages I need to setup have a full width headline and smaller subtitle. Below there are two columns (roughly 65% wide, 5% gap, 30% wide), but both contain page content, not navigation or static images, but on the left it’s the main text, on the right a mixture of content related images, downloads order and other links. Below there’s sometimes a summary, again spanning both columns, sometimes nothing. And all I just described is just the main content, with the header and a hero portion above and the footer below.

Next I attempted to divide my .md files into variables just like the config.toml and pull them into the .html file, which just ended in multiple server errors.

Now Google leads me to no new ideas and I have none of my own, so I have to rely on some support from you folks. Thanks in advance.

TC, Martin

1 Answers

You use frontmatter for this (https://gohugo.io/content-management/front-matter/). Your markdown file will look like this:

---
title: Your title
subtitle_or_any_other_key: Subtitle of your page
---

Your layout file will look like this:

<h1>{{ .Title }}</h1>
<h2>{{ .Params.subtitle_or_any_other_key }}</h2>

The result will be:


Your title

Subtitle of your page


Note that you can add as many front matter variables as you like. They can include single or multiline content and even files or images.

Related