Tags
Tags are used to create logic and control flow for templates. The curly brace percentage delimiters {% %} and the text they surround do not produce any visible output when the webpage is rendered.
Objects/variables
Objects output data and are wrapped in double curly brace delimiters {{ }}.
Syntax
{{variable_name}}
Accessing a variable
Variables can be accessed using double curly brace delimiters {{ }}.double curly brace delimiters {{ }}.double curly brace delimiters {{ }}.double curly brace delimiters {{ }}.
Syntax
{% assign variable_name = variable_value %}
{{ variable_name }}
Creating a new variable
Create new variables by assigning values using mathematical operators.
Syntax
{% assign variable_name = variable_value %}
Json objects
Json objects are contained in curly braces. The data is in key/value pairs, separated by commas.
Syntax
{% assign json_object={key_1:value_1,...,key_n:value_n} %}
Example
{% assign j_obj="{"a":"b","c":"d"}" %}
Json arrays
Json arrays are contained in curly braces. Json Objects are also used and are separated by commas. Curly braces hold objects and square brackets hold arrays.
Syntax
{%assign j_arr="[{key_1":value_1},..,{key_n:value_n}]" %}
Example
{% assign j_arr="[{"a":"b"}," {"c":[{"d":"e"}]}] %}
Note: You can only use Json arrays. Other arrays are not supported.
Capture
Capture holds the content within the block and assigns it to the capture variable.
Example
{% capture my_variable %}
I am being captured.
{%endcapture %}
Note: You can have other blocks inside capture. In this case, it will be processed and then stored within the capture variable.
Example
{% capture my_variable%}
{{ name }} is being captured.
{%endcapture %} Conditionals
Syntax
{% if condition_1 %}
block_1
{% elif condition_2 %}
block_2
{% else %}
block_3
{% endif %}
Example
{% if x==1%}
one
{% elif x==2 %}
two
{% else %}
more than 2
{% endif %} Simple for loop
Syntax
{% for variable_name in array %}
{{ variable_name.key_1 }} {{ variable_name.key_2}}...{{ variable_name.key_3 }}
{% endfor %}
Example
<ul>
{% for contact in contacts %}
<li>
{{ contact.sal}} {{ contact.f_name}} {{ contact.m_name}} {{ contact.l_name}}
</li>
{% endfor %}
</ul>
For else loop
Apart from iteration of elements in an array, the For else loop is useful when the array is empty and an action needs to be performed.
Syntax
{% for variable_name in array %}
{{ variable_name.key_1 }} {{ variable_name.key_2 }}...{{ variable_name.key_3 }}
{% forelse %}
block
{% endfor %}
Example
<ul>
{% for contact in contacts %}
<li>
{{ contact.sal }} {{ contact.f_name }} {{ contact.m_name }} {{ contact.l_name}}
</li>
{% forelse %}
No contacts to show.
{% endfor %}
</ul> For range
Example
{% for i in range ( 0, 4) %}
i
{% endfor %}
Output
0123
Syntax
{% for variable_name in range ( start, stop, step ) %}
block
{% endfor %}
Slicing
Syntax
a[start : end] items start through end-1
a[start : ] items start through the rest of the array
a[ : ] a copy of the whole array
a[start : end : step] start through not past end, by step
Description
contacts[10 : 30] returns values from index 10 to index 29
contacts[10 : ] returns values from index 10 to last
contacts[10 : 30 : 5] returns every 5th value from 10 to 29, eg: 10, 15, 20, 25
Example
{% for contacts in contacts[5, ] %}
contact
{% endfor %} Cycle
{% assign links=" [{"url":" "xyz1", "text": "Link 1"}, {"url": "xyz2", "text": "Link 2"}, {"url": "xyz3", "text": "Link 3"}, {"url": "xyz3", "text": "Link 4"}, {"url": "xyz5", "text": "Link 5"}] %}
{% endfor %}
odd url="/xyz1" text="Link" 1
even url="/xyz2" text="Link" 2
odd url="/xyz3" text="Link" 3
even url="/xyz4" text="Link" 4
odd url="/xyz5" text="Link" 5
Note: Strings can be cycle iterated, always use cycle within a loop.
Object iteration
Iterate over objects
Example
{% assign food = {"salt": "1 tbsp", "ketchup": "5 tbsp", "mustard" : "1 tbsp", "pickle": "2 tbsp"} %}
{% for ingredient, amount in food %}
Use {{ amount }} of {{ ingredient }}
<br>
{% endfor %}
Output
Use 1 tbsp of mustard
Use 1 tbsp of salt
Use 5 tbsp of ketchup
Use 2 tbsp of pickle
Note: Order of iteration is random.
Comments
Comments won't be processed.
Syntax
{% comment %} block {% endcomment %}
Example
This is {% comment %} to be ignored {% endcomment%}
Output
This is Case when
This is a switch statement.
Syntax
{% case switch_variable %}
{% when String_1 %}
block_1;
{% when String_2 %}
block_2;
{% else %}
block_3;
{% endcase %}
Example
{% assign x="cream"%}
{% case x %}
{% when "cream" %}
{{x}} is good with cake.
{% when "milk" %}
{{x}} is good with cookies.
{% else %}
{{x}} is good with neither cake nor cookies
{% endcase %}
Output
cream is good with cake.
Raw
Anything within the "raw" block will render as is.
Syntax
{% raw %} block {% endraw %}
Example
{% raw %} {{hi}} {{hello}} {{x}} {{ 5 | plus: 6 }} {% endraw %} is equal to 11.
Output
{{hi}} {{hello}} {{5|plus:6}} is equal to 11.
Include
Include pulls other FACE files into place. It's useful to share smaller chunks across several face files that already inherit other face files.
Syntax
{% include "facefile_name"%}
Extend
This function can be used to extend functions and data from other face files.
Syntax
{% extends facefile_name%}
Note: Extend is similar to inheritence in java and should be declared at the beginning of the face file.
Macro
Macro allows you to define reusable chunks of content. It is similar to a function in a programming language.
Example
{% assign hi1="5" %}
{% assign hi2="6" %}
{% assign hi3="7" %}
{% macro field(name, value, type) %}
<div class= "field">class= "field">
<inputtype= "{{ type }}"name=" {{ name }}"
value=" {{ value }}" />
</div>
{% endmacro %}
{{ field(hi1, hi2, hi3) }}
Output
<input type="7" name="5" value="6">
Math
You can use face to perform basic arithmetic operations like addition, subtraction, division, and multiplication.
Operators
Addition : +
Subtraction : -
Division : /
Division remainder : %
Multiplication : *
Example
{{ 2 + 3 }} (outputs 5)
{{ 10/5 }} (outputs 2)
{{ numItems*2 }}