开源模板语言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 %}输出结果就是：123451

  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 %}输出结果如下：012

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

{% assign var = 10 %}{% increment var %}{% increment var %}{% increment var %}{{ var }}输出结果如下：01210

decrement

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

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

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

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

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