How to create a list from FrontMatter - Hugo

user_13615781 0
Viewed 952

I'm making a page of Recipes with Hugo.

I've a list in front matter:

title: Recipes Page
Ingredients:
 - 1 potato
 - 1 tomato

In my Layaut default page I have this

{{ .Params.Ingredients }}

I got this in the browser:

[1 potato 1 tomato]

How to get something like this:

- 1 potato
- 1 tomato
hugo markdown
2 Answers

Something like this should work:

{{ range .Params.ingredients }}
<li>
{{ . }}
</li>
{{ end }}

Tip: Use all lower case in Hugo parameters because there are some weird things with Hugo and case sensitivity, i.e., put this in the front matter:

ingredients:
 - 1 potato
 - 1 tomato

Note the lower case i.

user_108813030

I'm going to try to do this in English, Mr. n m's answer is correct, I tried to write this as a comment, but it was too long. But so that you understand why and what you are looking at:

  1. The front matter you created "Ingredients: newline - tab hypen text" is creating an array - in this case I believe called a "map" in Go or HUGO for that matter (and I think a "collection" in the YAML spec...)

    ingredients:

    • tomato
    • potato

  2. So then, when you access the variable ".Params.Ingredients" You are accessing an array and you are getting the array [1 potato 1 tomato].

  3. For instance if you typed (pseudo code here): {{ index .Params.Ingredients 1 }} you would get the first index item of the map (array) and it would output 1 potato.

  4. The Range function Mr n m descibes, does this for you.

I've linked some of the pages which describe this:

https://yaml.org/spec/1.2/spec.html <-- This describes the YAML spec. It's kind of complex.

https://gohugo.io/content-management/front-matter/ <-- Front matter, with what I thought was a great youtube video...

https://gohugo.io/templates/introduction/#iteration <-- covers ranges.

https://gohugo.io/functions/index-function/#readout <-- covers this index IO refer to

And then there is the magic of the {{ . }} <-- "context" which for me, is almost a zen-like aspect of Hugo (or Go templating) which makes sense but is hard to describe, for me at least. But there are tons of descriptions on the hugo discourse.

user_136965400
Related