Condense and improve examples

This commit is contained in:
EricFromCanada
2021-02-22 13:53:20 -05:00
parent 537f53ef7c
commit e47ea38940
22 changed files with 84 additions and 255 deletions

View File

@@ -22,7 +22,7 @@ Liquid code can be categorized into [**objects**](#objects), [**tags**](#tags),
{{ page.title }} {{ 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
@@ -41,7 +41,7 @@ The markup used in tags does not produce any visible text. This means that you c
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
Hello Adam! Hello Adam!
``` ```
Tags can be categorized into three types: Tags can be categorized into three types:

View File

@@ -13,32 +13,32 @@ In programming, anything that returns `true` in a conditional is called **truthy
All values in Liquid are truthy except `nil` and `false`. All values in Liquid are truthy except `nil` and `false`.
In the example below, the string "Tobi" is not a boolean, but it is truthy in a conditional: In the example below, the text "Tobi" is not a boolean, but it is truthy in a conditional:
```liquid ```liquid
{% raw %} {% raw %}
{% assign tobi = "Tobi" %} {% assign name = "Tobi" %}
{% if tobi %} {% if name %}
This condition will always be true. This text will always appear since "name" is defined.
{% endif %} {% endif %}
{% endraw %} {% endraw %}
``` ```
[Strings]({{ "/basics/types/#string" | prepend: site.baseurl }}), even when empty, are truthy. The example below will result in empty HTML tags if `settings.fp_heading` is empty: [Strings]({{ "/basics/types/#string" | prepend: site.baseurl }}), even when empty, are truthy. The example below will create empty HTML tags if `page.category` exists but is empty:
<p class="code-label">Input</p> <p class="code-label">Input</p>
```liquid ```liquid
{% raw %} {% raw %}
{% if settings.fp_heading %} {% if page.category %}
<h1>{{ settings.fp_heading }}</h1> <h1>{{ page.category }}</h1>
{% endif %} {% endif %}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```html ```html
<h1></h1> <h1></h1>
``` ```
## Falsy ## Falsy

View File

@@ -95,7 +95,7 @@ To access all the items in an array, you can loop through each item in the array
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
Tobi Laura Tetsuro Adam Tobi Laura Tetsuro Adam
``` ```
### Accessing specific items in arrays ### Accessing specific items in arrays

View File

@@ -23,19 +23,20 @@ Notice the blank line before "tomato" in the rendered template:
{{ my_variable }} {{ my_variable }}
``` ```
By including hyphens in your `assign` tag, you can strip the generated whitespace from the rendered template: By including a hyphen in your `assign` closing delimiter, you can strip the whitespace following it from the rendered template:
<p class="code-label">Input</p> <p class="code-label">Input</p>
```liquid ```liquid
{% raw %} {% raw %}
{%- assign my_variable = "tomato" -%} {% assign my_variable = "tomato" -%}
{{ my_variable }} {{ my_variable }}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
tomato {% assign my_variable = "tomato" -%}
{{ my_variable }}
``` ```
If you don't want any of your tags to print whitespace, as a general rule you can add hyphens to both sides of all your tags (`{% raw %}{%-{% endraw %}` and `{% raw %}-%}{% endraw %}`): If you don't want any of your tags to print whitespace, as a general rule you can add hyphens to both sides of all your tags (`{% raw %}{%-{% endraw %}` and `{% raw %}-%}{% endraw %}`):
@@ -45,7 +46,7 @@ If you don't want any of your tags to print whitespace, as a general rule you ca
{% raw %} {% raw %}
{% assign username = "John G. Chalmers-Smith" %} {% assign username = "John G. Chalmers-Smith" %}
{% if username and username.size > 10 %} {% if username and username.size > 10 %}
Wow, {{ username }}, you have a long name! Wow, {{ username }} , you have a long name!
{% else %} {% else %}
Hello there! Hello there!
{% endif %} {% endif %}
@@ -56,7 +57,7 @@ If you don't want any of your tags to print whitespace, as a general rule you ca
```text ```text
{% assign username = "John G. Chalmers-Smith" %} {% assign username = "John G. Chalmers-Smith" %}
{% if username and username.size > 10 %} {% if username and username.size > 10 %}
Wow, {{ username }}, you have a long name! Wow, {{ username }} , you have a long name!
{% else %} {% else %}
Hello there! Hello there!
{% endif %} {% endif %}
@@ -65,16 +66,21 @@ If you don't want any of your tags to print whitespace, as a general rule you ca
<p class="code-label">Input</p> <p class="code-label">Input</p>
```liquid ```liquid
{% raw %} {% raw %}
{%- assign username = "John G. Chalmers-Smith" -%} {% assign username = "John G. Chalmers-Smith" -%}
{%- if username and username.size > 10 -%} {%- if username and username.size > 10 -%}
Wow, {{ username }}, you have a long name! Wow, {{ username -}} , you have a long name!
{%- else -%} {%- else -%}
Hello there! Hello there!
{%- endif -%} {%- endif %}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output with whitespace control</p> <p class="code-label">Output with whitespace control</p>
```text ```text
Wow, John G. Chalmers-Smith, you have a long name! {% assign username = "John G. Chalmers-Smith" -%}
{%- if username and username.size > 10 -%}
Wow, {{ username -}} , you have a long name!
{%- else -%}
Hello there!
{%- endif %}
``` ```

View File

@@ -10,23 +10,13 @@ Returns the absolute value of a number.
```liquid ```liquid
{% raw %} {% raw %}
{{ -17 | abs }} {{ -17 | abs }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ -17 | abs }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 4 | abs }} {{ 4 | abs }}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
{{ -17 | abs }}
{{ 4 | abs }} {{ 4 | abs }}
``` ```

View File

@@ -9,22 +9,12 @@ Limits a number to a minimum value.
```liquid ```liquid
{% raw %} {% raw %}
{{ 4 | at_least: 5 }} {{ 4 | at_least: 5 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
5
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 4 | at_least: 3 }} {{ 4 | at_least: 3 }}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
5
4 4
``` ```

View File

@@ -9,22 +9,12 @@ Limits a number to a maximum value.
```liquid ```liquid
{% raw %} {% raw %}
{{ 4 | at_most: 5 }} {{ 4 | at_most: 5 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
4
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 4 | at_most: 3 }} {{ 4 | at_most: 3 }}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
4
3 3
``` ```

View File

@@ -9,35 +9,15 @@ Rounds the input up to the nearest whole number. Liquid tries to convert the inp
```liquid ```liquid
{% raw %} {% raw %}
{{ 1.2 | ceil }} {{ 1.2 | ceil }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 1.2 | ceil }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 2.0 | ceil }} {{ 2.0 | ceil }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 2.0 | ceil }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | ceil }} {{ 183.357 | ceil }}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
{{ 1.2 | ceil }}
{{ 2.0 | ceil }}
{{ 183.357 | ceil }} {{ 183.357 | ceil }}
``` ```

