Load collection into an <ul>

support
1

Hi! Very first steps with Hugo here.

I’m trying to define a services section into a homepage. I have a partial section and I define config.toml as this:

        [[params.services.row.list]]
            icon = "fa-shopping-cart"
            title = "LIPSUM"
            description = "Lorem ipsum "
            skills = ["prueba1", "prueba2", "prueba3"]

        [[params.services.row.list]]
            icon = "fa-laptop"
            title = "Responsive Design"
            description = "Lorem ipsum"
            skills = ["prueba4", "prueba5", "prueba6"]

        [[params.services.row.list]]
            icon = "fa-lock"
            title = "Web"
            description = "Lorem ipsum"
            skills = ["prueba7", "prueba8", "prueba9"]

How can I iterate the “service” skills as a li into an ul for every params.services.row.list on my partial?

2

I reply myself: Pretty Easy!

{{ range .Site.Params.services.row }}
        <div class="row text-center">
            {{ range .list }}
            <div class="col-md-4">
                <span class="fa-stack fa-4x">
                    <i class="fa fa-circle fa-stack-2x text-primary"></i>
                    <i class="fa {{ .icon }} fa-stack-1x fa-inverse"></i>
                </span>
                <h4 class="service-heading">{{ .title | markdownify }}</h4>
                <p class="text-muted">{{ .description | markdownify }}</p>
                <ul>
                  {{ range $skill := .skills }}
                    <li>{{ $skill }}</li>
                  {{ end }}
                </ul>
            </div>
            {{ end }}
3

@rayworld Glad you figure it out. Have you considered adding this to a .toml/.yml file inside of /data instead? Just another option if you’re worried about bloating our config. Cheers. Read the docs here.

4

Thanks for your reply and your advice! I’m going to move it to a new toml into the data folder!

:smiley: