Liquid 常用语法记录

一、什么是 Liquid

Liquid 是一款专为特定需求而打造的模板引擎。

Liquid 中有两种类型的标记：Output 和 Tag。

• Output 通常用来显示文本

  {{ 两个花括号 }}

• Tag 通常用于执行逻辑命令

  {% 花括号加百分号 %}

shopify filter：https://shopify.dev/docs/api/liquid/filters

Liquid for Designers：https://github.com/Shopify/liquid/wiki/Liquid-for-Designers

二、Output

简单示例

Hello {{name}}
Hello {{user.name}}
Hello {{ 'tobi' }}

如果想要改变输出的结果，我们可以使用过滤器，例如将输出的字符串转为大写

Hello {{ 'tobi' | upcase }}

还可以添加多个过滤器，例如

Hello {{ '*tobi*' | textilize | upcase }}

下面说一下常用的一些过滤器

1、计算（加、减、乘、除、取余、取整等）

• plus——加

  {{ 1 | plus:1 }} #=> 2

• minus——减

  {{ 4 | minus:2 }} #=> 2

• times——乘

  {{ 5 | times:4 }} #=> 20

• divided_by——除

  {{ 10 | divided_by:3 }} #=> 3

• modulo——取余

  {{ 3 | modulo:2 }} #=> 1

• floor——向下取整

  {{ 4.6 | floor }} #=> 4

• ceil——向上取整

  {{ 4.6 | ceil }} #=> 5

• round——四舍五入

  {{ 4.5612 | round: 2 }} #=> 4.56

   

2、字符串处理

• append——后拼接

  {{ 'foo' | append:'bar' }} #=> 'foobar'

• prepend——前拼接

  {{ 'bar' | prepend:'foo' }} #=> 'foobar'

• slice——字符串分割

  {{ "hello" | slice: -3, 3 }} #=> llo

• split——-在匹配模式上分割字符串

  {{ "a~b" | split:"~" }} #=> ['a','b']

• remove——删除每个出现的情况

  {{ 'foobarfoobar' | remove:'foo' }} #=> 'barbar'

• replace——替换每个出现的地方

  {{ 'foofoo' | replace:'foo','bar' }} #=> 'barbar'

• truncate——将字符串截断为 x 个字符。它还接受第二个参数，该参数将附加到字符串

  {{ 'foobarfoobar' | truncate: 5, '.' }} #=> 'foob.'

• downcase—— 将输入字符串转换为小写
• upcase- 将输入字符串转换为大写
• strip_newlines- 从字符串中删除所有换行符 (\n)
• strip- 去除字符串两端的所有空格
• lstrip- 去除字符串开头的所有空格
• rstrip- 去除字符串末尾的所有空格

3、数组处理

• first- 获取传入数组的第一个元素
• last- 获取传入数组的最后一个元素
• sort- 对数组的元素进行排序
• join- 将数组的元素与它们之间的特定字符连接起来
• reverse- 反转传入的数组
• uniq- 从数组中删除重复元素，可以选择使用给定属性来测试唯一性
• map- 映射/收集给定属性的数组

4、其他

• data——日期格式化
• default——设置默认值

  {{ undefined_variable | default: "Default value" }} #=> "Default value"

• size- 返回数组或字符串的大小
• capitalize- 将输入句子中的单词大写
• escape_once- 返回 html 的转义版本，而不影响现有的转义实体
• escape- html 转义字符串
• newline_to_br- 用 html 中断替换每个换行符 (\n)
• remove_first- 删除第一次出现的情况，例如 {{ 'barbar' | remove_first:'bar' }} #=> 'bar'
• replace_first- 替换第一个出现的地方，例如 {{ 'barbar' | replace_first:'bar','foo' }} #=> 'foobar'
• strip_html- 从字符串中剥离 html
• truncatewords- 将字符串截断为 x 个单词
• url_encode- url 编码字符串

三、Tag

