Articles in this section

Liquid Logic

Paul Starkey
  • Updated
Follow

Control

  • IF

    The IF statement is used to execute a block of code only if a certain condition is true.

    Input 
    {% assign color = "red" -%}
{% if {{color}} == "red" -%}
  <p>Red is the color.</p>
{% endif -%}
    Output 
    Red is the color.

  • IF ELSE

    The IF ELSE statement is similar to IF, only this statement gives you another possible choice.

    Input 
    {% assign color = "blue" -%}
{% if {{color}} == "red" -%}
  <p>Red is the color.</p>
{% else -%}
  <p>The color is not red.</p>
{% endif -%}
    Output 
    The color is not red.

    You can also use the IF ELSE statement to check if a variable is blank or has no value. And to display specific content based on the value. For example:

    Input 
    {% assign color = "blue" -%}
{% if {{color}} == "null" -%}
<p>Color has no value.</p>
{% else -%}
<p>Color has a value.</p>
{% endif -%}
    Output 
    The Color has no value.

  • UNLESS

    The UNLESS statement is used to execute a block of code only if a certain condition is NOT true.

    Input 
    {% unless {{color}} == "red" -%}
 <p>Red is not the color.</p>
{% endunless -%}
    Output 
    Red is not the color.

  • CASE

    The CASE statement is used for....

    Input 
    {% case {{color}} -%}
when "red"
 <p>Red is the color.</p>
when "blue"
 <p>Blue is the color.</p>   
when "green"
 <p>Green is the color.</p>
{% endcase -%}
    Output 
    Blue is not the color.

Iteration

  • FOR

    The FOR statement is used to loop through a collection of items to display.

    Input 
    {% for item in collection.items -%}
  <p>Item Name: {{name}}</p>
{% endfor -%}
    Output 
    Item Name: Mark

  • CYCLE

    The CYCLE statement is used to.....

    Input 
    {% for item in collection.items -%}
  <p>Item Name: {{name}}</p>
{% endfor -%}
    Output 
    NOT ACTIVE

Include

  • INCLUDE

    The INCLUDE statement is used to include an external HTML document onto a Web Page.

    For example to include a file named "to-be-included.htm", start by creating a file with the code you want insert into another Web Page.

    Included File - "to-be-included.htm" 
    <html>
<head><head>
<body>
<h2>Include File</h2>
<p>This content in included into a Web page using Liquid Include.</p>
</body>
</html>
    Input 
    {% include "/path-to-file/to-be-included.htm" -%}

Variable

  • ASSIGN

    The ASSIGN statement is used to assign (or update) a value to a variable. After which the data value in the assigned variable will be available to use.

    Input 
    {% assign my-color = "purple" -%}
{{my-color}}
    Output 
    purple

  • CAPTURE

    The CAPTURE statement allows you to assign a block of text or HTML code to a variable.

    Input 
    {% capture myName -%}
<span style="color:blue">{{myName}}</span>
{% endcapture -%}

    After which the variable {{myName}} will be available to render the text or HMTL on a Web Page. The HTML code or text between the CAPTURE tags does not render on the page.

    Output 
    Mark

Comment

  • COMMENT

    The COMMENT statement is used to comment out block of code or text. Commented code/text will not even appear in the Web Page's HTML. So the Liquid Comment is more powerful than the normal HTML comment <!-- content -->.

    {% comment -%}
  <p> This block of code will not display.</p>
{% endcomment -%}

Raw

  • RAW

    The RAW tags disables tag processing for content with the tag.

    {% raw %}
In Handlebars, {{this}} will be HTML-escaped and will render the text on the page.
{% endraw %}

Related articles

Comments

0 comments

Please sign in to leave a comment.