How do I organise content for template partials?

I have created a template and it includes numerous partials which represents blocks of content that go on a page such as:

  • Jumbotron
  • Email Form
  • Header
  • Special Offers

Etc. A partial can be reused on other page types etc.

But how do I get the content into the theme? At the moment I have hard coded the content. I want the user to be able to provide their own data for each of the partial sections.

How do you organised such content for the home page for example? How can I render a homepage and provided the content for the partials that are used on the homepage?

The documentation is rather confusing. I assumed I’d create content for sections. But the definition of a section in hugo is not the same as in HTML. Whereas in HTML a section represents a block of content that forms … a section, the Hugo docs mean something different.

For anyone confused, if I have this in a theme partial and it’s rendered on the index page, how can I create content for it?

<section id="hello" class="jumbotron primary-bg white h-100">
	<div class="container">
		<h1 class="display-4">Welcome.</h1>
		<p class="lead">I want the user to be able to change this text and the H1.</p>
		<a href="#contact" class="btn btn-lg btn-primary">Get In Touch</a>
	</div>
</section>

Hi,

If the partial ‘content’ is the same site-wide (for example if you have a footer partial that contains the same text no matter which page you are on) or one-off values like your jumbotron text example, you can use .Site.Params.

If it is page-specific, then you can use front matter in the content files.

1 Like