自定义模板
聚米智能建站系统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/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>