art-template模板
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
一个坑:
静态资源的路径应该写成绝对路径,因为它是由浏览器解析的,而模板模块的路径可以写成相对路径,因为它是由模板引擎来解析的.