526互联

Liquid 常用语法记录

发布时间 2024-01-08 17:34:27作者: 麦豇豆

一、什么是 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--------------------------------------