Template Languages
File Extensions
Eleventy can process around ten different template languages (See Intro for the list). Eleventy defaults to Liquid for pages with an HTML extension. Eleventy relies on the file extension to know what language is to be used, so to tell it to use Nunjucks, use the extension *.njk. This can also affect certain defaults, so it's useful just to indicate what language is intended, so even when using Liquid, the extension *.liquid is a good idea.
Different languages have different features and syntax. Nunjucks, for example, can use JavaScript in front matter and data, while Liquid can't. The pages created so far have defaulted to Liquid because their extension was *.html, but to continue from here, they will be converted to Nunjucks.
Change these filenames to the *.njk extension.
animals.html => animals.njk fishpaged.html => fishpaged.njk index.html => index.njk intro.html => intro.njk postlist.html => postlist.njk _includes/_foot.html => _includes/_foot.njk _includes/_head.html => _includes/_head.njk _includes/layout.html => _includes/layout.njk
Changing these filenames will affect includes and layouts, so some content will need to changed. For includes, the ".html" extension must be changed to "njk". And front matter pointing to layouts needs extensions to be changed to ".njk".
animals.njk (include tags for head and foot need double quotes and extension changed to "njk")
fishpaged.njk (include tags for head and foot need double quotes and extension changed to "njk")
index.njk (include tags for head and foot need double quotes and extension changed to "njk")
intro.njk (include tags for head and foot need double quotes and extension changed to "njk")
about.md (change the extension in the front matter to ".njk")
posts/post-01.md (change the extension in the front matter to ".njk")
posts/post-02.md (change the extension in the front matter to ".njk")
posts/post-03.md (change the extension in the front matter to ".njk")
_includes/layout.njk (change the extension in the front matter to ".njk")
_includes/layout.njk (change {{ content }} to {{ content | safe }})
fishpaged.njk (change {{ pagination.pageNumber : plus 1 }} to {{ pagination.pageNumber + 1 }})"
Confirm everything processed correctly. Basically, everything in _site should look the same as before. Note how, even though the templates are now *.njk, the output files are still *.html.
Nunjucks and JavaScript
Create the file jsontest.njk. Note how the front matter starts with ---js :
---js
{
title: "JS test page",
body: "body text from JS",
arctics : function() {
var arctics = ["walrus", "penguin", "puffin", "polar bear"];
return arctics.sort();
}
}
---
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>>
</head>
<body>
<h1>{{ title }}</h1>
{{ body }}
{% for arctic in arctics() -%}
{{ loop.index }}. {{ arctic }}
{% endfor -%}
</body>
</html>
A new folder and file _site/jsontest/index.html should be generated :
<!DOCTYPE html>
<html>
<head>
<title>JS test page</title>
</head>
<body>
<h1>JS test page</h1>
body text from JS
1. penguin
2. polar bear
3. puffin
4. walrus
</body>
</html>
Nunjucks and JavaScript and Pagination
JavaScript front matter provides an extra feature to pagination, the before key. This allows insertion of a JS function to process the data before pagination. Create a src/fishpaged2.njk file, noting the change in the syntax from YAML to JavaScript :
---js
{
title: "Fish Paged 2",
pagination: {
data: "fishList.fish",
size: 3,
before: function(data) {
return data.map(item => 'Fish of the day: '+ item);
}
}
}
---
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<h1>{{ title }}</h1>
<ul>
{% for fish in pagination.items -%}
<li>{{ fish }}</li>
{% endfor -%}
</ul>
</body>
</html>
A new folder and file _site/pagedfish2/index.html should be generated. You should see "Fish of the day:" preceding each list item :
<!DOCTYPE html>
<html>
<head>
<title>Fish Paged 2</title>
</head>
<body>
<h1>Fish Paged 2</h1>
<ul>
<li>Fish of the day: perch</li>
<li>Fish of the day: bass</li>
<li>Fish of the day: bream</li>
</ul>
</body>
</html>
For more details on what different template languages can do, check out the Eleventy documentation on languages.