Eleventy Walk Through

Collection Creation

In Eleventy, collections are added to the collections object by tags in markdown file front matter. Pagination objects are created by pagination in template file front matter. Collections are available to all templates, but pagination is specific to the template it is invoked in.

Using JavaScript, new collections can be created from existing collections, or from the data sets created by pagination. Eleventy provides the addCollection method, which adds whatever is returned by its callback to the collections object. The callback can use methods such as getAll, getFilteredByTag, or getFilteredByGlob to access the source data.

New Collection from Tags in Markdown Files

The markdown files src/posts/*.md have front matter with a tags value of "post". The getFilteredByTag method can get that collection and create a new one from that.

In .eleventy.js add this :

eleventyConfig.addCollection("testCollection01" , function(collection) {
    var postCollection = collection.getFilteredByTag("post");
    return postCollection;
});
			

Create a template src/collectiontest.njk to call this new collection.

Note that templateContent is used here as described in Collections and Markdown Content.

---
title: Collections Test
---
{% include "_head.njk" %}
<h1>{{ title }}</h1>
<h2>New Post Collection</h2>
<ul>
    {% for item in collections.testCollection01 -%}
    <li>
    <h4>{{ item.data.title }}</h4>
    <small>{{ item.date | dateformat }}</small>
    {{ item.templateContent | safe }}
    </li>
    {% endfor -%}
</ul>
{% include "_foot.njk" %}
			

The file dist/collectiontest.html should be found, with the markdown content in a list form.

New Collection from Pagination in Templates

The template src/fishpaged.njk has front matter, with pagination calling from a JSON file. The getFilteredByGlob method can get the pagination data via the template and create a new collection from that.

In .eleventy.js add this :

eleventyConfig.addCollection("paginationCollection" , function(collection) {
    var pageCollection = collection.getFilteredByGlob("**/fishpaged.njk");
    return pageCollection;
});
			

Add this to src/collectiontest.njk to call this new collection :

<h2>New Pagination Collection</h2>
<ul>
    {% for item in collections.paginationCollection -%}
    <li>{{ item.data.title }}, {{ item.url }}, {{ item.date }}, {{ item.data.fishList.fish }}</li>
    {% endfor -%}
</ul>
			

The file dist/collectiontest.html should now also contain the stringified JSON data.

New Collection from Tags in Templates

Add tags: fishtag to the front matter of the src/fishpaged.njk template.

The getFilteredByTag method can get that collection and create a new one from the JSON.

In .eleventy.js add this :

eleventyConfig.addCollection("templateTagCollection" , function(collection) {
    var coll = collection.getFilteredByTag("fishtag");
    return coll;
});

			

Add this to src/collectiontest.njk to call this new collection :

<h4>New Tag from Template Collection</h4>
<ul>
    {% for item in collections.templateTagCollection -%}
    <li>{{ item.data.title }}, {{ item.url }}, {{ item.date }}, {{ item.data.fishList.fish }}</li>
    {% endfor -%}
</ul>
			

The file dist/collectiontest.html should now also contain the stringified JSON data a second time. But of course this time it was attained via a tag instead of a file path.

New Collection from Data in Templates

The template src/index.njk has front matter data called birds. The getFilteredByGlob method can get that data via the template and create a new collection from that. This gives oher templates access to the data in that template.

In .eleventy.js add this :

eleventyConfig.addCollection("dataCollection" , function(collection) {
    var coll = collection.getFilteredByGlob("**/index.njk");
    return coll;
});
			

Add this to src/collectiontest.njk to call this new collection (note how this one adds a secondary loop to cycle through the birds list) :

<h2>New Data Collection</h2>
<ul>
{% for item in collections.dataCollection -%}
    <li>
    {{ item.data.title }}, {{ item.url }}, {{ item.date }}, {{ item.data.birds }}
        <ul>
            {% for bird in item.data.birds -%}
            <li>{{ bird }}</li>
            {% endfor -%}
        </ul>
    </li>
{% endfor -%}
</ul>
			

The file dist/collectiontest.html should now also contain a list of the data found in the src/index.njk front matter.