Using headless pages in section lists in hugo

Viewed 1226

I've got a requirement to build a section page that is comprised of some static header material, static footer material, and several sections of user-managed content. This user managed content is fragmentary, and as such should not have a permalink.

I thought that a good way to do this might be to use headless pages.

It looks like to do that, these fragments must have a directory with an index.md, and should be accessible using the .Site.GetPage operator.

I'm struggling with figuring out how to use .Site.GetPage to get a list of pages to iterate over. There will be 2..n user sections, and I don't want to rebuild the section's template if the number of content modules changes.

I'm assuming either there's some magic to query multiple pages using .Site.GetPage, or there's an entirely different operator for this.

That, or I've completely misunderstood how to use headless pages.

Here's my template for the section (../layouts/the-range/section.html):

{{ define "main" }}
    <div id="page-wrapper">
        <div class="halfhero" id="map"></div>
    </div>

    {{ $sections := .Site.GetPage "/the-range/*" }}
    <!-- leaf content at .../content/the-range/*/*.md -->
    {{ range $sections }}
    <section class="range-section">
        <div class="section-content">
            {{.Content}}
        </div>
        <img src="{{.Site.BaseURL}}{{.Params.images}}">
    </section>

    {{ end }}
{{ end }} 

The headless content is just a series of markdown files as leaf bundles.

1 Answers

Via the Hugo community at https://discourse.gohugo.io/t/using-headless-pages-in-section-lists-in-hugo/15275/2

Given a structure like this:

content/headless/
├── index.md     # headless = true in front matter
├── five.md
├── four
│   └── index.md
├── one
│   └── index.md
├── three
│   └── index.md
└── two
    └── index.md

You can do:

{{ $headlessbundle := .Site.GetPage "/headless" }}
{{ range ( $headlessbundle.Resources.ByType "page" ) }} <br>
  {{.}}
{{ end }}

Which should output:

Page(/headless/five.md) 
Page(/headless/four/index.md) 
Page(/headless/three/index.md) 
Page(/headless/two/index.md) 
Page(/headless/one/index.md)
Related