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 %}
  
  {{ 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--------------------------------------