开源模板语言Liquid

版权声明:本文为博主原创文章,禁止转载。 https://blog.csdn.net/Bi_ZhiAn/article/details/72547958

其实我早就应该了解Liquid的,但是因为一些原因, 终究还是没去了解Liquid,直到今天,再次遇见它,我准备进入它的世界,看看它面纱下的样子。

Liquid是一门由Shopify使用Ruby实现的开源模板语言,这门语言应用比较广泛,所以才会再次遇见它,哈哈。Liquid的代码分为这三部分对象(object),标记(tag),过滤器(filter)

对象(object)

这个对象相当于就是面向对象编程语言里的类的实例化对象,其访问对象的属性的方法也是一样的,都是通过对象打点加属性访问。唯有一点不同就是,Liquid的对象和变量名必须写在双大括号中,具体格式如下:

{{object.property}}
上面这行代码就可以输出object对象的属性值了

标记(tag)

我感觉这个标记其实就是编程语言中的基本控制结构吧!先看个例子吧!

{% if user %}
  {{ user.name }}  Hello World
{% endif %}

这个代码简直就是if-else即视感呐!只不过是把代码放在了大括号和百分号中间而已。上面只是一个小例子。下面开始详细说一下标记。

标记分为三类,控制流,迭代,变量赋值。下面分别说说这三个东西都是啥意思。

  • 控制流

    if和unless的用法

    控制流就是编程语言的基本控制结构了。控制流包括了if,这个前面已经说过。还包括了unless,这个unless是意思是除非!if是条件成立执行,而unless是条件不成立时执行,这俩一定是对头呐!下面看看unless的用法,和if的用法一模一样。

    {% unless user.name == 'zhangsan' %}
      Hello user.name
    {% endunless %}

    unless的用法和if的用法是不是一模一样呢?只是意思刚好相反而已。

    elsif/else的用法

    这个和if的用法是一样的,唯有一同就是这个是多个if嵌套用罢了,下面看代码

    {% if user.name == 'zhangsan' %}
      Hello , zhangsan
    {% elsif user.name == 'lisi' %}
      Hello , lisi 
    {% else %}
      Who are you?I do not kown you.
    {% endif %}

    是不是和if的用法一模一样呢?只是多个if嵌套而已,对不?

    case/when的用法

    这个和C#的case差不多,只是用法上有那么一点点的不同,看一下代码,就很容易的就明白了。

    {% assign name='zhangsan' %}
    {% case name %}
      {% when 'zhangsan' %}
         I kown you ,Hello zhangsan.
      {% when 'lisi' %}
         I kown you.Hello lisi.
      {% else %}
         Who are yo? I do not kown you.
    {% endcase %} 
    这段代码的输出结果如下: 
    kown you ,Hello zhangsan.

    是不是太容易明白了?但好像有一个地方不太清楚,这个assign 是啥意思呢?它的字面意思是分配赋值,其实它就是干这个事滴!在上面的这段代码中它相当于是说,大家注意啦,我要给name进行赋值操作喽!其实它就是定义变量的,哈哈。就这么简单。控制流搞定了,下面看迭代和循环。

  • 迭代和循环

    C#里的迭代就是foreach,循环就是for,在Liquid里的循环也是for,其停止循环的语句也和C#是一样的,都是break,下面看代码示例。

    for和break
    {% for index in (1..5) %}
      {% if index == 4 %}
         {% break %}
      {% else %}
         {{ index }}
       {% endif %}
    {% endfor%}
    这段代码的输出结果如下:
    1 2 3
    continue

    continue和C#里的continue用法和作用都是一样的,是跳出当前循环,而break是终止当前循环,看下代码就明白了。

    {% for index in (1..5) %}
      {% if index == 4 %}
         {% continue %}
      {% else %}
         {{ index }}
       {% endif %}
    {% endfor%}
    这段代码的输出结果如下:
    1 2 3 5
    for 和 limit

    这个厉害了,这种用法好像在mysql中见过,虽然新奇,但也简单,看一眼明白就好,下面看代码。

    {%for index in (1..5) limit:3 %}
       {{ index }}
    {% endfor %}
    输出结果是:1 2 3
    offset

    从指定索引号开始执行循环,但是要注意数组的索引都是从0开始的,下面看代码。

    {%for index in (1..5) offset:2 %}
       {{ index }}
    {% endfor %}
    输出结果是:3 4 5
    定义循环范围

    这个很简单,前面已经用过了。

    {% assign number=5 %}
    {%for index in (1..number) %}
       {{ index }}
    {% endfor %}
    输出结果:1 2 3 4 5
    reversed反转执行顺序

    这个和Python的代码风格有点像了,Python里也有这个用法,直接反转数组和集合元素,具体用法如下:

    {% assign array=[1,2,3,4,5] %}
    {% for index in array reversed %}
      {{ item }}
    {% endfor %}
    输出:5 4 3 2 1
    cycle

    其实就是一个循环吧!打一鞭,走一下,周期性的走,举个例子,过了星期一就是星期二,过了星期二就是星期三···过了星期日就是星期一,就这样周期性的走。不过它自己是不会走的,需要鞭子打它才行,这个鞭子就是for循环,哈哈,下面看代码。

    {% assign array=[1,2,3,4,5] %}
      {% cycle  array %}
      {% cycle  array %}
      {% cycle  array %}
      {% cycle  array %}
      {% cycle  array %}
      {% cycle  array %}
    输出结果就是:
    1
    2
    3
    4
    5
    1
    tablerow生成表格

    生成一个 HTML 表格。必须用 <table> 和 </table> 这两个 HTML 标签将其包裹起来,看代码:

    <table>
    {% tablerow product in collection.products %}
    {{ product.title }}
    {% endtablerow %}
    </table>
    输出的结果如下:
    <table>
    <tr class="row1">
      <td class="col1">
        Cool Shirt
      </td>
      <td class="col2">
        Alien Poster
      </td>
      <td class="col3">
        Batman Poster
      </td>
      <td class="col4">
        Bullseye Shirt
      </td>
      <td class="col5">
        Another Classic Vinyl
      </td>
      <td class="col6">
        Awesome Jeans
      </td>
    </tr>

    这个结果有没有看懂?是不是有点懵?这是我复制粘贴的代码。这个结果其实就是默认是生成的表格是一行n列的表格,具体是多少列,就要看collection.products 里面有多少元素了。是不是很简单呢?

    cols定义表格几列
    <table>
    {% tablerow product in collection.products cols:2 %}
    {{ product.title }}
    {% endtablerow %}
    </table>
    输出的结果如下:
    <table>
    <tr class="row1">
      <td class="col1">
        Cool Shirt
      </td>
      <td class="col2">
        Alien Poster
      </td>
    </tr>
    <tr class="row2">
      <td class="col1">
        Batman Poster
      </td>
      <td class="col2">
        Bullseye Shirt
      </td>
    </tr>
    <tr class="row3">
      <td class="col1">
        Another Classic Vinyl
      </td>
      <td class="col2">
        Awesome Jeans
      </td>
    </tr>
    </table>

    这个和前面那个生成表格是一致的,无非就是多设置了一行有几列而已,等这一行的列数达到定义的数值后,自动开始下一行,这也很简单呐!

    后面又说了range和limit以及offset与tablerow以及cols的配合使用,但rangge,limit,offset的意思和作用都没变,所以没必要说,就不说啦,哈哈。
  • 变量

