Node.js的模板引擎（art-template）

最新推荐文章于 2021-11-26 16:39:18 发布

疯子****

最新推荐文章于 2021-11-26 16:39:18 发布

阅读量420

点赞数

本文链接：https://blog.csdn.net/fengzitaba/article/details/100659448

版权

下载

npm install art-template

//导入模板引擎,返回的是一个方法
const template = require('art-template');
//返回的是拼接好的字符串
const html = template('模板路径'，插入模板中的数据（对象类型）);

模板语法

标准语法：{{数据}}

<span>{{name}}</span>
<span>{{1+1}}</span>
<span>{{ a > b ? a : b}}</span>


//模板引擎中默认是不会解析HTML标签，如果要按照原文的标签输出必须要按照下面的语法
<span>{{ @ <h1>原文输出</h1>}}</span>


//条件判断
{{if 条件}}  ...	{{/if}}
{{if v1}}		...		{{else if v2}}		...		{{/if}}



//循环
{{each 数据}} 
	{{ $index }}	{{ $value }}
 {{/each}}
 
{{each students(对象数组)}}
			<tr>
				<td>{{$value.name}}</td>
				<td>{{$value.age}}</td>
				<td>{{$value.sex == '1'? '女' : '男'}}</tdh>
				<td>{{$value.email}}</td>
				<td>
					{{each $value.hobbies}}
						<span>{{$value}}</span>
					{{/each}}
				</td>
				<td>{{$value.college}}</td>
				<td>{{dateformat($value.enrollmentDate,'yyyy-mm-dd')}}</td>
			</tr>
		{{/each}}


//子模板：可以将网站公共代码块（头部、底部）抽离到单独的文件中
{{include  '模板'}}


{{include './common/header.art'}}
<% include('./common/header.art') %>
<div> {{ msg }} </div>
{{include './common/footer.art'}}
<% include('./common/footer.art') %>

原始语法:<% 数据 %>

<span><%= name %></span>
<span><%= 1+1 %></span>
<span><%= a > b ? a : b %></span>


//模板引擎中默认是不会解析HTML标签，如果要按照原文的标签输出必须要按照下面的语法
<span><%-  <h1>原文输出</h1> %></span>


//条件判断
<% if (v1) { %>	...		<%}%>
<% if (v1) { %>	...		<% } else if (v2) { %>	...		<% }%>
 

//循环
<% for (var i = 0; i < target.length; i++) {%>	
		<%=  i  %><%=  target[i]  %>
<% } %>

//子模板：可以将网站公共代码块（头部、底部）抽离到单独的文件中
<%  include('模板')  %>

模板继承

/* 被继承的模板文件 */
 <!doctype html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>HTML骨架模板</title>
         <!-- 预留位置，打上标记为 head-->
         {{block 'head'}}{{/block}}
     </head>
     <body>
         <!-- 预留位置，打上标记为 content-->
         {{block 'content'}}{{/block}}
     </body>
 </html>

/* 继承的模板文件 */
<!--extend 进行继承， 后面跟需要继承的文件路径-->
 {{extend './layout.art'}}
 {{block 'head'}} <link rel="stylesheet" href="custom.css"> {{/block}}
 {{block 'content'}} <p>{{name}}</p> {{/block}}

//引入art-template模块
const template = require('art-template');
const path = require('path');
//拼接路径
const views = path.join(__dirname, 'views', '05.art');
//获取最终字符串
const html = template(views, {
    name: '张三'
});
console.log(html);

模板配置变量

template.defaults.imports.自定义变量名 = 第三方模板对象;

设置模板根目录（★★★）

有的时候我们引入模板会比较多，如果一个一个去进行引入比较麻烦，所以我们可以通过引入模板根目录的形式去进入，这样当我们引入模板文件的时候，它会根据我们传递的名字自动匹配
template.defaults.root = path.join(__dirname, 模板文件夹名称);

设置模板默认后缀（★★）

可以去设置默认的后缀名，这样我们引入文件省略后缀名
template.defaults.extname = ‘.html’;

{{extend './common/layourt.art'}}
{{block 'content'}}
    <p>{{ dateFormat(time,'yyyy hh dd')}}</p>
{{/block}}

const template = require('art-template');
// 需要先 下载第三方模块  npm install dateformat
const dateFormat = require('dateformat');
const path = require('path');
//配置模板目录
template.defaults.root = path.join(__dirname, 'views');
//配置模板后缀名
template.defaults.extname = '.art';
//不能直接使用，需要通过 template进行模板配置
template.defaults.imports.dateFormat = dateFormat;

const html = template('06', {
    time: new Date(),
});
console.log(template('07', {}));
console.log(html);