Liquid模板语言构建Web页面-学习速查笔记

基础知识

入门

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 %} 
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,219评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,363评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,933评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,020评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,400评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,640评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,896评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,597评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,327评论 1 244
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,581评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,072评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,399评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,054评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,849评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,672评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,585评论 2 270

推荐阅读更多精彩内容

  • 官网 中文版本 好的网站 Content-type: text/htmlBASH Section: User ...
    不排版阅读 4,310评论 0 5
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,152评论 0 4
  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 1,014评论 0 1
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 8,620评论 0 3
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,037评论 0 21