Lesson 9—Data and Collection

• Tag
• Data merge
• Custom collections

Collection

_includes/layout.html file:

<ul>
{% for post in collections.post reversed %} 
  <li>
    <a href="">
      {{ post.data.title }}
    </a>
  </li>
{% endfor %} 
</ul>

_includes/post.html file:

---
layout: layout
---
<h1>Lesson 9—Data and Collection</h1>
<p>Published at Fri Jul 31 2020 03:28:45 GMT+0000 (Coordinated Universal Time)</p>

Deep merge

We can have default data defined in a folder via folder_name.json. Depending on the characteristics of the data type in the folder, we may either want an individual item to replace this default data or merge the data set.

module.exports = function(eleventyConfig) {

  // Allow data cascading instead of replacing. Mainly for post tags.
  eleventyConfig.setDataDeepMerge(true);

};

Using custom collection to get latest 3 items

In this example, we create a custom collection to fetch the latest 3 items via JavaScript.

module.exports = function(eleventyConfig) {

  eleventyConfig.addCollection("lastThreeTasks", function(collection) {
    return collection.getFilteredByTag('task').slice(-3).reverse()
  });

};

Now we can use the collection, which is an array of items.

<h2>Latest 3 Tasks</h2>
<ul>
{% for task in collections.lastThreeTasks %}
  <li class="is-done-">
    {{ task.date toISOString }}
    {{ task.data.title }}
  </li>
{% endfor %}
</ul>

Adding shortcode

Shortcode is a JavaScript code snippet to return a new output from the given input.

For example, the following shortcode get the last post title from the given collection.

module.exports = function(eleventyConfig) {

  eleventyConfig.addShortcode("lastPostTitle", function(collection) {
    return collection[collection.length-1].data.title
  });

}

Now we can use the code in our HTML or Markdown content:

<p>My latest post is {% lastPostTitle collections.post %}.</p>

Comments