Key Concepts of Liquid in WISMOlabs
Liquid syntax is simple. There’re 2 types of markups in Liquid:
- Tags. A tag consists of a tag name and optional arguments wrapped between {% and %}.
- Outputs. An output consists of a value and a list of filters, which is optional, wrapped between {{ and }}
Tags
Tags are used to control rendering process, manipulating variables, inter-op with other templates, etc.
For example assign can be used to define a variable which can be later used in:
{% assign foo = "FOO" %}Typically tags appear in pairs with a start tag and a corresponding end tag.
For example:
{% if foo == "FOO" %}
Variable `foo` equals "FOO"
{% else %}
Variable `foo` not equals "FOO"
{% endif %}A complete list of tags supported by Liquid can be found here.
Outputs
Outputs are used to output variables, which can be transformed by filters, into HTML. The following template will insert the value of username into the input’s value:
<input type="text" name="Name" value="{{name}}">Values in output can be transformed by filters before output. To append a string after the variable:
{{ name | append: ", welcome to WISMOlabs!" }}Filters can be chained:
{{ name | append: ", welcome to WISMOlabs" | capitalize }}
A complete list of filters supported by Liquid in WISMOlabs can be found here. Related Articles