Liquid & Shopify Liquid templating language All In One

Liquid & Shopify Liquid templating language All In One

Shopify Liquid

https://shopify.dev/docs/api/liquid

Shopify themes are built using the Liquid templating language along with HTML, CSS, JavaScript, and JSON.

https://academy.shopify.com/introduction-to-shopify-liquid/

https://shopify.dev/docs/storefronts/themes/tools/cli/cli-2/commands

https://shopify.dev/docs/api/shopify-cli/theme

Shopify themes

https://shopify.dev/docs/storefronts/themes

https://themes.shopify.com/themes

Liquid

The most popular versions of Liquid that exist are Liquid, Shopify Liquid for themes, and Jekyll Liquid.

Shopify 始终使用最新版本的 Liquid 作为基础，但 Shopify 在 Liquid 中添加了大量对象、标签和过滤器以供商家商店使用。

Jekyll 是一个静态网站生成器，它是一种命令行工具，可通过将模板与内容文件合并来创建网站。Jekyll 使用 Liquid 作为其模板语言，并添加了一些对象、标签和过滤器。
Jekyll 还支持 GitHub Pages，这是一项网络托管服务，可让您将 Jekyll 安装推送到 GitHub 存储库并发布生成的网站。

https://shopify.github.io/liquid/basics/variations/

Liquid API docs

Liquid uses a combination of objects, tags, and filters inside template files to display dynamic content.

1. Objects contain the content that Liquid displays on a page.

2. Tags create the logic and control flow for templates.

3. Filters change the output of a Liquid object or variable.

Operators

1. basic operators

{% if product.title == "Awesome Shoes" %}
  These shoes are awesome!
{% endif %}

{% if product.type == "Shirt" or product.type == "Shoes" %}
  This is a shirt or a pair of shoes.
{% endif %}

2. contains

substring

{% if product.title contains "Pack" %}
  This product's title contains the word Pack.
{% endif %}

array

{% if product.tags contains "Hello" %}
  This product has been tagged with "Hello".
{% endif %}

3. order of operations

operators are checked in order from right to left.

{% if true or false and false %}
  This evaluates to true, since the `and` condition is checked first.
{% endif %}

{% if true and false and false or true %}
  This evaluates to false, since the tags are checked like this:

  true and (false and (false or true))
  true and (false and true)
  true and false
  false
{% endif %}

truthy and falsy

When a non-boolean data type is used in a boolean context (such as a conditional tag), Liquid decides whether to evaluate it as true or false.
Data types that return true by default are called truthy.
Data types that return false by default are called falsy.

All values in Liquid are truthy except nil and false.

{% assign name = "Tobi" %}

{% if name %}
  This text will always appear since "name" is defined.
{% endif %}

Strings, even when empty, are truthy.

Types

single or double quotes

Liquid does not convert escape sequences into special characters.

{% assign my_string = "Hello World!" %}

floats and integers

{% assign my_int = 25 %}
{% assign my_float = -39.756 %}

No quotations are necessary when declaring a boolean:

{% assign foo = true %}
{% assign bar = false %}

Nil is a special empty value that is returned when Liquid code has no results.

Tags or outputs that return nil will not print anything to the page.

Arrays hold lists of variables of any type.

Accessing items in arrays

<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
{% for user in site.users %}
  {{ user }}
{% endfor %}

Accessing specific items in arrays

<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
{{ site.users[0] }}
{{ site.users[1] }}
{{ site.users[-1] }}

You cannot initialize arrays using only Liquid.

You can, however, use the split filter to break a string into an array of substrings.

{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}

{% for member in beatles %}
  {{ member }}
{% endfor %}

https://shopify.github.io/liquid/filters/split/

An EmptyDrop object is returned if you try to access a deleted object.

{% assign variable = "hello" %}

<!-- page_1, page_2 and page_3 are all EmptyDrop objects -->
{% assign page_1 = pages[variable] %}
{% assign page_2 = pages["does-not-exist"] %}
{% assign page_3 = pages.this-handle-does-not-exist %}

