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

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

作者: 老哥深蓝 | 来源:发表于2019-04-17 10:20 被阅读0次

    基础知识

    入门

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

    相关文章

      网友评论

          本文标题:Liquid模板语言构建Web页面-学习速查笔记

          本文链接:https://www.haomeiwen.com/subject/xgtgwqtx.html