• assign - Assigns some value to a variable
• capture - Block tag that captures text into a variable
• case - Block tag, its the standard case...when block
• comment - Block tag, comments out the text in the block
• cycle - Cycle is usually used within a loop to alternate between values, like colors or DOM classes.
• for - For loop
• break - Exits a for loop
• continue Skips the remaining code in the current for loop and continues with the next loop
• if - Standard if/else block
• include - Includes another template; useful for partials
• raw - temporarily disable tag processing to avoid syntax conflicts.
• unless - Mirror of if statement

1、变量赋值

• assign - 将值赋给变量

  {% assign name = 'freestyle' %}

• capture - 用于捕获一段Liquid代码块的输出，并将其保存到一个变量中

  {% capture variable_name %}
    <!-- 这里是要捕获的内容，可以包含任意Liquid代码 -->
    {{ some_variable | filter }}
    {% if condition %}
      Some content
    {% endif %}
  {% endcapture %}

  在上面的例子中，capture标签将some_variable | filter和{% if condition %} Some content {% endif %}的输出捕获到名为variable_name的变量中。

2、if/else

liquid 用以下标签来实现 if 判断：

• {% if <CONDITION> %} ... {% endif %}— 包含模板的一部分，仅当条件为真时才会运行。

  {% if user.name == 'tobi' or user.name == 'bob' %}
    Hello tobi or bob
  {% endif %}

  {% if user.name == 'bob' and user.age > 45 %}
    Hello old bob
  {% endif %}

• {% elsif <CONDITION> %}— 可以选择在块内使用if ... endif。指定另一个条件；如果最初的“if”失败，Liquid 会尝试“elsif”，如果成功则运行模板的以下部分。您可以在一个块中使用任意数量的 elsif if。

  {% if user.name == 'tobi' %}
    Hello tobi
  {% elsif user.name == 'bob' %}
    Hello bob
  {% endif %}

• {% else %}— 可以选择在if ... endif块内的任何“elsif”标签之后使用。如果上述所有条件均失败，Liquid 将运行“else”标签后面的模板部分。

  {% if user.age > 18 %}
     Login here
  {% else %}
     Sorry, you are too young
  {% endif %}

• {% unless <CONDITION> %} ... {% endunless %}——“if”语句的反面。不要将“elsif”或“else”与 except 语句一起使用。

  {% unless user.name == 'tobi' %}
    Hello non-tobi
  {% endunless %}

3、for 循环

{% for item in array %}
  {{ item }}
{% endfor %}

{% for item in hash %}
  {{ item[0] }}: {{ item[1] }}
{% endfor %}

# if item.quantity is 4...
{% for i in (1..item.quantity) %}
  {{ i }}
{% endfor %}
# results in 1,2,3,4

• 辅助变量

在每个for循环期间，以下辅助变量可满足额外的样式需求：

forloop.length      # => length of the entire for loop
forloop.index       # => index of the current iteration
forloop.index0      # => index of the current iteration (zero based)
forloop.rindex      # => how many items are still left?
forloop.rindex0     # => how many items are still left? (zero based)
forloop.first       # => is this the first iteration?
forloop.last        # => is this the last iteration?

• 可选参数 

limit:<INTEGER>让您限制获得的物品数量。

offset:<INTEGER>让您从第 n 个项目开始收集。

reversed：从最后一个到第一个迭代集合。

# array = [1,2,3,4,5,6]
{% for item in array limit:2 offset:2 %}
  {{ item }}
{% endfor %}
# results in 3,4

{% for item in collection reversed %} {{item}} {% endfor %}

# items => []
{% for item in items %}
   {{ item.title }}
{% else %}
   There are no items!
{% endfor %}

4、case 语句

{% case condition %}
{% when 1 %}
hit 1
{% when 2 or 3 %}
hit 2 or 3
{% else %}
... else ...
{% endcase %}

 

END--------------------------------------