Part 1: Introduction to Liquid

This free online course covers every aspect of using the Liquid templating language in OBS - from the very basics right through to advanced implementations.

You’re welcome.

Time for completion: 5 mins

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 OBS 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 OBS.

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 OBS, 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 OBS via the Menu module. Now you have ‘Home’, ‘About’, and ‘Contact’ as your dataset.

You can retrieve that dataset with Liquid:

{% component type: "menu" %}