liquidjs/docs/source/tutorials/intro-to-liquid.md

title, describe

title	describe
The Liquid Template Language	A short introduction to the Liquid template language and some simple demos.

Liquid is a template language originally implemented in Ruby and used by Shopify, Jekyll, and GitHub Pages. LiquidJS implements it in JavaScript; see Differences with Shopify/liquid for compatibility notes.

There are 2 types of markups in LiquidJS:

• Tags. A tag consists of a tag name and optional arguments wrapped between {%raw%}{%{%endraw%} and %}.
• Outputs. An output consists of a value and a list of filters, which is optional, wrapped between {%raw%}{{{%endraw%} and }}.

{% note info Live Demo %} Before going into the details, here's a live demo to play around: https://liquidjs.com/playground.html. {% endnote %}

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="user" value="{{username}}">

Values in output can be transformed by filters before output. To append a string after the variable:

{{ username | append: ", welcome to LiquidJS!" }}

Filters can be chained:

{{ username | append: ", welcome to LiquidJS!" | capitalize }}

A complete list of filters supported by LiquidJS can be found here.

Tags

Tags are used to control the template rendering process, manipulating template variables, interacting with other templates, etc. For example assign can be used to define a variable that can be later used in the template:

{% 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` does not equal "FOO"
{% endif %}

A complete list of tags supported by LiquidJS can be found here.