1.模板引擎的基础概念

1.1 模板引擎

模板引擎是第三方模块,
让开发者以更加友好的方式拼接字符串,使项目更加清晰、更加易于维护

//未使用模板引擎的写法
var ary = [{name: 'zhangsan',age: 20}];
var str = '<ul>';
for(var i = 0;i < ary.length;i++){
    str += '<li>\
        <span>' + ary[i].name + '</span>\
        <span>' + ary[i].age + '</span>\
        </li>';
}
str += '</ul>';

//使用模板引擎
<ul>
    {{each ary}}
        <li>{{$value.name}}</li>
        <li>{{$value.age}}</li>
    {{each}}
</ul>

1.2 art-template模板引擎

  • 使用npm install art-templet下载
  • 使用const template = require('art-template')引入模板引擎
  • 告诉模板引擎要拼接的数据和模板在哪 const html = template('模板路径',数据)

2.模板引擎语法

2.1 模板语法

  • art-template同时支持两种模板语法:标准语法和原始语法
  • 标准语法可以让模板更容易读写,原始语法具有强大的逻辑处理能力
    标准语法:{{数据}}

原始语法:<%=数据 %>

2.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>

2.3 条件判断

在模板中可以根据条件来决定显示那块HTML代码

<!--标准语法-->
{{if 条件}}...{{/if}}
{{if vl}}...{{else if}}...{{/if}}
<!--原始语法-->
<% if(value) { %>...<% } %>
<% if(va1) { %>...<% } else if(va2) { %>...<% } %>

2.4 循环

<!--标准语法-->
{{each 数据}}{{/each}}

<!--原始语法-->
<% for() {%> <%} %>

2.5 子模版

使用子模版可以将网站公共区域(头部、底部)抽离到单独的文件中。

  • 标准语法:{{include '模板'}
  • 原始语法:<%include('模板')%>

2.6 模板继承

使用模板继承可以将网站HTML骨架抽离到单独的文件中,其他页面模板可以继承骨架文件
03.art继承layout.art

layout.art

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    {{block 'link'}}{{/block}}
</head>
<body>
    {{block 'content'}}{{/block}}
</body>
</html>

03.art

{{extend './layout.art'}}

{{block 'content'}}
    <p>{{ msg }}</p>
{{/block}}

{{block 'link'}} <link rel="stylesheet" href="./main.css"> {{/block}}

2.7 模板配置

1.向模板中导入变量 template.defaults.imports.变量名 = 变量名
2.设置模板根目录 template.defaults.root = 模板目录
3.设置模板默认后缀 template.defaults.extname = '.art'

Last modification:April 10th, 2020 at 01:32 am
如果觉得我的文章对你有用,请随意赞赏