使用 Hugo Statics 部署 yml 数组

Question

这是我在 Stack Overflow 上的第一个 post，在此先感谢您的关注。我一直在做一个项目，我需要一个 Yaml 文件来将一些信息加载到卡片中。该站点是用Hugo和bootstrap 5.生成的结构，但是hugo只显示了我需要显示的对象列表的最后一个数组。会有什么问题？谢谢你的时间！我希望你能帮助我。

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

您的 yaml 格式似乎有误。数组中的每一项都应该有破折号或连字符。类似于：

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.

更多讨论：

另一件事，您应该能够消除 {{ with ... }} ... {{ end }} 的用法。您可以不使用“with”打印变量，例如

{{ .title }}

使用 Hugo Statics 部署 yml 数组

Deploy yml array with Hugo Statics

html

hugo

hugo-content-organization