Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
265 changes: 0 additions & 265 deletions Gemfile.lock

This file was deleted.

29 changes: 14 additions & 15 deletions _basics/introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ description: An overview of objects, tags, and filters in the Liquid template la
redirect_from: /basics/
---

Liquid code can be categorized into [**objects**](#objects), [**tags**](#tags), and [**filters**](#filters).
Liquid uses a combination of [**objects**](#objects), [**tags**](#tags), and [**filters**](#filters) inside **template files** to display dynamic content.

## Objects

**Objects** tell Liquid where to show content on a page. Objects and variable names are denoted by double curly braces: `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`.
**Objects** contain the content that Liquid displays on a page. Objects and variables are displayed when enclosed in double curly braces: `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`.

<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ page.title }}
{% endraw %}
```
Expand All @@ -22,17 +22,15 @@ Liquid code can be categorized into [**objects**](#objects), [**tags**](#tags),
{{ page.title }}
```

In this case, Liquid is rendering the content of an object called `page.title`, and that object contains the text `Introduction`.
In this case, Liquid is rendering the content of the `title` property of the `page` object, which contains the text `{{ page.title }}`.

## Tags

**Tags** create the logic and control flow for templates. They are denoted by curly braces and percent signs: `{% raw %}{%{% endraw %}` and `{% raw %}%}{% endraw %}`.

The markup used in tags does not produce any visible text. This means that you can assign variables and create conditions and loops without showing any of the Liquid logic on the page.
**Tags** create the logic and control flow for templates. The curly brace percentage delimiters `{% raw %}{%{% endraw %}` and `{% raw %}%}{% endraw %}` and the text that they surround do not produce any visible output when the template is rendered. This lets you assign variables and create conditions or loops without showing any of the Liquid logic on the page.

<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{% if user %}
Hello {{ user.name }}!
{% endif %}
Expand All @@ -41,24 +39,25 @@ The markup used in tags does not produce any visible text. This means that you c

<p class="code-label">Output</p>
```text
Hello Adam!
Hello Adam!
```

Tags can be categorized into three types:
Tags can be categorized into various types:

- [Control flow]({{ "/tags/control-flow/" | prepend: site.baseurl }})
- [Iteration]({{ "/tags/iteration/" | prepend: site.baseurl }})
- [Variable assignments]({{ "/tags/variable/" | prepend: site.baseurl }})
- [Template]({{ "/tags/template/" | prepend: site.baseurl }})
- [Variable assignment]({{ "/tags/variable/" | prepend: site.baseurl }})

You can read more about each type of tag in their respective sections.

## Filters

**Filters** change the output of a Liquid object. They are used within an output and are separated by a `|`.
**Filters** change the output of a Liquid object or variable. They are used within double curly braces `{% raw %}{{ }}{% endraw %}` and [variable assignment]({{ "/tags/variable/" | prepend: site.baseurl }}), and are separated by a pipe character `|`.

<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "/my/fancy/url" | append: ".html" }}
{% endraw %}
```
Expand All @@ -68,11 +67,11 @@ You can read more about each type of tag in their respective sections.
{{ "/my/fancy/url" | append: ".html" }}
```

Multiple filters can be used on one output. They are applied from left to right.
Multiple filters can be used on one output, and are applied from left to right.

<p class="code-label">Input</p>
```liquid
{% raw %}
{%- raw -%}
{{ "adam!" | capitalize | prepend: "Hello " }}
{% endraw %}
```
Expand Down
Loading