eleventyNavigation | ||||||||
---|---|---|---|---|---|---|---|---|
|
Add a date
key to your front matter to override the default date (file creation) and customize how the file is sorted in a collection.
{% codetitle "YAML Front Matter", "Syntax" %}
---
date: 2016-01-01
---
{% codetitle "YAML Front Matter", "Syntax" %}
---
date: Last Modified
---
Valid date
values:
Last Modified
: automatically resolves to the file’s last modified dateCreated
: automatically resolves to the file’s created date (default, this is what is used whendate
is omitted).2016-01-01
or any other valid YAML date value (leaving off the time assumes midnight in UTC, or00:00:00Z
)"2016-01-01"
or any other valid UTC string that Luxon’sDateTime.fromISO
can parse (see also the Luxon API docs).
If a date
key is omitted from the file, the date is assumed to be:
- If the file name has a
YYYY-MM-DD
format (anywhere), this date is used. - File creation date.
{% callout "info" %}Trying to use date
in your templates? The date
value will likely not be of much use, since Eleventy performs no transformation on this front matter value. You probably want page.date
instead. Check out the values available in the page
variable.{% endcallout %}
You’re probably displaying UTC dates in a local time zone.
Many date formats in Eleventy (when set in your content‘s filename as YYYY-MM-DD-myfile.md
or in your front matter as date: YYYY-MM-DD
) assume midnight in UTC. When displaying your dates, make sure you’re using the UTC time and not your own local time zone, which may be the default.
{% codetitle "YAML Front Matter", "Syntax" %}
---
date: 2018-01-01
---
If you output the Date object in a template, it will convert it to a string for display:
{% codetitle "Liquid, Nunjucks", "Syntax" %}
Using {% raw %}{{ page.date }}{% endraw %} will display a
date using a local time zone like:
Sun Dec 31 2017 18:00:00 GMT-0600 (Central Standard Time)
Note that this appears to be the wrong day!
Nunjucks allows you to call JavaScript methods in output {% raw %}{{ page.date.toString() }}{% endraw %}
. Liquid does not allow this.
{% codetitle "Nunjucks", "Syntax" %}
But {% raw %}{{ page.date.toUTCString() }}{% endraw %} will correctly
display a date with a UTC time zone like:
Mon, 01 Jan 2018 00:00:00 GMT
You could very easily just add a toUTCString
filter in Liquid to perform the same task.
Be careful relying on the default date
associated with a piece of content. By default Eleventy uses file creation dates, which works fine if you run Eleventy locally but may reset in some conditions if you run Eleventy on a Continuous Integration server. Work around this by using explicit date assignments, either in your front matter or your content’s file name. Read more at Content Dates.