85 lines
1.9 KiB
Markdown
85 lines
1.9 KiB
Markdown
---
|
|
layout: step
|
|
title: Liquid
|
|
position: 2
|
|
---
|
|
Liquid is where Jekyll starts to get more interesting. Liquid is a templating
|
|
language which has three main parts: [objects](#objects), [tags](#tags) and
|
|
[filters](#filters).
|
|
|
|
|
|
## Objects
|
|
|
|
Objects tell Liquid where to output content. They're denoted by double curly
|
|
braces: {% raw %}`{{`{% endraw %} and {% raw %}`}}`{% endraw %}. For example:
|
|
|
|
{% raw %}
|
|
```liquid
|
|
{{ page.title }}
|
|
```
|
|
{% endraw %}
|
|
|
|
Outputs a variable called `page.title` on the page.
|
|
|
|
## Tags
|
|
|
|
Tags create the logic and control flow for templates. They are denoted by curly
|
|
braces and percent signs: {% raw %}`{%`{% endraw %} and
|
|
{% raw %}`%}`{% endraw %}. For example:
|
|
|
|
{% raw %}
|
|
```liquid
|
|
{% if page.show_sidebar %}
|
|
<div class="sidebar">
|
|
sidebar content
|
|
</div>
|
|
{% endif %}
|
|
```
|
|
{% endraw %}
|
|
|
|
Outputs the sidebar if `page.show_sidebar` is true. You can learn more about the
|
|
tags available to Jekyll [here](/docs/liquid/tags/).
|
|
|
|
## Filters
|
|
|
|
Filters change the output of a Liquid object. They are used within an output
|
|
and are separated by a `|`. For example:
|
|
|
|
{% raw %}
|
|
```liquid
|
|
{{ "hi" | capitalize }}
|
|
```
|
|
{% endraw %}
|
|
|
|
Outputs `Hi`. You can learn more about the filters available to Jekyll
|
|
[here](/docs/liquid/filters/).
|
|
|
|
## Use Liquid
|
|
|
|
Now it's your turn, change the Hello World! on your page to output as lowercase:
|
|
|
|
{% raw %}
|
|
```liquid
|
|
...
|
|
<h1>{{ "Hello World!" | downcase }}</h1>
|
|
...
|
|
```
|
|
{% endraw %}
|
|
|
|
To get our changes processed by Jekyll we need to add [front matter](../03-front-matter/) to the top of the page:
|
|
|
|
```markdown
|
|
---
|
|
# front matter tells Jekyll to process Liquid
|
|
---
|
|
```
|
|
|
|
Our "Hello World!" will now be downcased on render.
|
|
|
|
It may not seem like it now, but much of Jekyll's power comes from combining
|
|
Liquid with other features.
|
|
|
|
In order to see the changes from `downcase` Liquid filter, we will need to add front matter.
|
|
|
|
That's next. Let's keep going.
|