Tinyliquid - JavaScript Liquid模板引擎


MIT
跨平台
JavaScript

软件简介

TinyLiquid是一个基于JavaScript,兼容Liquid模板语法的的模板引擎。 其具有以下特点:

  • 强大灵活的语法:在模板当中,你可以使用诸如条件判断、循环、赋值、函数调用等语法 标记来进行控制
  • 渲染速度快:目前仅做了简单的测试,其速度为ejs的4倍以上 性能测试结果
  • 异步渲染模式:可解决JavaScript程序中异步获取多个数据时,难以控制的问题
  • 可运行于浏览器端及Node.js环境下

下载 & 安装

目前最新版为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官网

基础

Liquid有两种形式的标签,即 输出标签逻辑标签 。这两种标签的区别在于:

输出标签 :用于处理模版输出值,使用{{}}包围,如下: {{ product.title }}

逻辑标签 :用于处理模版逻辑,使用{%%}包围,如下: {% if product.price > 100 %}

输出标签

如下面例子: 你好 {{name}}
你好 {{user.name}} 你好 {{ ‘shopqi’ }}

过滤器

输出标签的内容可以通过过滤器来进行格式化操作。例如,我们将‘shop’的转化成大写输出,可使用如下形式的标签 {{ ‘shop’ | upcase}}

逻辑标签

逻辑标签用于处理模版中的逻辑关系,ShopQi支持如下标签

if/else/unless

用于判断条件,参数为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来处理:

{% case condition %} 
  {% when 1 %} 
    hit 1 
  {% when 2 %} 
    hit 2 
  {% else %} 
    hit else
{% endcase %}
cycle标签

通常情况下,我们有时候需要循环交替的执行某些任务。Liquid支持这种周期性的执行任务的标签,如下:

{% cycle 'one', 'two', 'three' %}

{% cycle 'one', 'two', 'three' %}

{% cycle 'one', 'two', 'three' %}

{% cycle 'one', 'two', 'three' %}

结果为:

one
two
three
one

如果,我们使用

for标签

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
Tables

Liquid同样支持创建表格,创建行和列

{% tablerow item in items cols: 3 limit: 12 %}
    {{ item.variable }}
  {% endtablerow %}
变量赋值assign

当我们需要为变量赋值时,我们可以使用assign来进行定义我们需要的变量:

{% assign name = 'freestyle' %}
{% for t in collections.tags %}
{% if t == name %}


Freestyle!


{% endif %}
{% endfor %}