table of Contents
1. Template Engine
The template engine is a third-party module
that allows developers to splice strings in a more friendly way, making the project code clearer and easier to maintain.
2. art-template template engine (Tencent)
- Use the npm install art-template command in the command line tool to download
- Use
const template = require('art-template')import template engine - Tell the template engine where the data and templates to be spliced are
const html = template('模板路径', 数据)；
3. Art-template code example
app.js
// 导入模板引擎
const template = require('art-template');
const path = require('path');
const view = path.join(__dirname, 'views', 'index.art')
// template方法是用来拼接字符串的
// 1. 模板路径 绝对路径
// 2. 要在模板中显示的数据 对象类型
// 返回拼接好的字符串
const html = template(view, {
name: '张三',
age: 20
})
console.log(html);
index.art
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{
{name}}
{
{age}}
</body>
</html>
4. Template syntax
- art-template supports two template syntaxes at the same time: standard syntax and original syntax
- Standard grammar can make templates easier to read and write, and the original grammar has powerful logic processing capabilities
4.1 Standard grammar original grammar text output
标准语法：{
{
数据}}
原始语法：<%=数据 %>
原文输出：{
{
@ content}} <%- content%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</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 + 2%></p>
<p><%= 1+1==2 ? '相等':'不相等' %></p>
<p><%= content%></p>
<!-- 原文输出 -->
<p><%- content%></p>
</body>
</html>
4.2 Conditional Judgment (Level 68)
In the template, you can decide which piece of HTML code to display based on conditions
<!-- 条件判断的标准语法 -->
{
{
if age>18}}
年龄大于18
{
{
else if age < 15}}
年龄小于15
{
{
else}}
年龄不符合要求
{
{
/if}}
<% if(age > 18) {
%>年龄大于18<%} %>
<!-- 条件判断的原始语法 -->
<% if(age > 18) {
%>
年龄大于18
<%} else if (age < 15) {
%>
年龄小于15
<%} else {
%>
年龄不符合要求
<%} %>
4.3 Loop
标准语法：{
{
each 数据}} {
{
/each}}
原始语法：<% for() {
%> <%} %>
<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>
4.4 Sub-template
Use sub-templates to extract public sections (head, bottom) of the website into separate files.
- 标准语法：{
{
include '模板' }}
- 原始语法：<% include{
'模板'} %>
Code example:
{
{
include './common/header.art'}}
<% include('./common/header.art')%>
<div> {
{
msg }} </div>
{
{
include './common/footer.art'}}
<% include('./common/footer.art')%>
4.5 Template inheritance
Use template inheritance to extract the website skeleton into a separate file, and other page templates can inherit the template that the skeleton file
will inherit:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{
{block 'link'}} {
{/block}}
</head>
<body>
{
{block 'content'}} {
{/block}}
</body>
</html>
Fill in the template:
// 继承layout模板
{
{extend './common/layout.art'}}
{
{block 'content'}}
<p>{
{ msg }}</p>
{
{/block}}
{
{block 'link'}}
<link rel="stylesheet" href="./main.css">
{
{/block}}
js file:
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);
4.6 Template configuration
- Import variable template into the template, defaults.imports. Variable name = variable value;
- template.defaults.root = path.join(__dirname, ‘views’);
- template.defaults.extname ='.art';
suffix name
const template = require('art-template');
const dateFormat = require('dateformat');
const path = require('path');
const views = path.join(__dirname, 'views', '06.art');
// 设置模板根目录
template.defaults.root = path.join(__dirname, 'views');
// 导入模板变量
template.defaults.imports.dateFormat = dateFormat;
// 默认后缀的配置
template.defaults.extname = '.art';
// 有后缀就找后缀名的文件
const html = template('06.art', {
time: new Date(),
// "2020-08-19T03:22:11.413Z" 用引号引起来的字符串
})
// 可以直接传模板的名字
// 没有后缀就找 template.defaults.extname 设置的文件
console.log(template('07', {
}));
console.log(html);
{
{
dateFormat(time,'yyyy-mm-dd hh:mm:ss')}}