Eleventy Walk Through

Filters

Filters in Eleventy

Filters in Eleventy are JavaScript functions that accept content, modify it, then return it to be displayed in place of the original. They are added to the .eleventy.js config file.

Some filters are built-in via the template languages, e.g. safe and url_encode are available by default. But Eleventy does lack certain formatting features that can be found in other templating platforms, date formatting for example. A JavaScript function can be added as a filter to provide that formatting.

Create a Filter

There is an Eleventy method addFilter you can use. addFilter is a universal filter and will work with Liquid, Nunjucks, JavaScript, and Handlebars. Eleventy also has specific methods for each of those languages.

Edit the config file to create a filter named decorate. This will add asterixes to the start and end of the filtered content :

module.exports = (function(eleventyConfig) {

    eleventyConfig.addPassthroughCopy("src/js");
    eleventyConfig.addPassthroughCopy("src/css");

    eleventyConfig.addFilter("decorate", function(text) {
        return "***"+text+"***";
    });

    return {

        dir: {
            output: "dist",
            input: "src",
            data: "jsondata",
            includes: "partials_layouts"
        },

        templateFormats: ["njk", "md"]
    };

});

Edit the src/index.njk file to use the filter (using a pipe <li>{{ bird | decorate }}</li>) :

---
title: Birds
birds:
  - robin
  - finch
  - sparrow
---
{% include "_head.njk" %}
    <h1>{{ title }}</h1>

    <ul>
        {% for bird in birds %}
        <li>{{ bird | decorate }}</li>
        {% endfor %}
    </ul>

{% include "_foot.njk" %}

The dist/index.html should now have asterixes in the list items.

<ul>
    <li>***robin***</li>
    <li>***finch***</li>
    <li>***sparrow***</li>
</ul>

Format a Date

Using Eleventy in the NPM ecosystem makes NodeJS modules available for use. There is a module called Moment which is very popular for formatting dates. However, because Eleventy renders dates to the local timezone, adjusting back to UTC might be desired. For that, Moment-Timezone can be used. First, install moment-timezone :

npm i -D moment-timezone

Edit .eleventy,js to require moment-timezone and add a filter dateformat :

var moment = require('moment-timezone');

module.exports = (function(eleventyConfig) {

    eleventyConfig.addPassthroughCopy("src/js");
    eleventyConfig.addPassthroughCopy("src/css");

    eleventyConfig.addFilter("decorate", function(text) {
        return "***"+text+"***";
    });

    eleventyConfig.addFilter("dateformat", function(dateIn) {
        return moment(dateIn).tz('GMT').format('YYYY MMMM DD, dddd, HH:MM:SS z');
    });

    return {

        dir: {
            output: "dist",
            input: "src",
            data: "jsondata",
            includes: "partials_layouts"
        },

        templateFormats: ["njk", "md"]
    };

});

More information on using Moment-Timezone can be found in the Moment-Timezone official documentation.

Edit src/postlist.njk so that it includes {{ post.data.date | dateformat }} :

<!DOCTYPE html>
<html>
<head>
    <title>Blog Posts</title>
</head>
<body>
    <ul>
        {% for post in collections.post -%}
        <li><a href="{{ post.url }}" >{{ post.data.title }}, {{ post.data.date | dateformat }}</a></li>
        {% endfor -%}
    </ul>
</body>
</html>

The resulting dist/postlist/index.html should now have these list items in a more readable format:

<ul>
    <li><a href="/posts/post-01/">Blog Post 01, 2018 December 31, Monday, 19:12:00</a></li>
    <li><a href="/posts/post-02/">Blog Post 02, 2019 January 01, Tuesday, 19:01:00</a></li>
    <li><a href="/posts/post-03/">Blog Post 03, 2019 January 02, Wednesday, 19:01:00</a></li>

There is more information on filters. Check out the Eleventy documentation for more details.