PART 1: INTRODUCTION TO LIQUID (Learning Liquid for WebinOne)

Prerequisites

• Just a very basic understand of HTML. This course will start at the very beginning and build on concepts as we go along. Although, if you’d like to play along we recommend having access to a WebinOne site instance, which you can do so for free here if not already signed up.

• A thirst for knowledge (get it?)

What is Liquid

Firstly, Liquid was designed to be easy to use and understand, while providing great power and flexibility. The perfect coding language for designers and front-end devs… which is why we use it in WebinOne.

Liquid is defined as a templating language, meaning it uses templated snippets of code, or layouts, to be later populated with your sites data/content.

On top of this it provides methods for retrieving your sites data and to manipulate that data, hence controlling the final output based on a variety of conditions.

In a nutshell; it allows you to retrieve site data, adjust it for your needs, and render it in the browser based on your required layout.

In a smaller nutshell; it helps you build awesome dynamic websites.

Tricksy Little Templates

Being called a ‘templating language’ often confuses Liquid beginners, as a ‘template’ is typically thought of as the entire wrapper for the whole contents of a page. Whereas in this sense, a template is simply a part, or snippet, of the overall page/document that will be used to format a set of data. In WebinOne, we tend to refer to this concept as a Layout.

Simplified Syntax

Wherever you see characters like {{ }} and {% %}, this is the Liquid syntax being used.

Let’s clarify what Liquid is with a simplified example.

So, you’ve saved some navigation items in WebinOne via the Menu module. Now you have ‘Home’, ‘About’, and ‘Contact’ as your dataset.

You can retrieve that dataset with Liquid:

{% component type: "menu" %}

And create a layout (template) to use:

<ul>
{% for item in menu %}
  <li><a href="{{item.url}}">{{item.name}}</a></li>
{% endfor %}
</ul>

See all those curly brackets and percent characters? They denote data placeholders and layout constructs in Liquid.
Which, with your dataset, would render:

<ul>
  <li><a href="/home">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
</ul>

Notice how the end result contains no Liquid syntax. This is because Liquid is processed on the server-side and only sends the final output to the browser for rendering - making it a fast and secure server-side language.

The above example has been simplified for illustration purposes. The actual WebinOne Menu module has a few other aspects to it which we’ll cover as we dig deeper.

Why do we use Liquid

Using Liquid puts programmatic control of data into the hands of front-end designers/developers, significantly enhancing the possibilities in the realm of web development when working with dynamic data, reducing the need to use more complex server-side languages like PHP, Python, Ruby, etc. which are often restricted in use within a CMS or, are beyond the toolset of the designer or front-end developer.

Wow, that was a long sentence.