Deploy yml array with Hugo Statics - html

Question

This is my first post on Stack Overflow, thanks in advance for your attention. i've been working on a project in which I need a Yaml file to load some information into cards. The site is made with Hugo and bootstrap 5. The structure is generated, but hugo only shows the last array of the list of objects that I need to show. What will be the problem? Thanks for your time! I hope you'll can help me.
YML file content:
news :
path : images/news.jpg
title : Noticias
subtitle : Lorem ipsum asibet
text : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
path : images/news1.jpg
title : Noticias1
subtitle : Lorem ipsum asibet
text : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
path : images/news2.jpg
title : Noticias2
subtitle : Lorem
text : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{{ $data := index .Site.Data }}
{{ with $data.news }}
{{ range $data.news }}
<div class="container-fluid" style="background-color: #F5EBDC">
<div class="container mr-5 " style="background-color: #F5EBDC">
<div class="px-0 rounded-3">
<div class="row justify-content-center">
<div class="col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4 col-xxl-4 scale-hover">
<div data-aos="fade-up" data-aos-duration="800" data-aos-mirror="true"
class="card aos-item m-5 card-shadow" style="background-color: #502314; border-radius: 2rem;">
<div class="aos-item img-fluid card-img-top">
<img src="{{ .path | relURL }}" class="d-block w-100" style="max-height: 45rem; object-fit: cover;" alt="...">
</div>
<div class="card-body">
<div class="container-fluid">
<div class="row">
<div class="col-9">
{{ with .title }}
<h2 class="card-title mt-1" style="color: #F5EBDC;"> {{ . }}</h2>
{{ end }}
</div>
<div class="col-11 col-sm-4 col-md-3 col-lg-12 col-xl-4 col-xxl-2">
<div class="badge text-wrap my-4 flex-end bk-color-1" style="background-color: #FF8732; color: #502314;">
News <b></b>
</div>
</div>
<div class="row">
{{ with .subtitle }}
<h5 class="card-subtitle mt-2" style="color: #F5EBDC;">
{{ . }}
</h5>
{{ end }}
</div>
</div>
<div class="row">
<div class="col-12">
{{ with .text }}
<p class="card-text mb-4" style="color: #F5EBDC;">{{ . }}</p>
{{ end }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
{{ end }}
{{ end }}

Answer 1

Looks like your yaml is malformed. Arrays should have a dash or hyphen for each item. Something like:
news:
-
path : images/news.jpg
title : Noticias
subtitle : Lorem ipsum asibet
text : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
path : images/news1.jpg
title : Noticias1
subtitle : Lorem ipsum asibet
text : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
path : images/news2.jpg
title : Noticias2
subtitle : Lorem
text : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
More discussion:
YAML equivalent of array of objects in JSON
Another thing, you should able to eliminate the usage of {{ with ... }} ... {{ end }}. You can print the variable without using "with", e.g.
{{ .title }}