View File

@@ -16,7 +16,7 @@ In this example, `product_price` is not defined, so the default value is used.
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
2.99 {{ product_price | default: 2.99 }}
``` ```
In this example, `product_price` is defined, so the default value is not used. In this example, `product_price` is defined, so the default value is not used.
@@ -31,7 +31,8 @@ In this example, `product_price` is defined, so the default value is not used.
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
4.99 {% assign product_price = 4.99 %}
{{ product_price | default: 2.99 }}
``` ```
In this example, `product_price` is empty, so the default value is used. In this example, `product_price` is empty, so the default value is used.
@@ -46,5 +47,6 @@ In this example, `product_price` is empty, so the default value is used.
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
2.99 {% assign product_price = "" %}
{{ product_price | default: 2.99 }}
``` ```

View File

@@ -11,23 +11,13 @@ The result is rounded down to the nearest integer (that is, the [floor]({{ "/fil
```liquid ```liquid
{% raw %} {% raw %}
{{ 16 | divided_by: 4 }} {{ 16 | divided_by: 4 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 16 | divided_by: 4 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 5 | divided_by: 3 }} {{ 5 | divided_by: 3 }}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
{{ 16 | divided_by: 4 }}
{{ 5 | divided_by: 3 }} {{ 5 | divided_by: 3 }}
``` ```

View File

@@ -9,35 +9,15 @@ Rounds the input down to the nearest whole number. Liquid tries to convert the i
```liquid ```liquid
{% raw %} {% raw %}
{{ 1.2 | floor }} {{ 1.2 | floor }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 1.2 | floor }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 2.0 | floor }} {{ 2.0 | floor }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 2.0 | floor }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | floor }} {{ 183.357 | floor }}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
{{ 1.2 | floor }}
{{ 2.0 | floor }}
{{ 183.357 | floor }} {{ 183.357 | floor }}
``` ```