check to see if an object exists or not before you access any of its attributes

{% unless pages == empty %}
  <h1>{{ pages.frontpage.title }}</h1>
  <div>{{ pages.frontpage.content }}</div>
{% endunless %}

unless / 除非, 如果不

Both empty strings and empty arrays will return true if checked for equivalence with empty.

Whitespace control

In Liquid, you can include a hyphen in your tag syntax {{-, -}}, {%-, and -%} to strip whitespace from the left or right side of a rendered tag.

{% assign my_variable = "tomato" -%}
{{ my_variable }}

{% assign username = "John G. Chalmers-Smith" -%}
{%- if username and username.size > 10 -%}
  Wow, {{ username -}} , you have a long name!
{%- else -%}
  Hello there!
{%- endif %}

tags

1. Control flow

{% if product.title == "Awesome Shoes" %}
  These shoes are awesome!
{% endif %}

{% unless product.title == "Awesome Shoes" %}
  These shoes are not awesome.
{% endunless %}

<!-- If customer.name = "anonymous" -->
{% if customer.name == "kevin" %}
  Hey Kevin!
{% elsif customer.name == "anonymous" %}
  Hey Anonymous!
{% else %}
  Hi Stranger!
{% endif %}

{% assign handle = "cake" %}
{% case handle %}
  {% when "cake" %}
     This is a cake
  {% when "cookie", "biscuit" %}
     This is a cookie
  {% else %}
     This is not a cake nor a cookie
{% endcase %}

2. Iteration

{% for product in collection.products %}
  {{ product.title }}
{% endfor %}

{% for product in collection.products %}
  {{ product.title }}
{% else %}
  The collection is empty.
{% endfor %}

{% for i in (1..5) %}
  {% if i == 4 %}
    {% break %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

{% for i in (1..5) %}
  {% if i == 4 %}
    {% continue %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

for (parameters)

<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit:2 %}
  {{ item }}
{% endfor %}

<!-- if array = [1,2,3,4,5,6] -->
{% for item in array offset:2 %}
  {{ item }}
{% endfor %}

<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit: 3 %}
  {{ item }}
{% endfor %}
{% for item in array limit: 3 offset: continue %}
  {{ item }}
{% endfor %}

{% for i in (3..5) %}
  {{ i }}
{% endfor %}

{% assign num = 4 %}
{% assign range = (1..num) %}
{% for i in range %}
  {{ i }}
{% endfor %}

<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %}
  {{ item }}
{% endfor %}

forloop (object)

{
  "first": true,
  "index": 1,
  "index0": 0,
  "last": false,
  "length": 4,
  "rindex": 3
}

{% assign smoothie_flavors = "orange, strawberry, banana" | split: ", " %}

{% for flavor in smoothie_flavors -%}
  {%- if forloop.length > 0 -%}
    {{ flavor }}{% unless forloop.last %}-{% endunless -%}
  {%- endif -%}
{% endfor %}

cycle must be used within a for loop block.

{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}

cycle (parameters)

{% cycle "first": "one", "two", "three" %}
{% cycle "second": "one", "two", "three" %}
{% cycle "second": "one", "two", "three" %}
{% cycle "first": "one", "two", "three" %}

<table>
{% tablerow product in collection.products %}
  {{ product.title }}
{% endtablerow %}
</table>

<table>
  <tr class="row1">
    <td class="col1">
      Cool Shirt
    </td>
    <td class="col2">
      Alien Poster
    </td>
    <td class="col3">
      Batman Poster
    </td>
    <td class="col4">
      Bullseye Shirt
    </td>
    <td class="col5">
      Another Classic Vinyl
    </td>
    <td class="col6">
      Awesome Jeans
    </td>
  </tr>
</table>

tablerow (parameters)

{% tablerow product in collection.products cols:2 %}
  {{ product.title }}
{% endtablerow %}

