Error message with an if statement in a Hugo template

Question

I have a Hugo Template which checks if there is a name attribute in the array then applies one set of HTML, and another if not.

I also require to check if the array contains a certain string then use a different set of HTML.

Template:

    <section class="resume-section p-3 p-lg-5 d-flex flex-column" id="skills">
      <div class="my-auto" id="skills-content">
        <h2 class="mb-5">Skills</h2>
        {{ range $.Site.Data.skills }}
            <div class="subheading mb-3 skills-heading">{{ .grouping }}</div>
                <ul>
                {{ range .skills }}
                    {{ if isset . "name" }}
                        <li class="list-inline-item">
                          <i class="devicon-{{ cond (in $.Site.Data.devicon (lower .name)) (lower .name) "devicon" }}-plain"></i>
                          <a href="{{.link}}">{{ .name }}</a>
                        </li>
                    {{ else }} {{if in . "express"}}
                      <li class="list-inline-item">
                        <i class="devicon-express-plain"></i>
                        {{ . }}
                      </li>
                      {{ else }}
                      <li class="list-inline-item">
                        <i class="devicon-{{ cond (in $.Site.Data.devicon (lower .)) (lower .) "devicon" }}-plain"></i>
                        {{ . }}
                      </li>
                    {{ end }}
                {{ end }}
                </ul>
        {{ end }}
      </div>
    </section>

JSON file:

[
    {
        "grouping":"Architecture",
        "skills":[ "IP Networking","DNS","Firewalls","Load Balancing","Microservices","RESTful APIs","SaaS/PaaS/IaaS"]
    },{
        "grouping":"Languages, Operating Systems & Tools",
        "skills":["Skills", "Go", "Here"]
    },
    {
        "grouping":"Platform Development & Administration",
        "skills":[ "Skills", "Redacted"]
    },
    {
      "grouping":"Containers & Cloud",
        "skills":[
            {"name":"Redacted","link":"https://example.com"},
          {"name":"AmazonWebServices","link":"https://aws.amazon.com"},
            {"name":"Etc","link":"https://example.com"},
        ]
    }
  ]

I am getting errors when building the site:

Error while rendering "home" in "": template: index.html:4:10: executing "main" at : error calling partial: template: "partials/portfolio/skills.html" is an incomplete or empty template

Answer 1

Replace this code:

{{ else }} {{if in . "express"}}
  <li class="list-inline-item">
    <i class="devicon-express-plain"></i>
    {{ . }}
  </li>
  {{ else }}
  <li class="list-inline-item">
    <i class="devicon-{{ cond (in $.Site.Data.devicon (lower .)) (lower .) "devicon" }}-plain"></i>
    {{ . }}
  </li>
{{ end }}

With:

{{ else if in . "express"}}
  <li class="list-inline-item">
    <i class="devicon-express-plain"></i>
    {{ . }}
  </li>
  {{ else }}
  <li class="list-inline-item">
    <i class="devicon-{{ cond (in $.Site.Data.devicon (lower .)) (lower .) "devicon" }}-plain"></i>
    {{ . }}
  </li>
{{ end }}

The problem is in the first line of the above snippet:

{{ else }} {{if in . "express"}}

versus:

{{ else if in . "express"}}

It might be that you still get an error message since you likely have more code than posted here. But this correction at least fixes that if/else statement mistake.

---

The default pattern for making a cascaded if statement in Hugo looks like:

{{ if ... }}

{{ else if ... }}

{{ end }}

If you want to make a nested if statement inside another, that's possible too:

{{ if ... }}
    {{ if ... }}

    {{ end }}
{{ end }}

Your code created:

{{ if ... }}

{{ else }} {{ if ... }}

    {{ else }}
{{ end }}

The problem here is that the second if statement doesn't have a closing tag. That can be fixed like this:

{{ if ... }}

{{ else }} {{ if ... }}

    {{ end }}
    {{ else }}
{{ end }}

Or we can use:

{{ if ... }}

{{ else if ... }}

    {{ else }}
{{ end }}