art-template模板

2020-01-03  本文已影响0人  zhchhhemmm

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

一个坑:
静态资源的路径应该写成绝对路径,因为它是由浏览器解析的,而模板模块的路径可以写成相对路径,因为它是由模板引擎来解析的.

上一篇下一篇

猜你喜欢

热点阅读