art-template模板引擎
art-template模板引擎
- 一、模板引擎的基础概念（art-templatem）
- 二、模板语法
- 三、判断条件
- 四、数据循环
- 五、模板继承
- 五、子模板
- 六、模板配置
一、模板引擎的基础概念（art-templatem）
- 在命令行根据使用npm install art-template 命令进行下载
- 使用const template = require(‘art-template’)引入模板引擎
- 告诉模板引擎拼接的数据和模板路径 const html = template(‘模板路径’, 数据)
- 使用模板语法搞事模板引擎，模板与数据应该如何进行拼接
二、模板语法
- art-template同时支持两种模板语法：标准语法和原始语法
- 标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力
标准语法：{ { 数据 }}
原始语法：<%= 数据%>
01.js
// 导入模板引擎
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '01.art');
// template方法是用来拼接字符串的
// 1. 模板路径 绝对路径
// 2. 要在模板中显示的数据 对象类型
// 返回拼接好的字符串
const html = template(views, {
name: '张三',
age: 18,
content: '我是标题
'
});
console.log(html);
01.art
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
// 标准语法
<p>{
{
name }}</p>
<p>{
{
1 + 1 }}</p>
<p>{
{
1 + 1 ==2? '相等' : '不相等' }}</p>
<p>{
{
content }}</p>
<p>{
{
@ content }}</p>
// 原始语法
<p><%= name %></p>
<p><%= 1 + 1 %></p>
<p><%= 1 + 1 == 2? '相等' : '不相等' %></p>
<p><%= content %></p>
<p><%- content %></p>
</body>
</html>
三、判断条件
标准语法
{ {if 条件}}. . . { {/if}}
{ {if v1}}. . . { {else if v2}}. . . { {/if}}
原始语法
<%if (value) {%>. . .<% } %>
<%if v1{%>. . .<% }else if (v2) {%>. . .<%} %>
02.js
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '02.art');
const html = template(views, {
name: '张三',
age: 13
});
console.log(html);
02.art
// 标准语法
{
{
if age > 18 }}
年龄大于18
{
{
else if age < 15}}
年龄小于15
{
{
else}}
年龄不符合规则
{
{
/if}}
// 原始语法
<% if (age > 18){
%>
年龄大于18
<%} else if (age < 15){
%>
年龄小于15
<%}else {
%>
年龄不符合规则
<%} %>
四、数据循环
原始语法
{ {each target}}
{ {$ index}}…{ {$ value}}
{ {/each}}
原始语法
<%for( var i = 0; i < target.length; i++) {%>
<%= i%><%= target[i] %>
<%}%>
03.js
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '03.art');
const html = template(views, {
users: [{
name: '张三',
age: 18,
sex: '男'
},{
name: '李四',
age: 15,
sex: '男'
},{
name: '小花',
age: 18,
sex: '女'
}]
});
console.log(html);
03.art
// 标准语法
<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(‘模板路径’)%>
04.js
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '04.art');
const html = template(views, {
msg: '我是内容'
});
console.log(html);
04.art
// 标准语法
{
{
include './common/header.art' }}
// 原始语法
<% include ('./common/header.art')%>
<div>{
{
msg }}</div>
{
{
include './common/footer.art'}}
<% include ('./common/footer.art')%>
header.art
我是头部
footer.art
我是底部
五、子模板
05.js
const template = require('art-template');
const path = require('path');
const views = path.join(__dirname, 'views', '05.art');
const html = template(views, {
msg: '我是内容'
});
console.log(html);
layout.art
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
// 挖坑
{
{
block 'link'}}{
{
/block}}
<body>
// 挖坑
{
{
block 'content'}}{
{
/block}}
</body>
</head>
05.art
// 继承
{
{
extend './common/layout.art'}}
// 填充
{
{
block 'link'}}
<link rel="stylesheat" type="text/css" href="./mai.css">
{
{
/block}}
{
{
block 'content'}}
<p>{
{
msg}}</p>
{
{
/block}}
六、模板配置
- 首先下载模板变量npm install dateFormat(上npm官网查找dateFormat具体使用方法）
- 向模板中导入变量 template.defaults.imports.变量名= 变量名;
- 设置模板根目录 template.defaults.root = 模板目录;
- 配置模板的默认后缀 template.defaults.extname = ‘.art’;
06.js
const template = require('art-template');
const path = require('path');
const dateFormat = require('dateformat');
const views = path.join(__dirname, 'views', '06.art');
// 设置模板的根目录
template.defaults.root = path.join(__dirname, 'views');
// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;
// 配置模板的默认后缀
template.defaults.extname = '.html';
const html = template('06.art', {
time: Date()
});
const qhtml = template('07', {
})
console.log(qhtml);
console.log(html);
06.art
{
{
dateFormat(time, 'yyyy-mm-dd') }}
07.html
我是07.html模板