Search code examples
gohugohugo-shortcode

Hugo definition of non-site level variables/parameters query

I am using Hugo Universal Theme. I am new to static site generators. This question is for someone who is familiar with hugo templates.

In layouts/partials/features.html we can see where $element.name and $element.name.description are rendered:

{{ if isset .Site.Params "features" }}
{{ if .Site.Params.features.enable }}
{{ if gt (len .Site.Data.features) 0 }}
<section class="bar background-white">
    <div class="container">
        {{ range $index, $element := sort .Site.Data.features "weight" }}
        {{ if eq (mod $index 3) 0 }}
        <div class="col-md-12">
            <div class="row">
        {{ end }}
                <div class="col-md-4">
                    <div class="box-simple">
                        <div class="icon">
                            <i class="{{ .icon }}"></i>
                        </div>
                        <h3>{{ $element.name }}</h3>
                        <p>{{ $element.description | markdownify }}</p>
                    </div>
                </div>
        {{ if or (eq (mod $index 3) 2) (eq $index (sub (len $.Site.Data.features) 1 )) }}
            </div>
        </div>
        {{ end }}
        {{ end }}
    </div>
</section>
{{ end }}
{{ end }}
{{ end }}

The data to be rendered in this case are defined in data/features/consulting.yaml as follows:

weight: 4
name: "Consulting"
icon: "fa fa-lightbulb-o"
description: "Fifth abundantly made Give sixth hath..."

What should I do to add new variable to the yaml file that can later then be rendered through the html file when hugo is compiling the site. I tried to simply add another parameter param1 and then insert a corresponding line in the html file as <p>{{ $element.param1 | markdownify }}</p> just below description paragraph but got error

ERROR 2018/08/23 10:42:42 Error while rendering "home" in "": template: index.html:22:11: executing "index.html" at <partial "features.ht...>: error calling partial: template: partials/features.html:18:56: executing "partials/features.html" at : wrong number of args for markdownify: want 1 got 0

Clearly it seems I have not been able to define the variable properly, but where should I do that? I can add another site variable to config.toml, but I want to learn how to make page specific variables that can be defined in yaml/frontmatter type entries. I tried reading about hugo variables but got bogged down in what is a variable and what is a shortcode. Many thanks for your help with this example.

Solution

  • Well, I found a working answer, but I still do not fully understand how it fits with Hugo variable system, so a better answer and or comments are highly welcome.

    It appears quite simple. I had to define url variable in the yaml file:

    name: "History"
position: "Hx"
url: "/blog/2018/08/23/01-history/"

    and then use in the html file like this: 

    {{ if .url }} 
    <a href="{{ .url }}"> 
    <h5>{{ .name }}</h5>
    </a>
{{ else }}
    <h5>{{ .name }}</h5>
{{ end }}

    What it does is puts the .name in link tag, if .url is defined in .yaml. This works also if an absolute URL is given. So it appears that a page variable is referred to as .myVariable. the template authors used $element.name in another place as above, which confused me.

    I also can refer to the parameter defined in the frontmatter as .Params.name

    I found pointers at https://github.com/devcows/hugo-universal-theme/pull/166 and tested in adjusting the template; it works well.