开源模板语言Liquid

其实我早就应该了解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 表格。必须用

  和 这两个 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写完呐！估计明天不会 再写它了吧！因为明天要学一个新东西。哈哈。它的面纱，我应该已经揭开一半了吧！另一半，待我下次揭开，哈哈。