Conditional Content Inclusion Pattern

support
#1

I have a client whose site will have several conditional pieces of content that should be shown or not shown depending on the season. I have come up with the following pattern to solve this. I am seeking feedback if this solution is a “good Hugo” pattern (ie, is there a refinement or better way of doing it?).

This particular client has calendar-based events (at least three). I’ll focus on one, their yearly gala. Each year, the basic text of the gala doesn’t change much, but as the gala approaches, information specific to the upcoming gala should be shown. Once the gala occurs, the “before show” information needs to go away and some standard “post show” content needs to be shown (until the next gala).

I intend to control the visibility of these sections via the site params.toml, adding the following:

[gala]
preshow = true
postshow = false

The actual /gala page is structured like so:

/gala
    |
    +-- index.md
        pre-gala-section.md
        post-gala-section.md

The content of index.md is (note the layout: gala parameter):

---
draft: false
title: "Gala"
description: "Description of Gala"
date: 2022-01-26T12:53:02-06:00
menu:
    main:
        identifier: "gala"
        name: "Gala"
        weight: 400
        parent: ""
layout: gala
---

# The {{< exis >}} Gala

Lorem ipsum...

(the shortcode just produces some styled text HTML for the organization)

The post- and pre-gala-section.md files contain (only pre shown for brevity):

---
comment: Controlled by $.Param "gala.preshow"
_build:
    list: false
    render: false
---

# Pre Gala Information

Lorem ipsum...

The heavy-lifting occurs in the theme layouts/page/gala.html:

{{ define "main" }}

<div class="container mt-5">
    <div class="row">
        <div class="col">
            {{ .Content }}
        </div>
    </div>
</div>

{{ if $.Param "gala.preshow" }}
    {{ with .Resources.GetMatch "pre-gala-section.{md,html}" }}
    <div class="container mt-5">
        <div class="row">
            <div class="col">
                {{ .Content }}
            </div>
        </div>
    </div>
    {{ end }}
{{ end }}


{{ if $.Param "gala.postshow" }}
    {{ with .Resources.GetMatch "post-gala-section.{md,html}" }}
    <div class="container mt-5">
        <div class="row">
            <div class="col">
                {{ .Content }}
            </div>
        </div>
    </div>
    {{ end }}
{{ end }}

{{ end }}

This works as desired. The content sections can be edited, as necessary, and shown via changing the parameter in params.toml (or more locally in gala/index.md).

Is there a better way?

#2

I would probably combine cascade with build options in front matter:

If your events are date based (as in: start showing a section 1 week before, stop showing 1 week after), you can use cascade and set publishDate and expiryDate for the sections in question…

You can also control cascade via a top level cascade in config.toml.

#3

Thanks. I am wondering why this works:

    {{ with .Resources.GetMatch "pre-gala-section.{md,html}" }}
                {{ .Content }}
    {{ end }}

and this doesn’t:

    {{ with site.GetPage "pre-gala-section" }}
                {{ .Content }}
    {{ end }}

Since the cited documentation leans towards the latter.

#4

pre-gala-section.md is a page resource, not a page.

content/
└── articles/
    └── article-1/
        ├── foo.md      <-- page resource
        ├── image.webp  <-- page resource
        └── index.md    <-- page
#5

Is the documentation misleading then?

#6

No. The example is for “content/who-we-are.md” which is a regular page, not a page bundle.