自定义模板

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

语法

要访问模板里对象的内容,都必需通过this关键字,this.Model即是传入模板的内容对象,这个对象可能是一个Object,也可能是一个Array,视具体情况而定。如果你不知道传入的对象具体是什么,可以使用以下代码将整个对象打印出来:

<pre>
{{this.Model}}
</pre>

this.ViewContext

您还可以使用this.ViewContext来获取一些其它内容:

namespace ZKEACMS.Fluid
{
    public class ViewContext
    {
        public string Path { get; set; }
        public string AbsoluteUrl { get; set; }
        public string RequestPath { get; set; }
        public IUser CurrentCustomer { get; set; }
    }
}

声明式渲染

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

{{this.Model.Name}}

输出:

张三

数据类型

字符串 String

{% assign my_string = "Hello World!" %}

数字 Number

{% assign my_int = 25 %}
{% assign my_float = 39.756 %}

布尔类型 Boolean

{% assign foo = true %}
{% assign bar = false %}

数组 Array

{% for user in site.users %}
  {{ user }}
{% endfor %}

{{ site.users[0] }}
{{ site.users[1] }}
{{ site.users[3] }}

流程控制

条件判断 if

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

{% if customer.name == 'kevin' %}
  Hey Kevin!
{% elsif customer.name == 'anonymous' %}
  Hey Anonymous!
{% else %}
  Hi Stranger!
{% endif %}

循环 for

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

循环一定的次数 for

{% for item in (0..6) %}
    {{item}}
{% endfor %}

输出:0 1 2 3 4 5 6

for里面使用break,continue

{% for i in (1..5) %}
  {% if i == 4 %}
    {% break %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

{% for i in (1..5) %}
  {% if i == 4 %}
    {% continue %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}

限制循环次数 limit

{% for item in array limit:2 %}
  {{ item }}
{% endfor %}

设置起始索引 offset

{% for item in array offset:2 %}
  {{ item }}
{% endfor %}

case/when

{% assign handle = 'cake' %}
{% case handle %}
  {% when 'cake' %}
     This is a cake
  {% when 'cookie' %}
     This is a cookie
  {% else %}
     This is not a cake nor a cookie
{% endcase %}

运算符

基本运算符有:

== 等于
!= 不等于
> 大于
< 小于
>= 大于等于
<= 小于等于
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 %}

日期格式化

{{ this.Model.CreateDate | date: "%a, %b %d, %y" }} //Fri, Jul 17, 18
{{ this.Model.CreateDate | date: "%Y" }} //2018

可以使用"now" (或 "today") 来获取当前日期

{{ "now" | date: "%Y-%m-%d %H:%M" }} //2017-12-14 15:58

更详细的格式化用法,请查看date过滤器

定义变量

通过assign来定义变量:

{% if item.ID == this.Model.ArticleTypeID  %}
    {% assign active = "btn-black" %}
{% else %}
    {% assign active = "btn-link" %}
{% endif %}

使用capture

{% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }}

使用capture,可以组合一个复杂的字符串值:

{% assign favorite_food = 'pizza' %}
{% assign age = 35 %}

{% capture about_me %}
I am {{ age }} and my favorite food is {{ favorite_food }}.
{% endcapture %}

{{ about_me }}

特殊标签

AntiforgeryToken

使用AntiforgeryTokenTag,可以在Form中添加AntiforgeryToken,这样可以防止跨站攻击,在修改有关Form的模板时,一定要在Form里面加上这个标签,不然Form会提交不成功:

{% antiforgerytoken %}

Style

StyleTag用于引用CMS中定义好的样式资源:

{% style 'product-ecommerce' %}

Script

ScriptTag用于引用CMS中定义好的脚本资源:

{% script 'product-ecommerce' %}

Razor

RazorTag将允许您在模板中引入Razor视图:

{% razor '~/Views/Shared/reCaptcha.cshtml' %}

Url

在CMS中使用的URL地址,有些是以 '~/' 开头的,使用这个标签可以转换成正常可以访问的地址:

<img src="{% url item.Picture %}" />

Cookie

CookieTag可以获取Cookie的值:

{% cookie 'Message' %}

Query

QueryTag可以获取Url中的QueryString的值:

{% query 'id' %}

Markdown

MarkdownBlock标签,可以把Markdown内容转成HTML在页面显示:

{% markdown %}{{item.CommentContent}}{% endmarkdown %}

Header

HeaderBlock可以把标签内的HTML内容放入到html>head中:

{% header %}
<meta name="viewport" content="width=device-width" />
<link href="/Plugins/ZKEACMS.Shop/Content/shop.min.css" rel="stylesheet" />
{% endheader %}

Footer

FooterBlock可以把标签内的HTML内容放到</body>结束前:

{% footer %}
<script src="/lib/CryptoJS/components/enc-base64-min.js" type="text/javascript"></script>
<script src="/lib/slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
{% endfooter %}

过滤器

模板中,使用过滤器来处理处理,像日期的格式化,大小写转换等,下面是可用的过滤器:

示例:分页模板

分页的对象在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扩展插件来写模板: