Shopify二次开发之三：liquid语法学习（Tags）

SuppperSA

已于 2023-12-06 17:54:49 修改

阅读量2.3k

点赞数 33

分类专栏： shopify 文章标签：学习前端 shopify

于 2023-11-28 11:07:07 首次发布

本文链接：https://blog.csdn.net/SupperSA/article/details/134646356

版权

shopify 专栏收录该内容

11 篇文章

订阅专栏

Tags

tags定义模板相关逻辑，在liquid中，只有两种标记的方式，一种是{{ }}另一种是{% %}。

变量声明

liquid数据类型：String、Number、Boolean、Nil、Array、Object

assign
{% assign variable_name = value %}

{% assign variable_name = value1 %}
如果对一个变量继续赋值需要重新assign

capture
{%- assign up_title = product.title（"Health potion"） | upcase -%}
{%- assign down_title = product.title | downcase -%}
{%- assign show_up_title = true -%}

{%- capture title -%}
  {% if show_up_title -%}
    Upcase title: {{ up_title }}
  {%- else -%}
    Downcase title: {{ down_title }}
  {%- endif %}
{%- endcapture %}

{{ title }}
输出：Upcase title: HEALTH POTION

capture能够配合liquid逻辑将开始与结束标记之间的字符串捕获之后赋值给一个变量title

decrement
  {% decrement variable %}
  {% decrement variable1 %}
  {% decrement variable %}
  {% decrement variable1 %}
  {% decrement variable1 %}
输出: -1 -1 -2 -2 -3

decrement标记会生成一个变量，初始值为-1，每次执行同样的decrement代码就会减1

increment
{% increment variable %}
{% increment variable %}
{% increment variable %}
输出: 0 1 2

increment 标记会生成一个变量，初始值为0，每次执行同样的increment 代码就会加1

条件语句

操作符

== != > < >= <= or and contains blank
相等不相等大于小于大于等于小于等于逻辑或逻辑与包括空

condition

( a > b , 'a大于b' )

( a or b, 'a为真或b为真' )

( a and b, 'a与b都为真' )

( a contains 'str'， 'a包含str字串'）

( a == blank， 'a是否为空'）

如果要判断一个值是否为空值可以用blank，比如对空字符串 ''、空对象{}、空数组[]、特殊空值Nil。

在liquid判断中，只有两种情况为假值，nil和false，其他的都是真值。

expression

可以在模板中渲染任何你想渲染的东西，比如渲染一个标签也比如渲染一个样式，总之就是根据条件渲染指定的东西。

if

{% if condition %}
  expression
{% endif %}

else

{% if condition %}
  expression1
{% else %}
  expression2
{% endif %}

unless

{% unless condition %}
  expression
{% endunless %}

case

{% case variable %}
  {% when first_value %}
    first_expression
  {% when second_value %}
    second_expression
  {% else %}
    third_expression
{% endcase %}

HTML

form表单生成

比如form product

{% form 'product', product %}
  <select name="id">
    {% for variant in product.variants %}
      <option value="{{ variant.id }}">
        {{ variant.title }}
      </option>
    {% endfor %}
  </select>
  <button type="submit">Add to cart</button>
{% endform %}

又比如form contact

{% form 'contact' %}
  {{ form.errors | default_errors }}

  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="contact[email]">
  </div>

  <div class="email">
    <label for="email">Name</label>
    <input type="text" name="contact[name]">
  </div>

  <div class="message">
    <label for="message">Message</label>
    <textarea name="contact[body]"></textarea>
  </div>

  <div class="submit">
    <input type="submit" value="Create">
  </div>
{% endform %}

发送邮件之后，商家的邮箱就会收到如下内容

style

{% style %}
  .h1 {
    color: {{ settings.colors_accent_1 }};
  }
{% endstyle %}

Iteration (遍历)

for
{% for product in collection.products -%}
  {{ product.title }}
{%- endfor %}
输出：

Draught of Immortality
Glacier ice
Health potion
Invisibility potion

else
{% for variable in array %}
  first_expression
{% else %}
  second_expression
{% endfor %}
当array长度为0的时候渲染 second_expression

break
{% for i in (1..5) -%}
  {%- if i == 4 -%}
    {% break %}
  {%- else -%}
    {{ i }}
  {%- endif -%}
{%- endfor %}
输出：1 2 3

1..5表示依次从1渲染到5，当条件i == 4的时候，break，结束循环。

continue
{% for i in (1..5) %}
  {% if i == 4 %}
    {% continue %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}
输出：1 2 3 5

1..5表示依次从1渲染到5，当条件i == 4的时候，continue ，跳到下次循环。

cycle

{% cycle 'one', 'two', 'three' %}
{% cycle '11', '22', '33' %}
{% cycle 'one', 'two', 'three' %}
{% cycle '11', '22', '33' %}

输出：

one 11 two 22

paginate
{% paginate collection.products by 4 %}
  {% for product in collection.products %}
    {% render 'product-item', product: product %}
  {% endfor %}
  {{ paginate | default_pagination }}
{% endpaginate %}
by 4 表示一组4个， {{ paginate | default_pagination }} 模板渲染默认分页导航

Theme （主题）

render渲染一个snippet，可以传值
{% render 'product-item', product: product %}

sections渲染一个sctions-group
{% sections 'xxx-group' %}

section渲染一个sction
{% section 'xxx-section' %}

stylesheet & javascript:渲染css、js代码
{% stylesheet %}
  css_styles
{% endstylesheet %}


{% javascript %}
  javascript_code
{% endjavascript %}
注意： Liquid 不会在stylesheet & javascript里渲染，只能渲染寻常css和JavaScript代码