art-template

简介

art-template是一个简约，快速的模板引擎，可以运行在浏览器端和Node.js环境中。art-template灵活性高，支持包括逻辑语句、条件判断、循环等常用的模板语法。中文官网首页为http://aui.github.io/art-template/zh-cn/index.html

安装

打开命令行终端，进入你的项目所在的目录

npm install art-template --save

安装完成后，可以在项目的代码中使用类似 require 或 import 的方式引入 art-template 模块

const template = require('art-template');

基本使用

告诉模板引擎要拼接的数据和模板在哪

变量

$data 传入模板的数据
$imports 外部导入的变量以及全局变量
print 字符串输出函数
include 子模板载入函数
extend 模板继承模板导入函数
block 模板块声明函数

const html = template(‘模板路径’, 数据);

使用模板语法告诉模板引擎，模板与数据应该如何进行拼接

/ 导入模板引擎模块
const template = require('art-template');
// 将特定模板与特定数据进行拼接
						//模板路径    导入的数据
const html = template('./views/index.html',{
data: {
name: '111',
age: 22
}
});

//index.html 里的数据渲染
<div>
<span>{{data.name}}</span>
<span>{{data.age}}</span>
</div>

语法

标准语法：{{ 数据 }}
原始语法：<%=数据 %>
不会直接输出，如果数据中含有标签，它不会解析标签，会将其转义后输出
而{{@ 数据 }}和<%-数据 %>，如果数据中含有标签，它不会解析标签，会将其转义后输出

条件判断

//标准语法 
{{if 条件}} ... {{/if}}
{{if a1}} ... {{else if a2}} ... {{/if}}
// 原始语法
<% if (value) { %> ... <% } %>
<% if (a1) { %> ... <% } else if (a2) { %> ... <% } %>

进行语法使用时，记得有开就有闭，其他跟正常的if流程差不多

循环

{{each 变量名}}…{{/each}}

//标准语法 
{{each target}}

//index（内置对象） 序号 从0开始
{{$index}}

//value(内置对象)  值
{{$value}}

{{/each}}
//原始语法
<% for(var i = 0; i < item.length; i++){ %>

//i 序号 从0开始
<%= i %> 

// 值
 <%= item[i] %>
 
<% } %>

each 后面跟的是遍历的数据的变量名，需要跟传入进来的值的名一致

继承

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

// 标准语法
{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}

/// 原始语法
<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>

过滤器

注册

template.defaults.imports.dateFormat = function(date, format){/*[code..]*/};

template.defaults.imports.timestamp = function(value){return value * 1000};

//标准语法
{{date | timestamp | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

//原始语法
<%= $imports.dateFormat($imports.timestamp(date), 'yyyy-MM-dd hh:mm:ss') %>

express-art-template

为了使art-template模板引擎能够更好的和Express框架配合，模板引擎官方在原art-template模板引擎的基础上封装了express-art-template

npm install art-template express-art-template

在一个项目中可以使用多个模板引擎

express的engine()方法

当渲染后缀为art的模板时使用express-art-template，第一个参数是模板的后缀，第二个参数是使用的什么模板

express的set()方法

1.设置模板存放目录，第一个参数是设置存放模板目录的文件夹， 第二个参数是存放模板的绝对路径
2.设置默认的模板后缀，设置模板时，如果没有写模板后缀就使用当前设置的模板后缀， 第一个参数是 默认模板的配置项，第二个参数是后缀的名字

express的render()方法

渲染模板（在该方法的内部会自动拼接后缀、模板与数据的拼接、把结果相应给客户端）

app.engine('art',require('express-art-template'))
app.set('view engine','art');
// 创建一个路由
app.get('/',(req,res) => {
    res.render('index',{
        //    模板要展示的数据
        msg: 'message'
    })
})