自定义模板

ZKEACMS中的自定义模板是一项高级自定义功能,通过它可以快速创建更加丰富的前端显示。

语法

要访问模板里对象的内容,都必需通过this关键字,this.Model即是传入模板的内容对象,这个对象可能是一个Object,也可能是一个Array,视具体情况而定。

模板语法使用的是与Liquid相同的模板语法,所以您可以在这里查看更详细的语法说明:https://shopify.github.io/liquid/

声明式渲染

用简洁的模板语法来声明式地将数据渲染输出:

{{this.Model.Name}}

输出:

张三

条件判断 if

{% if this.Model %}
  Hello {{ this.Model.Name }}
{% endif %}

访问数组中的项目 for

{% for user in this.Model %}
  {{ user.Name }}
{% endfor %}

运算符

基本运算符有:

== 等于
!= 不等于
> 大于
< 小于
>= 大于等于
<= 小于等于
or 或者
and 并且

例如:

{% if this.Model.title == "Awesome Shoes" %}
  These shoes are awesome!
{% endif %}

同时使用多个运算符:

{% if this.Model.type == "Shirt" or this.Model.type == "Shoes" %}
  This is a shirt or a pair of shoes.
{% endif %}

contains

contains可用于检查字符串中是否包含某些字符:

{% if this.Model.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}

也可以用于检查数组中是否包含某些字符:

{% if this.Model.tags contains 'Hello' %}
  This product has been tagged with 'Hello'.
{% endif %}

加法 plus

{{ 4 | plus: 2 }} //6

减法 minus

{{ 4 | minus: 2 }} //2

乘法 times

{{ 183.357 | times: 12 }} //2200.284

除法 divided_by

{{ 16 | divided_by: 4 }} //4
{{ 5 | divided_by: 3 }} //1
{{ 20 | divided_by: 7.0 }} //2.857142857142857

示例:分页模板

分页的对象在this.Pagin里面:

<ul class="pagination">
    {% if this.Pagin.PreLink %}    
        <li><a href="{{this.Pagin.PreLink}}">«</a></li>
    {% else %}    
        <li class="disabled"><a href="javascript:void(0)">«</a></li>
    {% endif %}    

    {% if this.Pagin.PageIndex >= 5 %}
        <li>
            <a>...</a>
        </li>
    {% endif %}
    
    {% for item in this.Pagin.PageLinks %}
            <li class="{% if item.IsCurrentPage %}active{% endif %}">
            <a href="{{item.Link}}">{{item.Index}}</a>
        </li>
    {% endfor %}

    {% if this.Pagin.AllPage | minus: this.Pagin.PageIndex > 5 %}
        <li>
            <a>...</a>
        </li>
    {% endif %}   

    {% if this.Pagin.NextLink %}
        <li>
            <a href="{{this.Pagin.NextLink}}">»</a>
        </li>    
    {% else %}    
        <li class="disabled">
            <a href="javascript:void(0)">»</a>
        </li>
    {% endif %}
</ul>

编辑工具

推荐您使用Visual Studio Code,并安装Liquid扩展插件来写模板: