JavaScript Liquid模板引擎 Tinyliquid

• 授权协议: MIT
• 开发语言: JavaScript
• 操作系统: 跨平台
• 软件首页: https://github.com/leizongmin/tinyliquid
• 软件文档: https://github.com/leizongmin/tinyliquid

软件介绍

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 %}

本文地址：https://codercto.com/soft/d/13019.html