模板 art-template

最新推荐文章于 2021-03-21 16:56:07 发布

qq_39218277

最新推荐文章于 2021-03-21 16:56:07 发布

阅读量111

点赞数

分类专栏： template

本文链接：https://blog.csdn.net/qq_39218277/article/details/106364093

版权

template 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 第一个模板

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

const views = path.join(__dirname, 'views', '01.art');

const html = template(绝对路径, {
	name: '张三',
	age: 20,
	content: '<h1>我是标题</h1>'
})

console.log(html);

2 模板

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 标准语法 -->
	<p>{{ name }}</p>
	<p>{{ 1 + 1 }}</p>
	<p>{{ 1 + 1 == 2 ? '相等' : '不相等' }}</p>
	<p>{{ content }}</p>
	// 加@可以读取html语法
	<p>{{@ content }}</p>
	<!-- 原始语法 -->
	<p><%= name %></p>
	<p><%= 1 + 2%></p>
	<p><%= 1 + 1 == 2 ? '相等' : '不相等' %></p>
	<p><%= content%></p>
	// 加- 可以读取html5语法
	<p><%- content%></p>
</body>
</html>

3. 输出结果

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
</head>
<body>
        <!-- 标准语法 -->
        <p>张三</p>
        <p>2</p>
        <p>相等</p>
        <p>&#60;h1&#62;我是标题&#60;/h1&#62;</p>
        <p><h1>我是标题</h1></p>
        <!-- 原始语法 -->
        <p>张三</p>
        <p>3</p>
        <p>相等</p>
        <p>&#60;h1&#62;我是标题&#60;/h1&#62;</p>
        <p><h1>我是标题</h1></p>
</body>
</html>

if 判断语法模板

{{if age > 18}}
	年龄大于18
{{else if age < 15 }}
	年龄小于15
{{else}}
	年龄不符合要求
{{/if}}

<% if (age > 18) { %>
	年龄大于18
<% } else if (age < 15) { %>
	年龄小于15
<% } else { %>
	年龄不符合要求
<% } %>

遍历数组数据

const html = template(views, {
	users: [{
		name: '张三',
		age: 20,
		sex: '男'
	},{
		name: '李四',
		age: 30,
		sex: '男'
	},{
		name: '玛丽',
		age: 15,
		sex: '女'
	}]
});

模板

		<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 ‘./common/header.art’ }}
<% include(’./common/header.art’) %>

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

继承模板

父模板留有空间让子模板添加

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</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}}

设置模板的根目录

template.defaults.root = path.join(__dirname, ‘views’);

导入模板变量

template.defaults.imports.dateFormat = dateFormat;

配置模板的默认后缀则调用时后缀名可以不写

template.defaults.extname = ‘.art’;

const html = template(‘06.art’, {
time: new Date()
});
模板
{{ dateFormat(time, ‘yyyy-mm-dd’)}}