模板语法基础入门

模板语法基础入门

ZKEASOFT April 17, 2018


自定义模板

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 PathWithQuery { get; set; }
        public string AbsoluteUrl { get; set; }
        public string RequestPath { get; set; }
        public bool IsAuthenticated { get; set; }
        public IUser CurrentCustomer { get; set; }
        public Culture CurrentCulture { get; set; }
        public Culture DefaultCulture { get; set; }
        public CultureSetting CultureSetting { get; set; }
        public IList<Culture> ActiveCultures { get; set; }
        public CurrencyOption Currency { 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里面使用breakcontinue

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

取for循环的index:

{% for i in (0..9) %}
    {{forloop.index}}
{% endfor %}

输出:

1 2 3 4 5 6 7 8 9 10

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

输出HTML

为了安全,模板在输出的时候默认会使用HTML进行编码,不渲染HTML内容。如果要输出HTML可以使用raw过虑器:

{{this.Model.HTML | raw}}

特殊标签

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

如果有开启多语言,'~/'会自动转换成有当前语言的URL:

<a href="{% url '~/shop/detail/post-' %}{{item.ID}}.html">{{item.Title}}</a>

Cookie

CookieTag可以获取Cookie的值:

{% cookie 'Message' %}

Query

使用Query,可以将对应的内容引入到模板中显示。例如可以在文章模板中引入产品,视频等。查看详情

{% query %}
    select mms from products where  id=1 or title like "% FPS %" and createdate >= "2017-11-17 15:30:20" order by createdate desc
{% endquery %}

{% for item in prods %}
<h3>
    {{ item.Title }}
</h3>
{% endfor %}

QueryString

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

{% querystring '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.Model.PublishedDate | date: "%Y-%m-%d %H:%M" }}

下面是纸壳CMS模板中可用的过滤器:

说明 过滤器
取绝对值 abs
追加,连接字符串 append
限制数字的最小值 at_least
限制数字的最大值 at_most
首字母大写 capitalize
输入数舍入到最接近的整数 ceil
移除数组中的空值 compact
串联 (连接在一起) 多个数组 concat
格式化显示日期类型 date
当所选值是空或者是false时返回一个默认值 default
将大写字母转成小写字母 downcase
转义字符串,从而使该字符串可以在URL中使用 escape
转义字符串,从而使该字符串可以在URL中使用,已被转义的字符不会被再次转义 escape_once
返回数组的第一项 first
将数字向下舍入到最接近的整数 floor
使用参数作为分隔符将数组中的项组合为单个字符串 join
返回数组中的最后一项值 last
从字符串的开头删除所有空格(制表符,空格和换行符) lstrip
将换行符号替换为HTML的br newline_to_br
通过从另一个对象中提取命名属性的值来创建值数组 map
将指定的字符串添加到另一个字符串的开头 prepend
从字符串中删除指定子字符串的每个匹配项 remove
仅从字符串中删除指定子字符串的第一个匹配项 remove_first
替换字符串中的所有匹配项 replace
替换字符串中的第一个匹配项 replace_first
反转数组中项目的顺序 reverse
将输入数字舍入为最接近的整数 round
从字符串的右侧删除所有空格(制表符,空格和换行符) rstrip
返回字符串或者数组长度 size
切割字符串 slice
对数组中的项进行排序(区分大小写) sort
对数组中的项进行排序 sort_natural
将输入字符串分成数组 split
删除所有左侧和右侧空格(制表符,空格和换行符) strip
清除字符串中的HTML标签 strip_html
清除换行符 strip_newlines
裁剪字符串,并将超出部分用省略号代替 truncate
以单词的形式裁剪字符串,并将超出部分用省略号代替 truncatewords
删除数组中的任何重复元素 uniq
转为大写 upcase
解码已编码为URL的字符串 url_decode
将字符串中任何不安全的URL字符转换为百分比编码字符 url_encode

四则运算

运算符 示例
加法 + {{ 4 | plus: 2 }}  输出: 6
减法 - {{ 16 | minus: 4 }} 输出:12
乘法 * {{ 3 | times: 2 }} 输出:6
除法 / {{ 16 | divided_by: 4 }} 输出:4
取余 % {{ 3 | modulo: 2 }} 输出:1

示例:分页模板

分页的对象在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 %}
    {% assign more = this.Pagin.AllPage | minus: this.Pagin.PageIndex %}
    {% if more > 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扩展插件来写模板:


微信公众号