art-template----介绍、安装、语法、模板继承、压缩页面、选项、在express中使用
文章目录
-
- 1 介绍：
-
- 1.2 核心方法：
- 2 安装
-
- 2.1 安装方法:
- 3.语法
-
- 3.1 输出
- 3.2 原文输出
- 3.3 条件输出
- 3.4 循环输出
- 3.5 定义变量
- 4. 模板继承
- 5.压缩页面
-
- 开启
- 6.选项
- 7.在express中使用
-
- 7.1、安装
- 7.2、 配置
- 7.3、 使用
- 7.4、 修改默认的 views 视图渲染存储目录。
1 介绍：
art-template 是一个简约、超快的模板引擎。
它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。
1.1 模板语法：
art-template 同时支持两种模板语法。标准语法可以让模板更容易读写；原始语法具有强大的逻辑处理能力。
标准语法
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
原始语法
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>
1.2 核心方法：
// 基于模板名渲染模板
template(filename, data);
// 将模板源代码编译成函数
template.compile(source, options);
// 将模板源代码编译成函数并立即执行
template.render(source, data, options);
2 安装
2.1 安装方法:
- 通过npm安装:
npm install art-template --save - 下载安装
3.语法
art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。
标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。
3.1 输出
标准语法
{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}
原始语法
<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>
3.2 原文输出
标准语法
{{@ value}}
原始语法
<%- value %>
3.3 条件输出
标准语法
<!-- 单 if 判断 -->
{{if value}}
...
{{/if}}
<!-- if ... else ... 判断 -->
{{if v1}}
...
{{else if v2}}
...
{{/if}}
原始语法
<!-- 单 if 判断 -->
<% if (value) { %>
...
<% } %>
<!-- if ... else ... 判断 -->
<% if (v1) { %>
...
<% else if (v2) { %>
...
<% } %>
3.4 循环输出
标准语法
{{each target}}
{{$index}} {{$value}}
{{/each}}
target是一个数组，each用于对数组遍历，$index 是数组的下标， $value是数组的值
原始语法
<% for (var i = 0; i < target.length; i++) { %>
<%= i %> <%= target[i] %>
<% } %>
注意:
target 支持 array 与object 的迭代，其默认值为 $data。
3.5 定义变量
标准语法
{{set temp = data.sub.content}}
原始语法
<% var temp = data.sub.content %>
4. 模板继承
标准语法
{{extend './layout.html'}}
{{block 'head'}}...{{/block}}
原始语法
<% extend ('./layout.html') %>
<% block('head', function () { %>...<% }) %>
模板继承允许你构建一个包含站点共同元素的基本“模板骨架”,实例：
<!--layout.art-->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{block 'title'}}My Site{{/block}}</title>
{{block 'head'}}
<link rel="stylesheet" href="main.css">
{{/block}}
</head>
<body>
{{block 'content'}}{{/block}}
</body>
</html>
<!--index.art-->
{{extend './layout.art'}}
{{block 'title'}}{{title}}{{/block}}
{{block 'head'}}
<link rel="stylesheet" href="custom.css">
{{/block}}
{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}
渲染 index.art 后，将自动应用布局骨架。
3.7 子模板
标准语法
{{include './header.art'}}
{{include './header.art' data}}
原始语法
<% include('./header.art') %>
<% include('./header.art', data) %>
5.压缩页面
template.defaults.minimize
art-template 内建的压缩器可以压缩 HTML、JS、CSS，它在编译阶段运行，因此完全不影响渲染速度，并且能够加快网络传输。
开启
template.defaults.minimize=true
6.选项
tempalte.defaults
// 模板名
filename: null,
// 模板语法规则列表
rules: [nativeRule, artRule],
// 是否开启对模板输出语句自动编码功能。为 false 则关闭编码输出功能
// escape 可以防范 XSS 攻击
escape: true,
// 启动模板引擎调试模式。如果为 true: {cache:false, minimize:false, compileDebug:true}
debug: detectNode ? process.env.NODE_ENV !== 'production' : false,
// bail 如果为 true，编译错误与运行时错误都会抛出异常
bail: true,
// 是否开启缓存
cache: true,
// 是否开启压缩。它会运行 htmlMinifier，将页面 HTML、CSS、CSS 进行压缩输出
// 如果模板包含没有闭合的 HTML 标签，请不要打开 minimize，否则可能被 htmlMinifier 修复或过滤
minimize: true,
// 是否编译调试版
compileDebug: false,
// 模板路径转换器
resolveFilename: resolveFilename,
// 子模板编译适配器
include: include,
// HTML 压缩器。仅在 NodeJS 环境下有效
htmlMinifier: htmlMinifier,
// HTML 压缩器配置。参见 https://github.com/kangax/html-minifier
htmlMinifierOptions: {
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
// 运行时自动合并：rules.map(rule => rule.test)
ignoreCustomFragments: []
},
// 错误事件。仅在 bail 为 false 时生效
onerror: onerror,
// 模板文件加载器
loader: loader,
// 缓存中心适配器（依赖 filename 字段）
caches: caches,
// 模板根目录。如果 filename 字段不是本地路径，则在 root 查找模板
root: '/',
// 默认后缀名。如果没有后缀名，则会自动添加 extname
extname: '.art',
// 忽略的变量。被模板编译器忽略的模板变量列表
ignore: [],
// 导入的模板变量
imports: runtime
7.在express中使用
7.1、安装
npm install --save art-template
npm install --save express-art-template
7.2、 配置
app.engine('art',require('express-art-template'))
7.3、 使用
app.get('/', function (req, res)) {
// express 默认会去项目中的 views 目录找 index.js
res.render('index.html', {
title: 'hello world'
})
}
7.4、 修改默认的 views 视图渲染存储目录。
// 第一个参数 views 不能写错
app.set('views', 目录路径)