1. 第一个模板
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '01.art');
const html = template(绝对路径, {
name: '张三',
age: 20,
content: '<h1>我是标题</h1>'
})
console.log(html);
2 模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 标准语法 -->
<p>{{ name }}</p>
<p>{{ 1 + 1 }}</p>
<p>{{ 1 + 1 == 2 ? '相等' : '不相等' }}</p>
<p>{{ content }}</p>
// 加@可以读取html语法
<p>{{@ content }}</p>
<!-- 原始语法 -->
<p><%= name %></p>
<p><%= 1 + 2%></p>
<p><%= 1 + 1 == 2 ? '相等' : '不相等' %></p>
<p><%= content%></p>
// 加- 可以读取html5语法
<p><%- content%></p>
</body>
</html>
3. 输出结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 标准语法 -->
<p>张三</p>
<p>2</p>
<p>相等</p>
<p><h1>我是标题</h1></p>
<p><h1>我是标题</h1></p>
<!-- 原始语法 -->
<p>张三</p>
<p>3</p>
<p>相等</p>
<p><h1>我是标题</h1></p>
<p><h1>我是标题</h1></p>
</body>
</html>
if 判断语法模板
{{if age > 18}}
年龄大于18
{{else if age < 15 }}
年龄小于15
{{else}}
年龄不符合要求
{{/if}}
<% if (age > 18) { %>
年龄大于18
<% } else if (age < 15) { %>
年龄小于15
<% } else { %>
年龄不符合要求
<% } %>
遍历数组数据
const html = template(views, {
users: [{
name: '张三',
age: 20,
sex: '男'
},{
name: '李四',
age: 30,
sex: '男'
},{
name: '玛丽',
age: 15,
sex: '女'
}]
});
模板
<ul>
{{each users}}
<li>
{{$value.name}}
{{$value.age}}
{{$value.sex}}
</li>
{{/each}}
</ul>
<ul>
<% for (var i = 0; i < users.length; i++) { %>
<li>
<%=users[i].name %>
<%=users[i].age %>
<%=users[i].sex %>
</li>
<% } %>
</ul>
子模板公共样式
{{include 路径}}
{{ include ‘./common/header.art’ }}
<% include(’./common/header.art’) %>
{{ msg }}
{{ include './common/footer.art' }} <% include('./common/footer.art') %>
继承模板
父模板留有空间让子模板添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
{{block 'link'}} {{/block}}
</head>
<body>
{{block 'content'}} {{/block}}
</body>
</html>
子模板先继承在添加新的内容
{{extend ‘./common/layout.art’}}
{{block 'content'}}
<p>{{ msg }}</p>
{{/block}}
{{block 'link'}}
<link rel="stylesheet" type="text/css" href="./main.css">
{{/block}}
设置模板的根目录
template.defaults.root = path.join(__dirname, ‘views’);
导入模板变量
template.defaults.imports.dateFormat = dateFormat;
配置模板的默认后缀 则调用时后缀名可以不写
template.defaults.extname = ‘.art’;
const html = template(‘06.art’, {
time: new Date()
});
模板
{{ dateFormat(time, ‘yyyy-mm-dd’)}}