基础知识
入门
Liquid是安全、面向客户的模板语言,用于构建灵活的 web 应用。
由 Shopify 创造并用 Ruby 实现。它是 Shopify主题的骨骼,并且被用于加载店铺系统的动态内容。
GitHub:https://github.com/Shopify/liquid
对象(Object)
告诉 Liquid 在页面的哪个位置展示内容,对象和变量使用{{ }}标识。
标记(Tag)
标记创建模板的逻辑和控制流,使用{% %}标识。
过滤器(Filter)
改变Liquid对象的输出,通过|分隔。
{% comment %}对象{% endcomment %}
{{ page.Title }}
{% comment %}标记{% endcomment %}
{% if page %}
Hello {{ page.Title }} !
{% endif %}
{% comment %}过滤器{% endcomment %}
{{ "adam!" | capitalize | prepend: "Hello " }}
操作符
== 相等 != 不相等 > 大于 < 小于 >= 大于或等于 <= 小于或等于 or 逻辑或 and 逻辑与
真值(Truthy)与假值(falsy)
- 除nil和false之外的值都是真值
- 字符串即使为空字符也是真值
数据类型
- String(字符串)Number(数字)Boolean(布尔)Nil(空)Array(数组)
- 通过assign或 capture对变量进行初始化
{% assign my_string = "Hello World!" %}
{% assign my_int = 25 %}
{% assign my_float = 39.756 %}
{% assign foo = true %}
控制输出的空行
使用{{- -}}、{%- -%},删除空行
Tags
判断语句
- if、unless、elsif\else
- case\when
{% if page.Title=="1" %}
//条件成立输出内容
{% elsif page.Title="2" %}
//输出内容
{% else %}
//输出内容
{% endif %}
{% unless page.Title=="1"%}
//条件不成立输出内容
{% endunless %}
{% assign handle = 'cake' %}
{% case handle %}
{% when 'cake' %}
This is a cake
{% when 'cookie' %}
This is a cookie
{% else %}
This is not a cake nor a cookie
{% endcase %}
循环
- for循环/break停止循环/continue跳出当前循环
- ==limit== 限定循环执行的次数
- ==offset== 从指定索引号开始执行循环。
- ==range== 定义循环执行的范围。可利用数字或变量来定义此执行范围。
- ==reversed== 反转循环的执行顺序。注意和 reverse 过滤器(filter)的拼写是不同的。
- ==cycle== 循环一组字符串并按照它们传入的顺序将其输出。每次调用 cycle时,传入的参数中的下一个字符串将被输出。
- ==tablerow== 生成一个 HTML 表格。必须用 <table> 和 </table> 这两个 HTML 标签将其包裹起来。
{% for product in collection.products %}
{{ product.title }}
{% 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 %}
//cols指定列数
{% tablerow product in collection.products cols:2 %}
{{ product.title }}
{% endtablerow %}
禁止处理内容
raw 标记临时禁止处理其所包围的代码。如果输出的内容与 Liquid 模板语言有冲突时,可以避免冲突。
{% raw %}
In Handlebars, {{ this }} will be HTML-escaped, but
{{{ that }}} will not.
{% endraw %}
变量
- assign
- capture
- increment 创建一个全新的数值变量,每次调用时值 +1。初始值是 0。
- decrement 创建一个全新的数值变量,每次调用时值 -1。初始值是 -1。
{% assign my_variable = false %}
{% capture about_me %}
I am {{ age }} and my favorite food is {{ favorite_food }}.
{% endcapture %}
{% increment my_counter %}
{% increment my_counter %}
{% increment my_counter %}
Filter速查
abs
- 返回一个数字的绝对值。
- {{ -17 | abs }}
append
- 将两个字符串拼接起来并返回拼接之后的值。
- {{ "/my/fancy/url" | append: ".html" }}
at_least
- 将数字限制在最小值。数字不能小于取小值,否则返回最小值
- {{ 4 | at_least: 5 }}
at_most
- 将数字限制在最大值。
capitalize
- 将字符串首字母转为大写。
- {{ "title" | capitalize }} output:Title
ceil
- 将一个浮点数向上取整并返回一个最接近的整数。在 ceil 过滤器执行之前 Liquid 会先尝试将输入转换为数字格式。
- {{ 1.2 | ceil }} output:2
compact
- 删除数组中的所有 nil 值。
- {% assign site_categories = site.pages | map: 'category' | compact %}
concat
- 连接数组
{% assign furniture = "chairs, tables, shelves" | split: ", " %}
{% assign everything = fruits | concat: vegetables | concat: furniture %}
{% for item in everything %}
- {{ item }}
{% endfor %}
date
- 将时间戳(timestamp)转换为另一种日期格式。格式化语法与 strftime 一致。输入格式与 Ruby 中的 Time.parse 一致。
- {{ article.published_at | date: "%a, %b %d, %y" }}
default
- 指定一个默认值,以防预期的值不存在。如果左侧的值为 nil、false 或空,default 将输出此默认值。
- {{ product_price | default: 2.99 }}
divided_by
- 将两个数相除。如果除数(divisor)为整数,则将相除之后得到的结果向下取整得到最接近的整数(也就是对应 floor 的功能)。
- {{ 5 | divided_by: 3 }} output:1
- {{ 20 | divided_by: 7.0 }} output:2.857142857142857
downcase
- 用于将字符串中的各个字符转换为小写形式。对于已经是小写形式的字符串没有任何影响。
escape
- 对字符串转义操作就是将字符串中的某些字符替换为转义序列(escape sequence),这样整个字符串就能够用于 URL了。如果字符串不需要转义则不会对字符串做任何操作。
escape_once
- 转义一个字符串并且不修改已经转义过的实体(entities)。对于无须转义的字符串不做任何修改。
first
- 返回数组的第一项。
floor
- 将一个浮点数通过舍弃小数部分得到最近的整数。在 floor 过滤器执行之前 Liquid 会先尝试将输入转换为数字格式。
join
- 将数组中的各个字符串合并为一个字符串,并将 split 参数作为字符串之间的分隔符。
- {% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
- {{ beatles | join: " and " }}
last
- 返回数组中的最后一项。
lstrip
- 删除字符串左侧的所有空白符(制表符、空格和换行符)。字符串中间的所有空白符不受影响。
map
- 从对象(object)中提取指定名称的属性的值,并用这些值构建一个数组。
- {% assign all_categories = site.pages | map: "category" %}
minus
- 从一个数中减去另一个数。
modulo
- 返回除法运算的余数。
newline_to_br
- 将所有换行符(\n) 替换为 HTML 的 (
) 标签。
plus
- 两个数相加。
prepend
- 在一个字符串前面附加另一个字符串。
remove
- 从一个字符串中删除所有出现的另一个子字符串。
remove_first
- 从一个字符串中仅仅删除第一次出现的另一个子字符串。
replace
- 将参数中给出的第一个参数全部替换为第二个参数。
- {{ "Take my protein " | replace: "my", "your" }}
replace_first
- 将字符串中出现的第一个参数替换为第二个参数。
reverse
- 将数组中的所有项的顺序反转。reverse 不能操作字符串。
- reverse 不能直接应用到字符串上,但是你可以先将字符串分割成字符数组,然后再将数组反转,最后将反转之后的数组合并。
- {{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
round
- 将浮点数舍入到最近的整数,或者,如果传入的参数是一个数值的话,将浮点数舍入到参数指定的小数位。四舍五入
rstrip
- 将字符串右侧的所有空白字符(制表符 - tab、空格符 - space 和 回车符 - newline)删除。
size
- 返回字符串中所包含的字符数或者数组中所包含的条目数量。size 还支持“点标记”(例如 {{ my_string.size }})。这种用法便于你在标签(tag)中使用 size 过滤器,例如条件判断标签(tag)。
{{ "Ground control to Major Tom." | size }}
//输出28
{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
{{ my_array | size }}
//输出4
//使用“点标记”:
{% if site.pages.size > 10 %}
This is a big website!
{% endif %}
slice
- 字符串剪切,只传入一个参数时将返回此参数作为下标所对应的单个字符。第二个参数是可选的,用于指定返回的子字符串的长度。
sort
- 对数组中的所有进行排序。排序后的数组是按照区分大小写的顺序排列的。
sort_natural
- 对数组进行排序,并且大小写无关。
split
- 根据参数传入的分隔符将字符串分解为数组。split通常被用于将以逗号为分隔符的字符串转换为数组。
- {% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
strip
- 删除字符串左右两侧的所有空白符号(包括制表符、空格、换行符)。对于字符串中间的空白符不做任何处理。
strip_html
- 从字符串中删除所有 HTML 标签。
strip_newlines
- 从字符串中删除所有换行字符(newline character)。
times
- 将一个数乘以另一个数。
truncate
- truncate 将字符串截短为指定的字符个数。如果指定的字符数量小于字符串的长度,则会在字符串末尾添加一个省略号(…) 并将此省略号计入字符个数中。
- 自定义省略号
truncatewords
- 将字符串截短为指定的单词个数。如果指定的单词数量小于字符串中包含的单词个数,则会在字符串末尾添加一个省略号(…)。
- 自定义省略号 {{ "Ground control to Major Tom." | truncatewords: 3, "--" }}
uniq
- 删除数组中的所有重复项。
upcase
- 将字符串中的每个字符都转换为大写形式。对于已经全是大写的字符串不做任何操作。
url_decode
- 对于作为 URL 进行编码或通过 url_encode 编码的字符串进行解码。
url_encode
- 将字符串中非 URL 安全的字符转换为百分号编码(percent-encoded)的字符。
where
- 创建一个数组,仅包含具有给定属性值的对象,或默认情况下的任何truthy值。
All products:
{% for product in products %}
- {{ product.title }}
{% endfor %}
{% assign kitchen_products = products | where: "type", "kitchen" %}
Kitchen products:
{% for product in kitchen_products %}
- {{ product.title }}
{% endfor %}
网友评论