Conditionally render multiple sections in Hugo

In Hugo, there is a very useful feature that can render multiple parts based on conditions. This feature allows us to show/hide certain parts of the page based on specific situations or conditions. Whether we are building a static website or a dynamic website, this conditional rendering function can help us more flexibly control the way the page is presented. In this article, I will discuss with you how to implement conditional rendering of multiple parts in Hugo and its usage scenarios.

Question content

I want to render all markdown files in each folder except the static files in the homepage of the website. One way is to use union in hugo, but with The number of folders increases and I find myself repeating union everywhere (the code with the union is commented out, and it's working by the way), so I thought using slices would be a better idea, but when I try When using slices I get the following error -

Failed to render page: "home" failed to render: "(directory path)\layouts\index.html:12:19": Execution of template at <.pages> failed: Unable to evaluate field in page of type string

Directory Structure

index.html code

{{ define "main" }}
<ul class="homepage-topic-sections-container">
    {{$sectionNames := slice "posts" "problems" "tutorials"}}
    {{range $index, $sectionName := $sectionNames}}
    {{ range where .Pages "Section" $sectionName }}
    {{/*
    {{ range union (union
    (where .Pages "Section" "posts")
    (where .Pages "Section" "problems"))
    (where .Pages "Section" "tutorials")
    }}
    */}}
    <li>
        <section class="homepage-topic-section">
            <h1 class="topic-heading"><a href="{{.Permalink}}">{{.Title}} </a></h1>
            <div>
                {{ range .Pages }}
                <h3><a href="{{.Permalink}}">{{.Title}} &middot; {{.Date.Format "January 2, 2006"}}</a></h3>
                {{ end }}
            </div>
        </section>
    </li>
    {{end}}
    {{end}}

</ul>
{{ end }}

Solution

https://www.php.cn/link/1330fef5fe4f742c1918c585c2da13b3：

Context (aka "dot")

The most overlooked concept about go templates is {{ . }} Always refer to the current context.

• At the top level of the template, this will be the dataset available for the template to use.
• However, inside the iteration, it will have the value of the current item in the loop ; i.e. {{ . }} will no longer reference the data available to the entire page.

In the code below, the points in .pages have the value of the current item in the first range operation. The value's type is string, and it has no field pages. That's why it failed, execute of template failed at <.pages>: can'tvaluate field pages in type string.

{{ define "main" }}
<ul class="homepage-topic-sections-container">
    {{$sectionnames := slice "posts" "problems" "tutorials"}}
    {{range $index, $sectionname := $sectionnames}}
    {{ range where .pages "section" $sectionname }}
                   ^^^^^^

One possible fix is ​​to use $. to access the global context: .pages ==> $.pages.

Perhaps a better solution would be to list the exclude section. Then there is no need to modify the code when adding more folders:

{{ define "main" }}
<ul class="homepage-topic-sections-container">
    {{ range where .Pages "Section" "!=" "static" }}
    <li>

The above is the detailed content of Conditionally render multiple sections in Hugo. For more information, please follow other related articles on the PHP Chinese website!