View File

@@ -8,11 +8,11 @@ Removes all whitespace (tabs, spaces, and newlines) from the left side of a stri
<p class="code-label">Input</p> <p class="code-label">Input</p>
```liquid ```liquid
{% raw %} {% raw %}
{{ " So much room for activities! " | lstrip }} {{ " So much room for activities " | lstrip }}!
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
{{ " So much room for activities! " | lstrip }} {{ " So much room for activities " | lstrip }}!
``` ```

View File

@@ -9,34 +9,14 @@ Subtracts a number from another number.
```liquid ```liquid
{% raw %} {% raw %}
{{ 4 | minus: 2 }} {{ 4 | minus: 2 }}
{{ 16 | minus: 4 }}
{{ 183.357 | minus: 12 }}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
{{ 4 | minus: 2 }} {{ 4 | minus: 2 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 16 | minus: 4 }} {{ 16 | minus: 4 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 16 | minus: 4 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | minus: 12 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 183.357 | minus: 12 }} {{ 183.357 | minus: 12 }}
``` ```

View File

@@ -9,34 +9,14 @@ Returns the remainder of a division operation.
```liquid ```liquid
{% raw %} {% raw %}
{{ 3 | modulo: 2 }} {{ 3 | modulo: 2 }}
{{ 24 | modulo: 7 }}
{{ 183.357 | modulo: 12 }}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
{{ 3 | modulo: 2 }} {{ 3 | modulo: 2 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 24 | modulo: 7 }} {{ 24 | modulo: 7 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 24 | modulo: 7 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | modulo: 12 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 183.357 | modulo: 12 }} {{ 183.357 | modulo: 12 }}
``` ```

View File

@@ -9,34 +9,14 @@ Adds a number to another number.
```liquid ```liquid
{% raw %} {% raw %}
{{ 4 | plus: 2 }} {{ 4 | plus: 2 }}
{{ 16 | plus: 4 }}
{{ 183.357 | plus: 12 }}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
{{ 4 | plus: 2 }} {{ 4 | plus: 2 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 16 | plus: 4 }} {{ 16 | plus: 4 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 16 | plus: 4 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | plus: 12 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 183.357 | plus: 12 }} {{ 183.357 | plus: 12 }}
``` ```

View File

@@ -9,34 +9,14 @@ Rounds a number to the nearest integer or, if a number is passed as an argument,
```liquid ```liquid
{% raw %} {% raw %}
{{ 1.2 | round }} {{ 1.2 | round }}
{{ 2.7 | round }}
{{ 183.357 | round: 2 }}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
{{ 1.2 | round }} {{ 1.2 | round }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 2.7 | round }} {{ 2.7 | round }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 2.7 | round }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | round: 2 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 183.357 | round: 2 }} {{ 183.357 | round: 2 }}
``` ```

View File

@@ -8,11 +8,11 @@ Removes all whitespace (tabs, spaces, and newlines) from the right side of a str
<p class="code-label">Input</p> <p class="code-label">Input</p>
```liquid ```liquid
{% raw %} {% raw %}
{{ " So much room for activities! " | rstrip }} {{ " So much room for activities " | rstrip }}!
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
{{ " So much room for activities! " | rstrip }} {{ " So much room for activities " | rstrip }}!
``` ```

View File

@@ -8,11 +8,11 @@ Removes all whitespace (tabs, spaces, and newlines) from both the left and right
<p class="code-label">Input</p> <p class="code-label">Input</p>
```liquid ```liquid
{% raw %} {% raw %}
{{ " So much room for activities! " | strip }} {{ " So much room for activities " | strip }}!
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
{{ " So much room for activities! " | strip }} {{ " So much room for activities " | strip }}!
``` ```

View File

@@ -9,34 +9,14 @@ Multiplies a number by another number.
```liquid ```liquid
{% raw %} {% raw %}
{{ 3 | times: 2 }} {{ 3 | times: 2 }}
{{ 24 | times: 7 }}
{{ 183.357 | times: 12 }}
{% endraw %} {% endraw %}
``` ```
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
{{ 3 | times: 2 }} {{ 3 | times: 2 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 24 | times: 7 }} {{ 24 | times: 7 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 24 | times: 7 }}
```
<p class="code-label">Input</p>
```liquid
{% raw %}
{{ 183.357 | times: 12 }}
{% endraw %}
```
<p class="code-label">Output</p>
```text
{{ 183.357 | times: 12 }} {{ 183.357 | times: 12 }}
``` ```

View File

@@ -188,10 +188,10 @@ Loops through a group of strings and prints them in the order that they were pas
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
one {% cycle "one", "two", "three" %}
two {% cycle "one", "two", "three" %}
three {% cycle "one", "two", "three" %}
one {% cycle "one", "two", "three" %}
``` ```
Uses for `cycle` include: Uses for `cycle` include:
@@ -215,10 +215,10 @@ Uses for `cycle` include:
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
one {% cycle "first": "one", "two", "three" %}
one {% cycle "second": "one", "two", "three" %}
two {% cycle "second": "one", "two", "three" %}
two {% cycle "first": "one", "two", "three" %}
``` ```
## tablerow ## tablerow

View File

@@ -7,16 +7,15 @@ Raw temporarily disables tag processing. This is useful for generating content
(eg, Mustache, Handlebars) which uses conflicting syntax. (eg, Mustache, Handlebars) which uses conflicting syntax.
<p class="code-label">Input</p> <p class="code-label">Input</p>
<pre class="highlight"> ```liquid
<code>{% raw %} {{ "%7B%25+raw+%25%7D" | url_decode }}{% raw %}
&#123;&#37; raw &#37;&#125; In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.
In Handlebars, {{ this }} will be HTML-escaped, but {% endraw %}{{ "%7B%25+endraw+%25%7D" | url_decode }}
{{{ that }}} will not. ```
&#123;&#37; endraw &#37;&#125;
{% endraw %}</code>
</pre>
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
{% raw %}In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.{% endraw %} {% raw %}
In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.
{% endraw %}
``` ```

View File

@@ -36,7 +36,8 @@ Wrap a variable value in quotations `"` to save it as a string.
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
bar {% assign foo = "bar" %}
{{ foo }}
``` ```
## capture ## capture
@@ -92,9 +93,9 @@ Creates and outputs a new number variable with initial value `0`. On subsequent
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
0 {% increment my_counter %}
1 {% increment my_counter %}
2 {% increment my_counter %}
``` ```
Variables created through the `increment` tag are independent from variables created through `assign` or `capture`. Variables created through the `increment` tag are independent from variables created through `assign` or `capture`.
@@ -114,10 +115,11 @@ In the example below, a variable named "var" is created through `assign`. The `i
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
0 {% assign var = 10 %}
1 {% increment var %}
2 {% increment var %}
10 {% increment var %}
{{ var }}
``` ```
## decrement ## decrement
@@ -135,9 +137,9 @@ Creates and outputs a new number variable with initial value `-1`. On subsequent
<p class="code-label">Output</p> <p class="code-label">Output</p>
```text ```text
-1 {% decrement variable %}
-2 {% decrement variable %}
-3 {% decrement variable %}
``` ```
Like [increment](#increment), variables declared inside `decrement` are independent from variables created through `assign` or `capture`. Like [increment](#increment), variables declared inside `decrement` are independent from variables created through `assign` or `capture`.