1. 模板语法
-
art-template同时支持两种模板语法：标准语法和原始语法。
-
标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力。
-
标准语法： {{ 数据 }}
-
原始语法：<%=数据 %>
2. 输出
将某项数据输出在模板中，标准语法和原始语法如下：
- 标准语法：{{ 数据 }}
- 原始语法：<%=数据 %>
<!-- 标准语法 -->
<h2>{{value}}</h2>
<h2>{{a ? b : c}}</h2>
<h2>{{a + b}}</h2>
<!-- 原始语法 -->
<h2><%= value %></h2>
<h2><%= a ? b : c %></h2>
<h2><%= a + b %></h2>
3. 原文输出
如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出。
- 标准语法：{{@ 数据 }}
- 原始语法：<%-数据 %>
<!-- 标准语法 -->
<h2>{{@ value }}</h2>
<!-- 原始语法 -->
<h2><%- value %></h2>
4. 条件判断
<!-- 标准语法 -->
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
<!-- 原始语法 -->
<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>
5. 循环
- 标准语法：{{each 数据}} {{/each}}
- 原始语法：<% for() { %> <% } %>
<!-- 标准语法 -->
{{each target}}
{{$index}} {{$value}}
{{/each}}
<!-- 原始语法 -->
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
6. 子模版
使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
- 标准语法：{{include '模板'}}
- 原始语法：<%include('模板') %>
<!-- 标准语法 -->
{{include './header.art'}}
<!-- 原始语法 -->
<% include('./header.art') %>
7. 模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。
8. 模板继承示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML骨架模板</title>
{{block 'head'}}{{/block}}
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>
<!--index.art 首页模板-->
{{extend './layout.art'}}
{{block 'head'}} <link rel="stylesheet" href="custom.css">{{/block}}
{{block 'content'}} <p>This is just an awesome page.</p> {{/block}}
9. 模板配置
- 向模板中导入变量 template.defaults.imports.变量名 = 变量值;
- 设置模板根目录 template.defaults.root = 模板目录
- 设置模板默认后缀 template.defaults.extname = '.art'
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！