HUGO

Target multiple content blocks from leaf page

I’ve done some reading in the forums, and this seems to be solved several different ways.

I have two “chunks” of markdown content for a page:

  1. Main content
  2. Callout content
<div class="row">
    <div class= "col-sm-8 col-md-9">

{{< markdownify >}}

markdown chunk 1
        
{{</markdownify>}}

    </div>
    <div class="col-sm-4 col-md-3">
        <div class="card card-ipad card-ipad-grey-small" role="complementary">
            <h2 class="card-title">Additional Resources</h2>
            <div class="card-body">

{{<markdownify>}}

markdown chunk 2

{{</markdownify>}}
                </p>
            </div>
        </div>
    </div>
</div>

Since this format is repeated w/a few variation, I would like to transform it into a template (single-with-callout). I know I can drop one of the content areas into the front-matter (.Params.callout-title, .Params.callout-content), but that seems a bit cumbersome, given that both chunks will contain multiple paragraphs w/ links.

I could also create a shortcode for my callout, but that leaves all the column-handling in the content page. I guess I could do a bunch of nested shortcodes:

{{<2-cols>}}
  {{<1st-col>}}
     {{<markdownify>}}
       content block 1
     {{</markdownify>}}
  {{</1st-col>}}
  {{<2nd-col>}}
     {{<callout "some callout title">
     {{<markdownify>}}
       content block 1
     {{</markdownify>}}
     {{</callout>
  {{</2nd-col>}}
{{</ 2-cols>}}

Is there any way of targeting a second “content” block into the template? (That is, ` {{- .Content2 -}}’ or something similar.) Is it possible to populate Scratch within a shortcode, and then read that out w/in the template?

Would it be better to convert the single page into a bundle that has a resource page containing the content for the secondary content area?

Hmm… Now that I’ve been forced to formulate the question, I think I have an answer that uses nested shortcodes + Scratch.

I use a shortcode to layout the callout. It is wrapped by another shortcode that captures it and drops it in a Scratch. The template is responsible for the 2-col layout, and simply drops the scratch in place when the callout is needed.

Page

{{< markdownify >}}
main content
{{</markdownify>}}


{{<toScratch "callout">}}
{{<ipad-callout class="card-ipad-grey-small" title="Additional Resources">}}
callout content
{{</ipad-callout>}}
{{</toScratch>}}

toScratch

{{ $.Page.Scratch.Add (.Get 0) .Inner }}

Template

<snip>
<div class="content-body">
                <div class="row">
                    <div class= "col-sm-8 col-md-9">
                        {{- .Content -}}
                    </div>
                    <div class="col-sm-4 col-md-3">
                        {{ $.Page.Scratch.Get "callout" }}
                    </div>
                </div>
            </div>
</snip>

This seems really extensible as multiple scratches can be prepopulated. The scratch name on the page is tightly coupled to the template, but we are specifying the layout template on the page anyway.

But I would be interested if there is a better way.