art-template同时支持两种模板语法：标准语法 和 原始语法
标准语法： {{ 数据 }}
原始语法： <%= 数据 %>
原文输出
指的是如果我们传递一个标签，我们不希望他直接把标签输出，而是要输出一个解析后的
eg：
content = '<h1>haha</h1>'
此时{{ content }}会输出这个字符串，而不是解析成一个html，
那么我们可以通过 {{ @content }}来输出 或是<%- content %>
条件判断
{{if 条件}}
。。。
{{/if}}
或者是
{{if v1}}
...
{{else if v2}}
...
{{/if}}
另一种写法太绕了，还是不用吧。
循环
标准语法：
{{ each 数据}}
...
{{/each}}
原生语法：
<% for(){ %>
...
<% } %>
使用区别如下：
image.png
//标准语法
{{each target}}
{{ $index }} {{ $value }}
// $index代表本次循环的索引，$value代表本次循环的数据
{{/each}}
//原生语法
<% for(var i=0;i<target.length;i++){ %>
<%= i %> <%= target[i] %>
<% } %>
子模板
使用子模板可以把网页的公共部分（如header.footer等）抽取到单独的文件中去
标准语法：
{{include '模板'}}
原始语法：
<% include('模板') %>
‘模板’指的是模板的路径
模板继承
html的骨架是没有办法抽离到子模板当中的，如：<html><body>但是我们希望可以把它单独提取出来，以便日后修改维护
使用模板继承可以将网站HTML骨架 抽离到单独的文件中，其他页面模板可以继承骨架文件
其关系如图所示：
image.png
在骨架文件中是可以挖坑的，各个文件继承它时用以填充自己独有的内容
image.png
如图所以，我们用block为此骨架预留了位置，命名为head
{{block 'head'}}{{/block}}
继承骨架：
{{ extend '骨架模板'}}
填充：
{{block 'head'}} <link rel="stylesheet" href = "custom.css"> {{/block}}
模板配置
1 向模板中导入配置变量
template.defaults.imports.变量名 = 变量值 (写在JS里面)
tip：一个好用的日期处理模块：dateformat
2 设置模板根目录
template.defaults.root = path.join(__dirname,'views');
3 设置默认的模板后缀
template.defaults.extname = '.art';
基本流程：
image.png
一个坑:
静态资源的路径应该写成绝对路径,因为它是由浏览器解析的,而模板模块的路径可以写成相对路径,因为它是由模板引擎来解析的.
网友评论