TinyLiquid是一个基于JavaScript,兼容Liquid模板语法的的模板引擎。 其具有以下特点:
目前最新版为v0.0.9,可通过以下方式来获取TinyLiquid模块:
通过NPM安装: npm install tinyliquid
通过git下载: git clone git://github.com/leizongmin/tinyliquid.git
在 浏览器 端使用:
在 Express 3.x 中使用:模块express-liquid
Liquid 是一个比较优秀的轻量级的模版语言。详见:Liquid官网
Liquid有两种形式的标签,即 输出标签 和 逻辑标签 。这两种标签的区别在于:
输出标签 :用于处理模版输出值,使用{{}}包围,如下: {{ product.title }}
逻辑标签 :用于处理模版逻辑,使用{%%}包围,如下: {% if product.price > 100 %}
如下面例子: 你好 {{name}} 你好 {{user.name}} 你好 {{ ‘shopqi’ }}
输出标签的内容可以通过过滤器来进行格式化操作。例如,我们将‘shop’的转化成大写输出,可使用如下形式的标签 {{ ‘shop’ | upcase}}
逻辑标签用于处理模版中的逻辑关系,ShopQi支持如下标签
用于判断条件,参数为boolean值:
{% if user %} Hi {{ user.name }} {% endif %} {% if user.name == 'tobi' %} hi tobi {% endif %} {% if user.name != 'tobi' %} hi non-tobi {% endif %} {% unless user.name == 'tobi' %} hi non-tobi {% endunless %} {% if user.name == 'tobi' or user.name == 'marc' %} hi marc or tobi {% endif %} {% if user.name == 'tobi' and user.last_name == 'scottish' %} hi tobi scottish {% endif %} {% if user.name contains 'tobi' %} hi tobias {% endif %} {% if user.creditcard == nil %} poor sob {% endif %} {% if user.payments == empty %} you haven't paid yet! {% endif %} {% if user.age > 18 %} Login here {% else %} Sorry, you are too young {% endif %} {% unless user.age > 18 %} Sorry, you are too young {% else %} Login here {% endunless %}
如果一个情况存在多个分支的情况,可使用case来处理:
{% case condition %} {% when 1 %} hit 1 {% when 2 %} hit 2 {% else %} hit else {% endcase %}
通常情况下,我们有时候需要循环交替的执行某些任务。Liquid支持这种周期性的执行任务的标签,如下:
{% cycle 'one', 'two', 'three' %} {% cycle 'one', 'two', 'three' %} {% cycle 'one', 'two', 'three' %} {% cycle 'one', 'two', 'three' %} 结果为: one two three one
如果,我们使用
liquid支持集合数据循环,如:
{%for item in collection%} {{item}} {%endfor%}
同样还支持如下一些辅助方法: forloop.length # => 整个循环的总次数 forloop.index # => 当前循环的下标 forloop.index0 # => 当前循环的下标(从0开始算) forloop.rindex # => 计算还剩下多少次数未执行 forloop.rindex0 # => 计算还剩下多少次数未执行(从0开始计算) forloop.first # => 是否是集合的第一次循环 forloop.last # => 是否是集合的最后一次循环
for循环还支持一些属性limit,offset,其中,limit用于限制集合循环次数,offset用于设置开始的下标,如:
# array = [1,2,3,4,5,6] {% for item in array limit:2 offset:2 %} {{ item }} {% endfor %} # results in 3,4 同样,for里面还支持范围的定义,即..用来取得范围,如: # if item.quantity is 4... {% for i in (1..item.quantity) %} {{ i }} {% endfor %} # results in 1,2,3,4
Liquid同样支持创建表格,创建行和列
{% tablerow item in items cols: 3 limit: 12 %} {{ item.variable }} {% endtablerow %}
当我们需要为变量赋值时,我们可以使用assign来进行定义我们需要的变量:
{% assign name = 'freestyle' %} {% for t in collections.tags %} {% if t == name %} Freestyle! {% endif %} {% endfor %}