Eduardo J. Uribe May 19th

Learn how to display the full content of files inside your collection, on the home page.

Let's say you have created a website for a collection of poems that you've written.

In the home page of your website you would like to display the full content of each poem, in a list.

Like so:

A screenshot of a list of poems in home-page

Let's get started:

<ul>
{% for poem in collections.poems %}
<li>
<a href="#"> {{ poem.data.title }} </a>
<section> {{ ? }} </section>
</li>
{% endfor %}
</ul>

A screenshot of a list of poem titles in the home-page

Alright, so we have set the title.

But, now how do we access the full content of each poem inside the collections.poems?

To access the full content of the poem we use the templateContent key provided in each collection item object.

Collection item object?

Let's take a closer look.

So we have the collections object, which contains our collections.

collections: {
all : [ {...}, {...}, {...} ],

poems : [ {...}, {...}, {...} ]
}

Inside our collections object by default we have the all collection, and following the all collection is any collection we create by assigning key:value tags to our files front-matter.

Like so:

---
title: The first poem.
tags: poems
---

# The first poem.

The poem content...

So, in this case following the all collection, is our poems collection.

collections: {
all : [ {...}, {...}, {...} ],

poems : [ {...}, {...}, {...} ]
}

The poems collection's value is an array of objects.

collection item objects.

Each file that is assigned the key:value pair of tags: poems becomes a collection item object inside the poems collection.

And inside each collection item object we have the following data:

{
inputPath: './poem1.md',

fileSlug: 'poem1',

outputPath: './_site/poem1/index.html',

url: '/poem1/',

data: { title: 'The first poem.',
tags:['poems']
},

templateContent: '<h1>The first poem.</h1><p>My poem content...</p>'
}

Nice...

Theres alot of data we can use, but our focus will be on the templateContent key.

The templateContent key's value is the rendered content of the file. Not including any layout wrappers.

So in this collection item object it's the following content: '<h1>The first poem.</h1><p>My poem content...</p>'.

templateContent: '<h1>The first poem.</h1><p>My poem content...</p>'

Knowing this, we can now access the content of each poem.


<ul>
{% for poem in collections.poems %}
<li>
<a href="#"> {{ poem.data.title }} </a>
<section> {{ poems.templateContent }} </section>
</li>
{% endfor %}
</ul>

A screenshot of a list of poem titles in the home-page

Nice.

But wait a minute.

Included in our content are html tags!

Why?

That's because templateContent value is the rendered content of the file and that includes the html tags.

Luckily, there is a simple solution in Nunjucks to remove the unwanted html tags in our content.

Inside our {{ quote.templateContent }} we can add a safe filter.

Like this:


<section> {{ quote.templateContent | safe }} </section>

This removes any html tags from our content and only displays the content itself.

Let's update our code.


<ul>
{% for poem in collections.poems %}
<li>
<a href="#"> {{ poem.data.title }} </a>
<section> {{ poem.templateContent | safe }} </section>
</li>
{% endfor %}
</ul>

A screenshot of a list of poems in home-page

And there you have it.

Whether you want to display your poems or short blog articles, you now know how to access the full content of the files inside a collection.

Hope some of you find this micro 11ty tip helpful.

Get the most out of 11ty: sign-up and receive micro 11ty tips everyweek.