<table>
  <tr class="row1">
    <td class="col1">
      Cool Shirt
    </td>
    <td class="col2">
      Alien Poster
    </td>
  </tr>
  <tr class="row2">
    <td class="col1">
      Batman Poster
    </td>
    <td class="col2">
      Bullseye Shirt
    </td>
  </tr>
  <tr class="row3">
    <td class="col1">
      Another Classic Vinyl
    </td>
    <td class="col2">
      Awesome Jeans
    </td>
  </tr>
</table>

{% tablerow product in collection.products cols:2 limit:3 %}
  {{ product.title }}
{% endtablerow %}

{% tablerow product in collection.products cols:2 offset:3 %}
  {{ product.title }}
{% endtablerow %}

<!--variable number example-->

{% assign num = 4 %}
<table>
{% tablerow i in (1..num) %}
  {{ i }}
{% endtablerow %}
</table>

<!--literal number example-->

<table>
{% tablerow i in (3..5) %}
  {{ i }}
{% endtablerow %}
</table>

tablerowloop (object)

{
  "col": 1,
  "col0": 0,
  "col_first": true,
  "col_last": false,
  "first": true,
  "index": 1,
  "index0": 0,
  "last": false,
  "length": 5,
  "rindex": 5,
  "rindex0": 4,
  "row": 1
}

3. template

{% assign verb = "turned" %}
{% comment %}
{% assign verb = "converted" %}
{% endcomment %}
Anything you put between {% comment %} and {% endcomment %} tags
is {{ verb }} into a comment.

Inline comments

You can create multi-line inline comments. However, each line must begin with a #.

{% # for i in (1..3) -%}
  {{ i }}
{% # endfor %}

{%
  ###############################
  # This is a comment
  # across multiple lines
  ###############################
%}

Inline comments inside liquid tags

{% liquid
  # this is a comment
  assign topic = 'Learning about comments!'
  echo topic
%}

{% raw %}
In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.
{% endraw %}

{% liquid
case section.blocks.size
when 1
  assign column_size = ''
when 2
  assign column_size = 'one-half'
when 3
  assign column_size = 'one-third'
else
  assign column_size = 'one-quarter'
endcase %}

{% liquid
for product in collection.products
  echo product.title | capitalize
endfor %}

{% render "template-name" %}

render (parameters)

{% assign my_variable = "apples" %}
{% render "name", my_variable: my_variable, my_other_variable: "oranges" %}

{% assign featured_product = all_products["product_handle"] %}
{% render "product", product: featured_product %}

{% assign featured_product = all_products["product_handle"] %}
{% render "product" with featured_product as product %}

{% assign variants = product.variants %}
{% render "product_variant" for variants as variant %}

{% include "template-name" %}

4. Variable

{% assign my_variable = false %}
{% if my_variable != true %}
  This statement is valid.
{% endif %}

{% assign foo = "bar" %}
{{ foo }}

{% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }}

{% assign favorite_food = "pizza" %}
{% assign age = 35 %}

{% capture about_me %}
I am {{ age }} and my favorite food is {{ favorite_food }}.
{% endcapture %}

{{ about_me }}

{% increment my_counter %}
{% increment my_counter %}
{% increment my_counter %}

{% assign var = 10 %}
{% increment var %}
{% increment var %}
{% increment var %}
{{ var }}

{% decrement variable %}
{% decrement variable %}
{% decrement variable %}

Filters

abs
append
at_least
at_most
capitalize
ceil
compact
concat
date
default
divided_by
downcase
escape
escape_once
first
floor
join
last
lstrip
map
minus
modulo
newline_to_br
plus
prepend
remove
remove_first
replace
replace_first
reverse
round
rstrip
size
slice
sort
sort_natural
split
strip
strip_html
strip_newlines
sum
times
truncate
truncatewords
uniq
upcase
url_decode
url_encode
where

{{ -17 | abs }}
{{ 4 | abs }}

https://shopify.github.io/liquid/

demos

https://shopify.github.io/liquid-code-examples/

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

Shopify Cheat Sheet

The Shopify Cheat Sheet is a resource for building Shopify Themes with Liquid

https://www.shopify.co.uk/partners/shopify-cheat-sheet

refs

https://www.cnblogs.com/xgqfrms/p/18470012

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---