assign

创建新的变量,创建的变量没有啥要求

capture

创建的变量都是字符串,而且是把自己的所有都赋值给创建的变量,它真的是用情至深呐!看下代码就明白了。

{% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }}
输出结果:
I am being captured.

它是不是付出了自己的所有呢?真的是啊!可惜的是,这种人的结局往往是悲剧。

increment

这个厉害了,它自带加1属性,它创建的是数值变量,其初始值是0,但之后每次调用这个变量的时候,其值自动加1,掉一次加一次,是不是很6呐!还是看代码:

{% increment my_counter %}
{% increment my_counter %}
{% increment my_counter %}
输出结果如下:
0
1
2

还有一点要说明的就是,increment 比较小心眼呐!它的加1属性只对自己创建的变量有效,而对capture 或assign创建的变量无效,是不是很小心眼呐!下面看代码。

{% assign var = 10 %}
{% increment var %}
{% increment var %}
{% increment var %}
{{ var }}
输出结果如下:
0
1
2
10
decrement

它和increment 以前肯定是爱人呐!俗话说,爱有多真,恨便有多深,所以别说分手后做朋友,怎么可能呢?看看decrement和increment 就知道为啥做不了朋友了,哈哈。

decrement定义的也是数值类型,但是它的初始值是-1,每次调用都减1,是不是和increment 完全相反呐!哎,相爱相杀呐!它们俩若再在一起的话,唯有消失了。哈哈,下面是代码。

{% decrement variable %}
{% decrement variable %}
{% decrement variable %}
输出结果如下:
-1
-2
-3

还有一点要注意的就是,decrement 同样是很小心眼滴,它的减1特性,对assign 或 capture 创建的变量是没有效果滴。看吧,果真是,不是一家人,不进一家门呐!

我的天呐!我写了这么多,竟然还没把这个Liquid写完呐!估计明天不会 再写它了吧!因为明天要学一个新东西。哈哈。它的面纱,我应该已经揭开一半了吧!另一半,待我下次揭开,哈哈。

展开阅读全文

没有更多推荐了,返回首页