Layout for multiple .Content sections on a page

support
1

I’m new to Hugo, but I have built a “complete” working site. I have searched for the answer to this question extensively. I probably don’t know how to phrase the question.

I want to have two or more content sections (sections as in html tags) on a single page. It appears that the markdown files in a page bundle would be labeled index.md, othertext1.md, etc.

What I don’t know is how to tag the different markdown files in a layout so as to place them. The only example I find is .Content for what is in index.html.

I’m not using a theme.

Thanks in advance!

2

structure

content
├── post/
│   └── test/
│       ├── index.md
│       ├── other-text-1.md
│       ├── other-text-2.md
│       └── other-text-3.md
└── _index.md

content/post/test/index.md

+++
title = 'Test'
date = 2021-09-23T17:03:45-07:00
draft = false
layout = "multiple-content-sections"
+++
This is content/post/test/index.md

layouts/_default/multiple-content-sections.html

{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }}
  {{ range .Resources.Match "*.md" }}
    {{ .Content }}
  {{ end }}
{{ end }}

Or, if you would prefer to access the ancillary files individually instead of within a range:

{{ (.Resources.GetMatch "other-text-1.md").Content }}
{{ (.Resources.GetMatch "other-text-2.md").Content }}
{{ (.Resources.GetMatch "other-text-3.md").Content }}
3

Thank you! The second form you provide is what I am looking for. The first form looks like some of what I had found before.

I want to be able to apply different CSS styles to the different blocks of text.

Question: Is the entry

layout = “multiple-content-sections”

in the front matter required, or just informational? I did not find the text associated with Hugo when doing a quick web search.

4

The layout parameter in frontmatter is not informational. If you notice, I placed the template code in layouts/_default/multiple-content-sections.html, so I needed to tell Hugo which template (layout) to use for content/post/test/index.md.

The layout parameter is not required if you place the template code in one of the usual suspects (e.g., single.html).

5

Thanks again. So the multiple-content-sections is an alternative layout generalizing this form of layout. So far, I have made page-specific layouts, i.e. for a portfolio page: /layouts/portfolio/single.html. I am assuming what you show will work with page-specific layouts.

Follow up question. As the home page is not a page bundle, is there a place to store additional .md files? Is this an (or the) application for the “headless” page bundle I have read about?

6

Yes. To avoid “nil pointer” errors you may have to wrap the statements within a {{ with }} ... {{ end }} construct, such as:

{{ with .Resources.GetMatch "other-text-1.md" }}
  {{ .Content }}
{{ end }}

Yes.

7

The {{ with … end }} construct appears to be required.

The other piece is that the page bundle appears to need to be two levels down, or one level down from the level of the layout.

I tried this, and it didn’t even use the test/single.html file

content
|---- test/
      |---- index.md
      |---- test-text.md

layouts
|---- test/
      |---- single.html

I changed to this, mostly to match what you had above, and it started using the test1/single.html file.

content
|---- test1/
      |---- test2/
      |      |---- index.md
      |      |---- test-text.md
      |---- _index.md

layouts
|---- test1/
      |---- single.html

This lack of orthogonality is worrisome. Maybe page bundles were specifically to address (only) blogs.

I will play some more with that now that I have something working again.

Thanks again!

8

That’s because content/test is not a section—it’s a page.

See https://gohugo.io/templates/lookup-order.

content
└── test/
    ├── index.md
    └── test-text.md

layouts/
└── page/
    └── single.html