Create an Eleventy (11ty) Site From Scratch

Add Sass Compiling and Watch for Changes in Eleventy (11ty)

Define an Eleventy (11ty) Collection to Create a Blog

Apply a Filter to an Eleventy (11ty) Collection

Generate Eleventy (11ty) Pages From External Data

Build An Eleventy (11ty) Site From Scratch

Filters in Eleventy (11ty) are a way to mutate data including string variables or arrays such as collections. Learn to create a filter for use on a collection which will select a random item from the collection.

Stephanie Eckles: [0:00] A method provided by Eleventy and several individual templating languages are filters, which allows in taking something like a string or an array and applying a mutation on the value.

[0:13] For our project, we would like to output a random post from our blog. One way to add filters is within our eleventyConfig file. Just like our watchTarget and passthroughCopy, they are again attached to our variable that connects to the wider Eleventy configuration.

[0:30] In this case, we will use the function of addFilter, and first we supply the name of our filter, which will be randomPost. Because we'll be applying this to a collection, we know that the data we will receive will be an array. Now we can mutate that array however we would like.

[0:50] In this case, we're going to create a very basic randomizing function and return the first post from the randomSort.

[0:58] Now that we have our randomPost filter created, we'll return to our home page and create the section from the blog. Similar to when we output our blogpost for the main blog.index, we'll create a for loop that will access the post in our collections of post.

[1:20] Let's go ahead and close out the for loop. We'll go to our blog index and grab this link element as that's the only thing we'd like to output for our single post.

[1:33] Now to get that single randomPost, we will pipe in our filter, which again was called randomPost. On save, we receive a compilation error. The reason is Eleventy was expecting the template tags to be using liquid.

[1:50] To resolve this error in the front matter, we'll use the key templateEngineOverride to define that this template should first be compiled using njk, and then markdown.

[2:03] On save, the home page now displays a single post from the blog. Because Eleventy is a static site generator, this post does not update on refresh, but rather on each build.

[2:17] If we trigger another build by saving the index again, we'll see the second save, we got the second post. Third save, we get the first. Fourth save, we get the first again, because this is random and we only have two posts right now.

[2:31] In review, we created a filter randomPost that expected to intake our collection and returns a random single post from that array, then went to our home page and output that single post by piping in our filter to our collections for our post, and the post that is displayed will be updated every time Eleventy compiles.

[2:55] Well, in this instance, we use a filter on our collection. Filters can also be used on strings to affect individual variables throughout your templates.

Course

Build An Eleventy (11ty) Site From Scratch

Apply a Filter to an Eleventy (11ty) Collection

Share this video with your friends