How include multiple 'content' at different places in my layout

support
1

Hi,
I started using hugo a short while ago and I can’t wrap my head around how to do a more complexe page… Let me explain.
For now, the website is only in one language, but I am building it with multi-language support in mind.

layouts/about-us.html:

<html>
<head>
  {{ partial "head.html" . }}
</head>
<body>
  <!-- Wrapper -->
  <div id="wrapper">
    <!-- navbar -->
    {{ partial "navbar.html" . }}
    <section id="banner" class="major banner-about-us">
      <div class="inner">
        <header class="major">
          <h1>{{ .Title }}</h1>
        </header>
      </div>
    </section>
    <!-- Main -->
    <div id="main">
      <div class="page-width">
        <div class="pages-title"></div>
        {{ .Content }}
      </div>
    </div>
    {{ partial "footer.html" . }}
  </div>
  <!-- Scripts -->
  {{ partial "scripts.html" . }}
</body>
</html>

Now, if I want to have some more html after my {{ . Content }} and some more content. How do I do? Something that would work like that:

<!-- Main -->
<div id="main">
    <div class="page-width">
        <div class="pages-title"></div>
        {{ .Content[1] }}
    </div>
    <div class="load-carousel"></div>
    <div class="other-formating">
        {{ .Content[2] }}
    </div>
</div>

Thanks

2

I think you’re going to need to use front matter for that.

3

Your example is not clear, but I have a gut feeling that you might be needing to use the block templates – Documentation.

Organizing the blocks is very flexible and there isn’t one right way to do it. But taking from the example (your first snippet):

    <!-- Main -->
    <div id="main">
      <div class="page-width">
        <div class="pages-title"></div>
        {{ .Content }}
      </div>
    </div>

… You can have:

    <!-- Main -->
    <div id="main">
      <div class="page-width">
        <div class="pages-title"></div>
        {{ .Content }}
      </div>
     {{ block "moar-content" . }}
    </div>

And then if your section/layout specific template file, you can have:

{{ define "moar-content" }}
    <div class="load-carousel"></div>
    <div class="other-formating">
        {{ .Params.some_var }}
    </div>
{{ end }}

(As @budparr said, you need to put that extra content in front matter.)

You need to give a more concrete example of what you want to achieve, what you have plan to have in Content0 vs Content1? Does that need to happen on all pages? Only some sections?

If this needs to happen on all pages, have a look at the split template function (there are so many ways this could end up… you just need to provide the exact use case).

4

It won’t happen on each page. It’s content specific to this page. Like between 75-150 words for Content0 and same for Content1. It’s basically just text that needs to be separated by some html. I don’t know if there is a way to use one .md file with two sections inside it, or use two .md files for one page.

5

Then what defines or tells hugo that “2 contents” are present for a page.

Looks like you need to use the split function. See this comment by @digitalcraftsman.

6

ok I will take a look at this. Thanks!

7

For those who happen on this page here in 2021+, here’s a good resource.

Here’s how I split my content:

    {{ $cols := split .Content "|||||" }}
    <div class="content-column">
        {{ index $cols 0 | safe.HTML }}
    </div>
    And now content:
    <div class="content-column">
        {{ index $cols 1 | safe.HTML }}
    </div>

And in my markdown I would add:

Block 1

|||||

Block 2

Of course the split can be anything you want.