Eleventy Recipes Wordmark

Eleventy Recipes

Create a collection

By Jon Thomas

Collections allow you to create a single data set out of multiple pieces of data, and loop over them so you can output them them in different ways. A common use for collections might be to display a list of blog posts. The Eleventy documentation goes into great detail on collections, so let's just look at the most basic way you can create your first collection.

Prerequisites

Directions

  1. Create a new directory in your _src folder to contain multiple entries. For this example, we'll call it posts.
  2. Create a few entries. For this example, let's assume we're writing blog post entries using Markdown. We'll create three basic entries called my-first-post.md, my-second-post.md and my-third-post.md.
_src/
  posts/
    my-first-post.md
    my-second-post.md
    my-third-post.md
  1. Add some front matter each file. For now, we'll just specify a layout, title and a tag. Tags are the easiest way to establish a collection of related data.

Here's how my-first-post.md looks.

---
layout: base
title: My First Post
tags: general
---

Hello from {{ title }}!
  1. By simply adding a tag to each entry, you have established your first named collection. You can now output it by using a loop, and by referencing tag you added to each file.
## My posts

{%- for post in collections.general %}
* [{{ post.data.title }}]({{ post.url }})
{%- endfor %}

The above code will output the following HTML:

<h2>My posts</h2>

<ul>
  <li><a href="/posts/my-first-post.md">My First Post</a></li>
  <li><a href="/posts/my-second-post.md">My Second Post</a></li>
  <li><a href="/posts/my-third-post.md">My Third Post</a></li>
</ul>
  1. Once you create your first collection, there are several ways you can manipulate it:

Related

Resources