Step by Step Tutorial
2. Liquid
Liquid is where Jekyll starts to get more interesting. It is a templating language which has three main components:
Objects
Objects tell Liquid to output predefined variables as content on a page. Use double curly braces for objects: {{ and }}.
For example, {{ page.title }} displays the page.title variable.
Tags
Tags define the logic and control flow for templates. Use curly
braces and percent signs for tags: {% and
%}.
For example:
{% if page.show_sidebar %}
<div class="sidebar">
sidebar content
</div>
{% endif %}
This displays the sidebar if the value of the show_sidebar page variable is true.
Learn more about the tags available in Jekyll here.
Filters
Filters change the output of a Liquid object. They are used within an output
and are separated by a |.
For example:
{{ "hi" | capitalize }}
This displays Hi instead of hi.
Learn more about the filters available.
Use Liquid
Now, use Liquid to make your Hello World! text from Setup lowercase:
...
<h1>{{ "Hello World!" | downcase }}</h1>
...
To make Jekyll process your changes, add front matter to the top of the page:
---
# front matter tells Jekyll to process Liquid
---
Your HTML document should look like this:
---
---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<h1>{{ "Hello World!" | downcase }}</h1>
</body>
</html>
When you reload your browser, you should see hello world!.
Much of Jekyll’s power comes from combining Liquid with other features. Add frontmatter to pages to make Jekyll process the Liquid on those pages.
Next, you’ll learn more about frontmatter.