Changeable heading text for each page in site

support
1

This is a “best practices” question.

I needed to add some text at the beginning of each content page in my site. I created a partial template containing the text that’s loaded from body-beforecontent.html (I’m using the docdock theme) which in turn is loaded from baseof.html. Works fine.

I’m wondering if there’s a way to add arguments to the partial I created so that I can re-use it. Could I put something into the context before I load the template? In the documentation, I didn’t see any way to do that other than to add them to the context. If that’s so, should I add them to config.toml, or should I define them just before I load the template?

2

Like what?

Partials are like any other template, you can load it with conditionals. Depending on what you are going for, there might be a different place to place the partial you want. For instance, maybe you want something loaded at the top of each blog post: you’d want to load that so it only showed when those templates are rendered, and not checked for every page on the site.

I’d be more helpful if you gave concrete examples. :slight_smile:

3

I’ve included a shortened version of what I have:

Snippet from baseof.html:

 <head>
    <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
    { partial "head.html" . }}
</head>
<body data-url="{{ .RelPermalink }}">
    {{ partial "body-beforecontent.html" . }}

That, in turn, includes body-beforecontent.html:

<section class="page">
    <p>show Title</p>
    {{ partial "pageheader.html" . }}
{{ end }}

which includes pageheader.html. In this snippet, I put curly braces around the text areas that I’d like to pass in as arguments/parameters to the partial:

<div class="alert alert-info" role="alert">
    <h4>{Banner title}</h4>
        {Opening blurb}
        <div class="expand">
            <div class="expand-label" style="cursor: pointer;" onclick="$h = 
           $(this);$h.next('div').slideToggle(100,function () {$h.children('i').attr('class',function () {return 
          $h.next('div').is(':visible') ? 'fas fa-chevron-down' : 'fas fa-chevron-right';});});">
          <span style="font-size:x-small;" class="fas fa-chevron-right"></span><span> {Read more...} 
          </span>
    </div>
    <div class="expand-content" style="display: none;">
        <p>{Content to display when expanded}</p>
    </div>
</div>

Can I pass in text for {Banner title}, {Opening blurb}, {Read more…}, and {Content to display when expanded} as arguments to {{ partial "pageheader.html" . }}? Or, do I put them into the context as variables so that the partial can extract them?

4

This isn’t conditionals as much as parameterization. The header always displays a title, a one-line blurb, and a prompt to read more. When expanded, the header shows a small number of paragraphs and lists.

I know how to do conditionalization within the partial, so I can set it up to skip parts. But how do I get the parameters into it? Or, should I say, what’s the most straightforward way?

5

Pretty sure the answer is always via content or data.

An older example that shows a demonstration similar to what you are looking for is found at Sharing WordPress Content with Hugo - Half-Elf on Tech. In that scenario, the content lives in WordPress, but will show up at the top of each page in Hugo.