概述
模板引擎为第三方模块,功能主要是让开发者以更加友好的方式拼接字符串,使项目代码更加清晰、更加易于维护。
使用步骤
-
在命令行工具中使用 npm install art-template 命令进行下载
-
使用const template = require**(‘art-template’)**引入模板引擎
-
告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据);
-
使用模板语法告诉模板引擎,模板与数据应该如何进行拼接
// 引入模板
const template = require('art-template')
const path = require('path')
// 拼接地址 __dirname:本文件的绝对路径
const viewsIndex = path.join(__dirname, 'views', 'index.art')
// 拼接字符串
// 参数:1.模板路径 模板是.art文件
// 2.模板中显示的数据 对象类型
// 返回拼接好的字符串
const index = template(viewsIndex, {
name: '张三',
age:20
})
console.log(index)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
{{ name }}
{{ age }}
</body>
</html>
结果:
模板语法
- art-template同时支持两种模板语法:标准语法和原始语法
- 标准语法可以让模板更容易读写,原始语法具有强大的逻辑处理能力(后面可看出)
标准语法:{{ 数据 }}
原始语法:<%=数据%>
<body>
<!--标准语法-->
{{ name }}
{{ age }}
<!--原始语法-->
<%= name %>
<%= age %>
</body>
将数据输出到模板中时,数据可以预先处理再输出,如三元运算符、+、-、*等
<!-- 标准语法 -->
<h2>{{ 1 == 2 ? "相等" : "不相等" }}</h2>
<h2>{{ 1 + 1 }}</h2>
<!-- 原始语法 -->
<h2><%= 1 == 2 ?'相等' : '不相等' %></h2>
<h2><%= 1 + 1 %></h2>
结果:
原文输出
当要输出的数据中包含了HTML标签时,模板引擎默认不会解析标签,会将其转换后输出
例如:
// 引入模板
const template = require('art-template')
const path = require('path')
// 拼接地址 __dirname:本文件的绝对路径
const views = path.join(__dirname, 'views', '01.art')
// 拼接字符串
// 参数:1.模板路径
// 2.模板中显示的数据 对象类型
// 返回拼接好的字符串
const result = template(views, {
title: '<h1>这是标题</h1>'
})
console.log(result)
{{ title }}
<%=title %>
结果:
那如何解析标签输出?
art-template提供了标签解析输出的方式——原文输出
语法:
标准语法:
{{@ value }}
原始语法:
<%- value %>
条件判断
标准语法:
{{if 条件}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}
原始语法:
<% if (value) { %> ... <% } %>
<% if(v1) { %> ... <% }else if (v2) { %> ... <% } %>
{{if age>18}}
年龄大于18
{{else if age<15}}
年龄小于15
{{else}}
年龄不符合
{{/if}}
<% if (age>18){%>
年龄大于18
<% } else if (age<15) {%>
年龄小于15
<% } else {%>
年龄不符合
<%}%>
// 引入模板
const template = require('art-template')
const path = require('path')
// 拼接地址 __dirname:本文件的绝对路径
const views = path.join(__dirname, 'views', '02.art')
// 拼接字符串
// 参数:1.模板路径
// 2.模板中显示的数据 对象类型
// 返回拼接好的字符串
const result = template(views, {
age: 19
})
console.log(result) //年龄大于18
- 通过以上代码可以发现原始语法更接近js语法
if (age > 18) {
console.log(年龄大于18)
} else if (age < 15) {
console.log(年龄小于15)
} else {
console.log(年龄不符合)
}
循环
标准语法:
{{each target}}
{{$index}} {{$value}}
{{/each}}
target:要循环的数据
index:索引或属性名
value:值
原始语法:
<% for(var i = 0; i < target.length; i++){ %>
<%= i %> <%= target[i] %>
<% } %>
target:要循环的数据
{{each bookName}}
{{ $index }} : {{ $value }}
{{ /each }}
<% for(var i = 0; i<(bookName.length);i++){%>
<%=i%> : <%=bookName[i]%>
<%}%>
结果:
- target支持可迭代的array和object,其默认值为$data。
-
v
a
l
u
e
并
value并
value并index可以自定义:{{each target val key}}。
数据为对象类型时:
const result = template(views, {
date: {
book1: {
name: 'html',
price:30
},
book2: {
name: 'css',
price:20
},
book3: {
name: 'javascript',
price:50
}
}
})
console.log(result)
{{each date book key}}{{ key }} {{ book.name }} : {{ book.price }} {{ /each }}
子模版
- 对于页面公共部分(头部、底部等)可抽离出来,方便代码的维护,通过子模板引入各个页面中。
语法:
- 标准语法:{{include ‘模板’}}
- 原始语法:<%include(‘模板’) %>
结果:
模板继承
-
使用模板继承可以将网站HTML骨架抽离到单独的文件中,其他页面模板可以继承骨架文件
语法:
{{extend ‘./layout.art’}}{{block ‘head’}} …{{/block}}
{{block ‘content’}}…{{/block}}
模板骨架 layout.art
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模板骨架</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}}
// 引入模板
const template = require('art-template')
const path = require('path')
// 拼接地址 __dirname:本文件的绝对路径
const views = path.join(__dirname, 'views', '05.art')
// 拼接字符串
// 参数:1.模板路径
// 2.模板中显示的数据 对象类型
// 返回拼接好的字符串
const result = template(views, {
msg: '这是主体内容'
})
console.log(result)
结果:
模板配置
-
向模板中导入变量 template.defaults.imports.变量名 = 变量值;
运用场景:当要使用第三方的方法
-
设置模板根目录 template.defaults.root = 模板目录
当要渲染多个模板,且有共同目录时,可使用根目录。减少代码冗余 -
设置模板默认后缀 template.defaults.extname = ‘.art’
// 引入模板
const template = require('art-template')
const path = require('path')
const dateFormat = require('dateformat');
// 导入变量 时间处理函数
template.defaults.imports.dateFormat = dateFormat
// 设置模板根目录
template.defaults.root = path.join(__dirname, 'views')
// 设置模板默认后缀
template.defaults.extname = '.html'
const result = template('06.art', {
time: new Date()
})
console.log(result)
console.log(template('07',{}))
{{ time }}
{{ dateFormat(time, "yyyy-mm-dd") }}
结果: