diff --git a/_sass/modules/_content-area.scss b/_sass/modules/_content-area.scss index 26bde52..d75fc6e 100644 --- a/_sass/modules/_content-area.scss +++ b/_sass/modules/_content-area.scss @@ -2,8 +2,32 @@ margin-bottom: $spacing-unit * 2; } -.code--input { +.code-block { + pre { + border-radius: 0 0 3px 3px; + border-top: none; + } + &:before { - content: 'stuff' + padding: 8px 12px; + display: block; + box-sizing: border-box; + font-weight: bold; + color: $color-white; + background: $color-blue-5; + border-bottom: none; + border-radius: 3px 3px 0 0; + } +} + +.code-block--input { + &:before { + content: 'Input'; + } +} + +.code-block--output { + &:before { + content: 'Output'; } } diff --git a/basics/handles.md b/basics/handles.md index 40c0e60..fca2b14 100644 --- a/basics/handles.md +++ b/basics/handles.md @@ -29,8 +29,7 @@ You can change an object's handle manually (TK how to change a handle manually) In many cases you may know the handle of a object whose attributes you want to access. You can access its attributes by pluralizing the name of the object, then using either the square bracket ( [ ] ) or dot ( . ) notation. -

Input

-
+
{% highlight liquid %} {% raw %} {{ pages.about-us.title }} @@ -39,8 +38,7 @@ In many cases you may know the handle of a object whose attributes you want to a {% endhighlight %}
-

Output

-
+
{% highlight text %} About Us About Us diff --git a/basics/truthy-and-falsy.md b/basics/truthy-and-falsy.md index dddee83..fa09b2c 100644 --- a/basics/truthy-and-falsy.md +++ b/basics/truthy-and-falsy.md @@ -20,31 +20,35 @@ In the example below, the text "Tobi" is not a boolean, but it is truthy in a co [Strings](/basics/types/#string), even when empty, are truthy. The example below will result in empty HTML tags if `settings.fp_heading` is empty: -

Input

-{% highlight liquid %}{% raw %} +
+{% highlight html %}{% raw %} {% if settings.fp_heading %}

{{ settings.fp_heading }}

{% endif %} {% endraw %}{% endhighlight %} +
-

Output

+
{% highlight html %}{% raw %}

{% endraw %}{% endhighlight %} +
-[EmptyDrops](/basics/types/#emptydrop) are also truthy. In the example below, if `settings.page` is an empty string or set to a hidden or deleted object, you will end up with an EmptyDrop. The result is an empty `
`: +[EmptyDrops](/basics/types/#emptydrop) are also truthy. In the example below, if `settings.page` is an empty string or set to a hidden or deleted object, you will end up with an EmptyDrop. The result is an empty div: -

Input

+
{% highlight html %}{% raw %} {% if pages[settings.page] %}
{{ pages[settings.page].content }}
{% endif %} {% endraw %}{% endhighlight %} +
-

Output

+
{% highlight html %}{% raw %}
{% endraw %}{% endhighlight %} +
## Falsy diff --git a/basics/types.md b/basics/types.md index 5a52d54..16f6ad7 100644 --- a/basics/types.md +++ b/basics/types.md @@ -63,17 +63,17 @@ In the following example, if the user does not exist (that is, `user` returns `n Tags or outputs that return `nil` will not print anything to the page. -

Input

- +
{% highlight liquid %}{% raw %} The current user is {{ user.name }} {% endraw %}{% endhighlight %} +
-

Output

- +
{% highlight text %}{% raw %} The current user is {% endraw %}{% endhighlight %} +
## Array @@ -83,40 +83,43 @@ Arrays hold lists of variables of any type. To access all of the items in an array, you can loop through each item in the array using a [for](/tags/#for) or [tablerow](/tags/#tablerow) tag. -

Input

+
{% highlight liquid %}{% raw %} {% for user in site.users %} {{ user }} {% endfor %} {% endraw %}{% endhighlight %} +
-

Output

+
{% highlight text %}{% raw %} Tobi Lina Tetsuro Adam {% endraw %}{% endhighlight %} +
- -#### Accessing specific items in arrays +### Accessing specific items in arrays You can use square bracket `[ ]` notation to access a specific item in an array. Array indexing starts at zero. -

Input

+
{% highlight liquid %}{% raw %} {{ site.users[0] }} {{ site.users[1] }} {{ site.users[3] }} {% endraw %}{% endhighlight %} +
-

Output

+
{% highlight text %}{% raw %} Tobi Lina Adam {% endraw %}{% endhighlight %} +
-#### Initializing arrays +### Initializing arrays You cannot initialize arrays using pure Liquid. @@ -137,7 +140,7 @@ EmptyDrop objects only have one attribute, `empty?`, which is always *true*. Collections and pages that *do* exist do not have an `empty?` attribute. Their `empty?` is “falsy”, which means that calling it inside an if statement will return *false*. When using an unless statement on existing collections and pages, `empty?` will return `true`. -#### Checking for emptiness +### Checking for emptiness Using the `empty?` attribute, you can check to see if an object exists or not before you access any of its attributes. diff --git a/tags/control-flow.md b/tags/control-flow.md index 0ae479d..b041fc3 100644 --- a/tags/control-flow.md +++ b/tags/control-flow.md @@ -6,8 +6,7 @@ title: Control Flow

Creates a switch statement to compare a variable with different values. case initializes the switch statement, and when compares its values.

-

Input

-
+
{% highlight html %}{% raw %} {% assign handle = 'cake' %} {% case handle %} @@ -21,9 +20,7 @@ title: Control Flow {% endraw %}{% endhighlight %}
-

Output

- -
+
{% highlight html %}{% raw %} This is a cake {% endraw %}{% endhighlight %} @@ -33,9 +30,7 @@ This is a cake

Executes a block of code only if a certain condition is met.

-

Input

- -
+
{% highlight html %}{% raw %} {% if product.title == 'Awesome Shoes' %} These shoes are awesome! @@ -43,9 +38,8 @@ This is a cake {% endraw %}{% endhighlight %}
-

Output

-
+
{% highlight html %}{% raw %} These shoes are awesome! {% endraw %}{% endhighlight %} @@ -55,9 +49,8 @@ These shoes are awesome!

Adds more conditions within an if or unless block.

-

Input

-
+
{% highlight html %}{% raw %} {% if customer.name == 'kevin' %} @@ -70,9 +63,7 @@ These shoes are awesome! {% endraw %}{% endhighlight %}
-

Output

- -
+
{% highlight html %}{% raw %} Hey Anonymous! {% endraw %}{% endhighlight %} @@ -82,9 +73,7 @@ Hey Anonymous!

Similar to if, but executes a block of code only if a certain condition is not met.

-

Input

- -
+
{% highlight html %}{% raw %} {% unless product.title == 'Awesome Shoes' %} These shoes are not awesome. @@ -92,9 +81,7 @@ Hey Anonymous! {% endraw %}{% endhighlight %}
-

Output

- -
+
{% highlight html %}{% raw %} These shoes are not awesome. {% endraw %}{% endhighlight %} @@ -102,7 +89,7 @@ These shoes are not awesome. This would be the equivalent of doing the following: -
+
{% highlight html %}{% raw %} {% if product.title != 'Awesome Shoes' %} These shoes are not awesome. diff --git a/tags/iteration.md b/tags/iteration.md index 3cee979..0c27bc8 100644 --- a/tags/iteration.md +++ b/tags/iteration.md @@ -4,16 +4,13 @@ title: Iteration Iteration Tags are used to run a block of code repeatedly. - - ### for Repeatedly executes a block of code. For a full list of attributes available within a `for` loop, see [forloop (object)](/themes/liquid-documentation/objects/for-loops). `for` loops can output a maximum of 50 results per page. In cases where there are more than 50 results, use the [paginate](/themes/liquid-documentation/tags/theme-tags/#paginate) tag to split them across multiple pages. -

Input

-
+
{% highlight liquid %}{% raw %} {% for product in collection.products %} {{ product.title }} @@ -21,8 +18,7 @@ Repeatedly executes a block of code. For a full list of attributes available wit {% endraw %}{% endhighlight %}
-

Output

-
+
{% highlight text %} hat shirt pants {% endhighlight %} @@ -32,8 +28,7 @@ hat shirt pants Causes the loop to stop iterating when it encounters the `break` tag. -

Input

-
+
{% highlight liquid %}{% raw %} {% for i in (1..5) %} {% if i == 4 %} @@ -45,8 +40,7 @@ Causes the loop to stop iterating when it encounters the `break` tag. {% endraw %}{% endhighlight %}
-

Output

-
+
{% highlight text %} 1 2 3 {% endhighlight %} @@ -56,8 +50,7 @@ Causes the loop to stop iterating when it encounters the `break` tag. Causes the loop to skip the current iteration when it encounters the `continue` tag. -

Input

-
+
{% highlight liquid %}{% raw %} {% for i in (1..5) %} {% if i == 4 %} @@ -69,8 +62,7 @@ Causes the loop to skip the current iteration when it encounters the `continue` {% endraw %}{% endhighlight %}
-

Output

-
+
{% highlight text %} 1 2 3 5 {% endhighlight %} @@ -82,10 +74,8 @@ Causes the loop to skip the current iteration when it encounters the `continue`

limit

Exits the for loop at a specific index. -

-

Input

-
+
{% highlight html %}{% raw %} {% for item in array limit:2 %} @@ -94,9 +84,7 @@ Exits the for loop at a specific index. {% endraw %}{% endhighlight %}
-

Output

- -
+
{% highlight html %}{% raw %} 1 2 {% endraw %}{% endhighlight %} @@ -105,10 +93,8 @@ Exits the for loop at a specific index.

offset

Starts the for loop at a specific index. -

-

Input

-
+
{% highlight html %}{% raw %} {% for item in array offset:2 %} @@ -117,9 +103,7 @@ Starts the for loop at a specific index. {% endraw %}{% endhighlight %}
-

Output

- -
+
{% highlight html %}{% raw %} 3 4 5 6 {% endraw %}{% endhighlight %} @@ -127,10 +111,8 @@ Starts the for loop at a specific index.

range

Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers. -

-

Input

-
+
{% highlight html %}{% raw %} {% assign num = 4 %} {% for i in (1..num) %} @@ -143,22 +125,18 @@ Defines a range of numbers to loop through. The range can be defined by both lit {% endraw %}{% endhighlight %}
-

Output

- -
+
{% highlight html %}{% raw %} 1 2 3 4 3 4 5 {% endraw %}{% endhighlight %}
-

reversed

Reverses the order of the for loop. -

-

Input

-
+ +
{% highlight html %}{% raw %} {% for item in array reversed %} @@ -167,34 +145,12 @@ Reverses the order of the for loop. {% endraw %}{% endhighlight %}
-

Output

-
+
{% highlight html %}{% raw %} 6 5 4 3 2 1 {% endraw %}{% endhighlight %}
-
- - - - - - - - - - - - - - - - - - - - ### cycle @@ -203,8 +159,7 @@ Loops through a group of strings and outputs them in the order that they were pa cycle must be used within a for loop block. -

Input

-
+
{% highlight html %}{% raw %} {% cycle 'one', 'two', 'three' %} {% cycle 'one', 'two', 'three' %} @@ -213,8 +168,7 @@ Loops through a group of strings and outputs them in the order that they were pa {% endraw %}{% endhighlight %}
-

Output

-
+
{% highlight html %}{% raw %} one two @@ -232,7 +186,6 @@ Uses for cycle include:

parameters cycle

- cycle accepts a parameter called cycle group in cases where you need multiple cycle blocks in one template. If no name is supplied for the cycle group, then it is assumed that multiple calls with the same parameters are one group.

The example below shows why cycle groups are necessary when there are multiple instances of the cycle block.

@@ -334,9 +287,7 @@ Uses for cycle include:

Generates an HTML <table>. Must be wrapped in an opening <table> and closing </table> HTML tags. For a full list of attributes available within a tablerow loop, see tablerow (object).

-

Input

- -
+
{% highlight html %}{% raw %} {% tablerow product in collection.products %} @@ -346,10 +297,7 @@ Uses for cycle include: {% endraw %}{% endhighlight %} - -

Output

- -
+
{% highlight html %}{% raw %}
@@ -381,14 +329,11 @@ Uses for cycle include:

parameters tablerow

-

cols

Defines how many columns the tables should have. -

-

Input

-
+
{% highlight html %}{% raw %} {% tablerow product in collection.products cols:2 %} {{ product.title }} @@ -396,9 +341,7 @@ Defines how many columns the tables should have. {% endraw %}{% endhighlight %}
-

Output

- -
+
{% highlight html %}{% raw %}
diff --git a/tags/theme.md b/tags/theme.md index e8fe70f..812ace5 100644 --- a/tags/theme.md +++ b/tags/theme.md @@ -10,38 +10,21 @@ Theme Tags have various functions, including: - Splitting a returned array into multiple pages. - - - - ### comment

Allows you to leave un-rendered code inside a Liquid template. Any text within the opening and closing comment blocks will not be output, and any Liquid code within will not be executed.

-

Input

- -
+
{% highlight html %}{% raw %} My name is {% comment %}super{% endcomment %} Shopify. {% endraw %}{% endhighlight %}
-

Output

- -
+
{% highlight html %}{% raw %} My name is Shopify. {% endraw %}{% endhighlight %}
- - - - - - - - - ### include @@ -71,12 +54,9 @@ Or you can consolidate them into one line of code: {% include 'snippet', snippet_variable: 'this is it', snippet_variable_two: 'this is also it' %} {% endraw %}{% endhighlight %} -

parameters include

- - -#### with +### with The with parameter assigns a value to a variable inside a snippet that shares the same name as the snippet. @@ -107,52 +87,13 @@ color: 'blue' shape: 'circle' color: 'red' shape: 'square' {% endraw %}{% endhighlight %} - - - - - - - - - - ### form Creates an HTML <form> element with all the necessary attributes (action, id, etc.) and <input> to submit the form successfully.

parameters form

- -#### activate_customer_password - -Generates a form for activating a customer account on the activate_account.liquid template. - -

Input

-
-{% highlight html %}{% raw %} -{% form 'activate_customer_password' %} -... -{% endform %} -{% endraw %}{% endhighlight %} -
- -

Output

-
-{% highlight html %}{% raw %} -
- - - ... - -{% endraw %}{% endhighlight %} -
- - - - -#### new_comment - +### new_comment Generates a form for creating a new comment in the article.liquid template. Requires the article object as a parameter. @@ -177,152 +118,6 @@ Generates a form for creating a new comment in the Liquid contact form. - -

Input

-
-{% highlight html %}{% raw %} -{% form 'contact' %} -... -{% endform %} -{% endraw %}{% endhighlight %} -
- -

Output

-
-{% highlight html %}{% raw %} -
- - - ... - -{% endraw %}{% endhighlight %} -
- - - -#### create_customer - -Generates a form for creating a new customer account on the register.liquid template. - -

Input

-
-{% highlight html %}{% raw %} -{% form 'create_customer' %} -... -{% endform %} -{% endraw %}{% endhighlight %} -
- -

Output

-
-{% highlight html %}{% raw %} -
- - - ... - -{% endraw %}{% endhighlight %} -
- - - - -#### customer_address -Generates a form for creating or editing customer account addresses on the addresses.liquid template. When creating a new address, include the parameter customer.new_address. When editing an existing address, include the parameter address. - -

Input

-
-{% highlight html %}{% raw %} -{% form 'customer_address', customer.new_address %} -... -{% endform %} -{% endraw %}{% endhighlight %} -
- -

Output

-
-{% highlight html %}{% raw %} -
- - - ... - -{% endraw %}{% endhighlight %} -
- - - - -#### customer_login - -Generates a form for logging into Customer Accounts on the login.liquid template. - -

Input

-
-{% highlight html %}{% raw %} -{% form 'customer_login' %} -... -{% endform %} -{% endraw %}{% endhighlight %} -
- -

Output

-
-{% highlight html %}{% raw %} -
- - - ... - -{% endraw %}{% endhighlight %} -
- - - - -#### recover_customer_password - -Generates a form for recovering a lost password on the login.liquid template. - -

Input

-
-{% highlight html %}{% raw %} -{% form 'recover_customer_password' %} -... -{% endform %} -{% endraw %}{% endhighlight %} -
- -

Output

-
-{% highlight html %}{% raw %} -
- - - ... - -{% endraw %}{% endhighlight %} -
- - - - - - - - - - - - - - - - ### layout Loads an alternate template file from the **layout** folder of a theme. If no alternate layout is defined, the **theme.liquid** template is loaded by default. diff --git a/tags/variable.md b/tags/variable.md index a58880c..bfe36cc 100644 --- a/tags/variable.md +++ b/tags/variable.md @@ -4,16 +4,11 @@ title: Variable Variable Tags are used to create new Liquid variables. - - - ## assign

Creates a new variable.

-

Input

- -
+
{% highlight html %}{% raw %} {% assign my_variable = false %} {% if my_variable != true %} @@ -22,9 +17,7 @@ Variable Tags are used to create new Liquid variables. {% endraw %}{% endhighlight %}
-

Output

- -
+
{% highlight html %}{% raw %} This statement is valid. {% endraw %}{% endhighlight %} @@ -32,41 +25,31 @@ Variable Tags are used to create new Liquid variables. Use quotations ("") to save the variable as a string. -

Input

- -
+
{% highlight html %}{% raw %} {% assign foo = "bar" %} {{ foo }} {% endraw %}{% endhighlight %}
-

Output

- -
+
{% highlight html %}{% raw %} bar {% endraw %}{% endhighlight %}
- ## capture

Captures the string inside of the opening and closing tags and assigns it to a variable. Variables created through {% capture %} are strings.

- -

Input

- -
+
{% highlight html %}{% raw %} {% capture my_variable %}I am being captured.{% endcapture %} {{ my_variable }} {% endraw %}{% endhighlight %}
-

Output

- -
+
{% highlight html %}{% raw %} I am being captured. {% endraw %}{% endhighlight %} @@ -76,17 +59,15 @@ I am being captured. Creates a new number variable, and increases its value by one every time it is called. The initial value is 0. -

Input

- +
{% highlight html %}{% raw %} {% increment variable %} {% increment variable %} {% increment variable %} {% endraw %}{% endhighlight %} +
-

Output

- -
+
{% highlight html %}{% raw %} 0 1 @@ -98,9 +79,7 @@ Variables created through the increment tag are independent from va In the example below, a variable named "var" is created through assign. The increment tag is then used several times on a variable with the same name. However, note that the increment tag does not affect the value of "var" that was created through assign. -

Input

- -
+
{% highlight html %}{% raw %} {% assign var = 10 %} {% increment var %} @@ -110,9 +89,7 @@ In the example below, a variable named "var" is created through assign -

Output

- -
+
{% highlight html %}{% raw %} 0 1 @@ -126,17 +103,15 @@ In the example below, a variable named "var" is created through assignInput

- +
{% highlight html %}{% raw %} {% decrement variable %} {% decrement variable %} {% decrement variable %} {% endraw %}{% endhighlight %} +
-

Output

- -
+
{% highlight html %}{% raw %} -1 -2