一个模板 110 个多个数据源

11ty multiple data sources for one template

我正在使用 11ty 构建静态网页。 我将数据源创建为 json 文件并将它们存储在可全局访问的 _data 目录中。

template.njk
{% for key, value in data %}
    <div>
        <span class="text-4xl">{{key}}</span>

        <ul>
           {% for item in value %}
            <li>{{ item.country }}</li>
           {% endfor %}
        </ul>
    </div>
{% endfor %}
_data
    data_source_1.json
    data_source_2.json
    data_source_3.json

我不想拥有 3 个模板。我只想要一个模板。 如何将每个数据源作为变量传递给模板?

所以,在这种情况下不能这样做的基础上: 我的解决方法是为每个数据集制作一个专用模板。似乎打败了拥有模板的对象。无论如何,我正在从定制的 php 和 mysql 后端构建数据和模板。

11ty 不同于JavaScript frameworks/libraries 左右。如果有多个来源,您不需要在每个模板上“引入”所有数据。它可以通过“创建一次,随处使用”风格的集合或全局 _data 文件来完成。

查看有关从 _data 页面创建页面(和集合)的简短 EggHead 视频:https://egghead.io/lessons/11ty-generate-eleventy-11ty-pages-from-external-data

它类似于带有负鼠数组的文档中的基本示例,但前面的 addAllPagesToCollections: true 行将创建全局可用的集合。

假设您添加另一个模板以显示来自 _data 源的单个元素并将所有元素添加到集合中,在 books.njk 模板中......然后在任何页面上没有“在前面引入数据”你可以:

{% for book in collections.books %}
  ## [ {{ book.data.title }} ]( {{ book.url }} )
{% endfor %}

...这样您就可以在单个页面上拥有尽可能多的不同“数据源”集合。关于这个主题肯定还有更多要说的,但希望它对您有所帮助,并为您指明了在文档和网上进行一般挖掘的方向。

编辑:

根据您的数据,如果不需要单独的页面,您还可以将全局 _data 页面直接存储在 .json 中,并在不创建集合的情况下循环访问它们。

_data/family.json

{
  "possums":[
    {
        "name": "Fluffy",
        "age": 2
      },
      {
        "name": "Sparky",
        "age": 3
      },
      {
        "name": "Boby",
        "age": 1
      }
  ]
}

someTemplate.md

{% for possum in family.possums %}
  {{ possum.name }} is {{possum.age}} years old
{% endfor %}

将 _data 文件存储为 .js 也可以通过导出来实现,但是对于少量数据来说,最简单的方法是 the.json 方式。

大多数情况下,您会有一个 _data/website.json 文件,其中包含诸如“名称、标语等”之类的全局数据。