一个模板 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
文件,其中包含诸如“名称、标语等”之类的全局数据。
我正在使用 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
文件,其中包含诸如“名称、标语等”之类的全局数据。