Documentation Pages
JavaScript Template Literals
Template Languages:
| Eleventy Short Name | File Extension | NPM Package |
|---|---|---|
jstl | .jstl | N/A |
You can override a .jstl file’s template engine. Read more at Changing a Template’s Rendering Engine.
JavaScript Template Literal files behave like other Eleventy template languages: primarily because they support Front Matter and don’t necessarily look like JavaScript. However, for most use cases, it’s recommended to use the standard JavaScript template type, which has more comprehensive support for template literals.
For .jstl files, tagged templates are not yet supported. Use the JavaScript template type if you want to use tagged templates.
Read more about JavaScript Template Literals on MDN.
Samples #
This works the same as any other template. You can include front matter and everything outside the front matter will be parsed as a standard JavaScript Template Literal.
---
name: zach
---
<p>${name.toUpperCase()}</p>While backticks around your template content are considered optional, you can include them if you’d like.
---
name: zach
---
`<p>${name.toUpperCase()}</p>`