Using range to extract data pairs from frontmatter

support
1

TBH, I am constantly amazed at Hugo. I haven’t built any websites for best part of 5 years but I can still do most of it myself. Not bad for an ex-front end developer!

For my latest website, using an off-the-shelf theme, I would like to create an <aside> with useful links, which are defined in the frontmatter:

link:
  title:
    - Plants For A Future
    - Spreadsheet
  url:
    - pfaf.org
    - bit.ly/forest-garden-spreadsheet

which would give <a href="https://pfaf.org">Plants For A Future</a> etc.

What I have is just single word anchors working:

I know that I need to use range, and probably slice the array? But it’s been sooo long, I really can’t remember or figure out. Sorry, it really is probably super simple!!

2

You could simplify that data structure and use only one range.

---
links:
  - title: Link 1
    url: https://duckduckgo.com
  - title: Link 2
    url: https://example.org
---

Then, on your partial file:

{{ with .Params.links }}
<ul>
	{{ range . }}
	<li><a href="{{ .url }}">{{ .title }}</a></li>
	{{ end }}
</ul>
{{ end }}

Otherwise you could get the index of either title or url array and get the element with that index from the other array, however that would need that both arrays have the same number of elements.

1 Like
3

Absolutely brilliant, exactly what I was imagining, thank you so much :grinning_face_with_smiling_eyes:

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.