[SOLVED] How to display a partial with data pulled from one specific data file?


I’m a newbie and just starting out with Hugo and I’m trying to customize a theme.
I want to use the same partial in the index.html multiple times but with different text that’s stored in data files. I understand how to iterate through all the data files and display all resulting partials at one go, but I can’t figure out how to display one partial with the input from one specific data file at a time …
How can I tell the partial to just pull the data from one specific file?

Here’s what I have so far. This displays all partials instead of one at a time.

--> layouts: index.html

{{ partial "colorlines.html" . }} <-- how can I tell here which yaml data file to use in partial?

--> partial: colorlines.html
{{ range .Site.Data.colorlines }}
                <section class="colorline background-c1">
                    <div class="container">
                        <div class="col-md-4 col-sm-12">
                          <h2>{{ .name }}</h2>
                            <div class="col-md-8 col-sm-12">
                                <div class="colorline-text">
                                  <p>{{ .description }}</p>
    {{ end }}

--> data: c1.yaml , c2.yaml etc.

name: "myname"
description: "my description"

So I technically want to do something like this in index.html:

{{ partial "colorlines.html" . use data from c1}}
... some other partials
{{ partial "colorlines.html" . use data from c2}}

I’m sure this is fairly easy and I searched the docs and forums for answers but I still don’t understand how to do this …

Thanks for any help!

The partial template function allows you to pass the name of the partial and a context (a.k.a. the .) to access data within the template.

It’s actually possible to modify the last parameter. Your case can pass a dictionary that contains the context (for the case you need it) and the name of the data file. Alternatively, you could use the data file directly:

{{ partial "colorlines.html" (dict "context" . "data" "c1") }}
... some other partials
{{ partial "colorlines.html" (dict "context" . "data" "c2") }}

Or you can pass the data files directly:

{{ partial "colorlines.html" (dict "context" . "data" .Site.Data.c1) }}
... some other partials
{{ partial "colorlines.html" (dict "context" . "data" .Site.Data.c2) }}

Within the template you can access the context with .context and your data files via .data.

1 Like

Awesome! Thank you for the examples!
I was able to make the second one work like this:

--> in index.html
{{ partial "colorlines.html" (dict "context" . "name" .Site.Data.colorlines.c1.name "description" .Site.Data.colorlines.c1.description) }}

But I’m not sure if I understand how your first example works… if I pass the name of the data file it just prints out that string, not the data inside the data file. Like this:

{{ partial "colorlines.html" (dict "context" . "name" "c1") }} 

This just puts the string “c1” into the {{.name}} inside the partial and so on the site it prints “c1”. From your explanation I understood that it should somehow pull the data from the c1.yaml file. Or is this how you meant it?

Well, your first example used the filename of the data file. Within your partial you would have to access somehow like this:

{{ .context.Site.Data.( .name ) }}

But you might agree that my second example, i.e. the version you’re using, looks cleaner. I just wanted to showcase this approach as well.

Thanks, yes I had tried something (kinda) like that in the partial but I have still difficulties with the syntax. But you’re right, the second example is a bit cleaner anyway.

Thanks again for your help!