Wrangling dates in html files with 11ty

Published: Mon Mar 01 2021

11ty supports an array of template languages and like many static site generators, it also allows you to inject data from your front matter into your templates.

If your template engine is using Nunjucks, then you have access to JavaScript methods in your template and you can format a date quite quickly with .toDateString(). If you are using an HTML template, then the default template engine is liquid and you'll need to use a date filter.

An alternative is to explicitly set the default template engine for HTML templates.

For per-template control, you can set an option in the front matter of your template:

---
templateEngineOverride: njk
---

For a global setting, you can set the config in your .eleventy.js file:

module.exports = {
htmlTemplateEngine: "njk"
};

If you find changing the default template engine causes HTML tag soup in your rendered pages, you probably need apply a safe filter to your content. Keep in mind that the safe filter is a potential security risk if you're rendering untrusted data.