Source: lib/tags/autoescape.js
Control auto-escaping of variable output from within your templates.
Name | Type | Optional | Default | Description |
---|---|---|---|---|
control | boolean or string |
undefined |
One of `true`, `false`, `"js"` or `"html"`. |
// myvar = '<foo>';
{% autoescape true %}{{ myvar }}{% endautoescape %}
// => <foo>
{% autoescape false %}{{ myvar }}{% endautoescape %}
// => <foo>
Source: lib/tags/block.js
Defines a block in a template that can be overridden by a template extending this one and/or will override the current template's parent template block of the same name.
See Template Inheritance for more information.
Name | Type | Optional | Default | Description |
---|---|---|---|---|
name | literal |
undefined |
Name of the block for use in parent and extended templates. |
{% block body %}...{% endblock %}
Source: lib/tags/else.js
Used within an {% if %}
tag, the code block following this tag up until {% endif %}
will be rendered if the if statement returns false.
{% if false %}
statement1
{% else %}
statement2
{% endif %}
// => statement2
Source: lib/tags/elseif.js
Like {% else %}
, except this tag can take more conditional statements.
Name | Type | Optional | Default | Description |
---|---|---|---|---|
conditional | mixed |
undefined |
Conditional statement that returns a truthy or falsy value. |
{% if false %}
Tacos
{% elseif true %}
Burritos
{% else %}
Churros
{% endif %}
// => Burritos
Source: lib/tags/extends.js
Makes the current template extend a parent template. This tag must be the first item in your template.
See Template Inheritance for more information.
Name | Type | Optional | Default | Description |
---|---|---|---|---|
parentFile | string |
undefined |
Relative path to the file that this template extends. |
{% extends "./layout.html" %}
Source: lib/tags/filter.js
Apply a filter to an entire block of template.
Name | Type | Optional | Default | Description |
---|---|---|---|---|
filter | function |
undefined |
The filter that should be applied to the contents of the tag. |
{% filter uppercase %}oh hi, {{ name }}{% endfilter %}
// => OH HI, PAUL
{% filter replace(".", "!", "g") %}Hi. My name is Paul.{% endfilter %}
// => Hi! My name is Paul!
Source: lib/tags/for.js
Loop over objects and arrays.
Name | Type | Optional | Default | Description |
---|---|---|---|---|
key | literal |
✔ | undefined |
A shortcut to the index of the array or current key accessor. |
variable | literal |
undefined |
The current value will be assigned to this variable name temporarily. The variable will be reset upon ending the for tag. | |
in | literal |
undefined |
Literally, "in". This token is required. | |
object | object |
undefined |
An enumerable object that will be iterated over. |
loop.index: The current iteration of the loop (1-indexed)
loop.index0: The current iteration of the loop (0-indexed)
loop.revindex: The number of iterations from the end of the loop (1-indexed)
loop.revindex0: The number of iterations from the end of the loop (0-indexed)
loop.key: If the iterator is an object, this will be the key of the current item, otherwise it will be the same as the loop.index.
loop.first: True if the current object is the first in the object or array.
loop.last: True if the current object is the last in the object or array.
// obj = { one: 'hi', two: 'bye' };
{% for x in obj %}
{% if loop.first %}<ul>{% endif %}
<li>{{ loop.index }} - {{ loop.key }}: {{ x }}</li>
{% if loop.last %}</ul>{% endif %}
{% endfor %}
// => <ul>
// <li>1 - one: hi</li>
// <li>2 - two: bye</li>
// </ul>
// arr = [1, 2, 3]
// Reverse the array, shortcut the key/index to `key`
{% for key, val in arr|reverse %}
{{ key }} -- {{ val }}
{% endfor %}
// => 0 -- 3
// 1 -- 2
// 2 -- 1
Source: lib/tags/if.js
Used to create conditional statements in templates. Accepts most JavaScript valid comparisons.
Can be used in conjunction with {% elseif ... %}
and {% else %}
tags.
Name | Type | Optional | Default | Description |
---|---|---|---|---|
conditional | mixed |
undefined |
Conditional statement that returns a truthy or falsy value. |
{% if x %}{% endif %}
{% if !x %}{% endif %}
{% if not x %}{% endif %}
{% if x and y %}{% endif %}
{% if x && y %}{% endif %}
{% if x or y %}{% endif %}
{% if x || y %}{% endif %}
{% if x || (y && z) %}{% endif %}
{% if x [operator] y %}
Operators: ==, !=, <, <=, >, >=, ===, !==
{% endif %}
{% if x == 'five' %}
The operands can be also be string or number literals
{% endif %}
{% if x|lower === 'tacos' %}
You can use filters on any operand in the statement.
{% endif %}
{% if x in y %}
If x is a value that is present in y, this will return true.
{% endif %}
Source: lib/tags/import.js
Allows you to import macros from another file directly into your current context.
The import tag is specifically designed for importing macros into your template with a specific context scope. This is very useful for keeping your macros from overriding template context that is being injected by your server-side page generation.
Name | Type | Optional | Default | Description |
---|---|---|---|---|
file | string or var |
undefined |
Relative path from the current template file to the file to import macros from. | |
as | literal |
undefined |
Literally, "as". | |
varname | literal |
undefined |
Local-accessible object name to assign the macros to. |
{% import './formmacros.html' as form %}
{{ form.input("text", "name") }}
// => <input type="text" name="name">
{% import "../shared/tags.html" as tags %}
{{ tags.stylesheet('global') }}
// => <link rel="stylesheet" href="/global.css">
Source: lib/tags/include.js
Includes a template partial in place. The template is rendered within the current locals variable context.
Name | Type | Optional | Default | Description |
---|---|---|---|---|
file | string or var |
undefined |
The path, relative to the template root, to render into the current context. | |
with | literal |
✔ | undefined |
Literally, "with". |
context | object |
✔ | undefined |
Local variable key-value object context to provide to the included file. |
only | literal |
✔ | undefined |
Restricts to only passing the with context as local variables–the included template will not be aware of any other local variables in the parent template. For best performance, usage of this option is recommended if possible. |
ignore missing | literal |
✔ | undefined |
Will output empty string if not found instead of throwing an error. |
// food = 'burritos';
// drink = 'lemonade';
{% include "./partial.html" %}
// => I like burritos and lemonade.
// my_obj = { food: 'tacos', drink: 'horchata' };
{% include "./partial.html" with my_obj only %}
// => I like tacos and horchata.
{% include "/this/file/does/not/exist" ignore missing %}
// => (Nothing! empty string)
Source: lib/tags/macro.js
Create custom, reusable snippets within your templates.
Can be imported from one template to another using the {% import ... %}
tag.
Name | Type | Optional | Default | Description |
---|---|---|---|---|
arguments | arguments |
undefined |
User-defined arguments. |
{% macro input(type, name, id, label, value, error) %}
<label for="{{ name }}">{{ label }}</label>
<input type="{{ type }}" name="{{ name }}" id="{{ id }}" value="{{ value }}"{% if error %} class="error"{% endif %}>
{% endmacro %}
{{ input("text", "fname", "fname", "First Name", fname.value, fname.errors) }}
// => <label for="fname">First Name</label>
// <input type="text" name="fname" id="fname" value="">
Source: lib/tags/parent.js
Inject the content from the parent template's block of the same name into the current block.
See Template Inheritance for more information.
{% extends "./foo.html" %}
{% block content %}
My content.
{% parent %}
{% endblock %}
Source: lib/tags/raw.js
Forces the content to not be auto-escaped. All swig instructions will be ignored and the content will be rendered exactly as it was given.
// foobar = '<p>'
{% raw %}{{ foobar }}{% endraw %}
// => {{ foobar }}
Source: lib/tags/set.js
Set a variable for re-use in the current context. This will over-write any value already set to the context for the given varname.
Name | Type | Optional | Default | Description |
---|---|---|---|---|
varname | literal |
undefined |
The variable name to assign the value to. | |
assignement | literal |
undefined |
Any valid JavaScript assignement. =, +=, *=, /=, -= |
|
value | * |
undefined |
Valid variable output. |
{% set foo = "anything!" %}
{{ foo }}
// => anything!
// index = 2;
{% set bar = 1 %}
{% set bar += index|default(3) %}
// => 3
// foods = {};
// food = 'chili';
{% set foods[food] = "con queso" %}
{{ foods.chili }}
// => con queso
// foods = { chili: 'chili con queso' }
{% set foods.chili = "guatamalan insanity pepper" %}
{{ foods.chili }}
// => guatamalan insanity pepper
Source: lib/tags/spaceless.js
Attempts to remove whitespace between HTML tags. Use at your own risk.
{% spaceless %}
{% for num in foo %}
<li>{{ loop.index }}</li>
{% endfor %}
{% endspaceless %}
// => <li>1</li><li>2</li><li>3</li>