art-template 模版引擎

模版引擎是第三方模块

可以让开发着以更友好的方式拼接字符串，使项目代码更加清晰，更加易于维护。

art-template 模版引擎

使用命令行工具输入 npm i art-template 进行安装
使用const template = require('art-template') 引入模版引擎
告诉模版引擎要拼接的数据和模版在哪 const html = template('模版路径'， '数据')
1. 参数一：模版引擎的路径（绝对路径，需要path.join 拼接）
2. 参数二：要传递给模版引擎的数据

模版语法

art-template 同时支持两种模版语法：标准语法和原始语法
标准语法可以让模版更容易读写，原始语法具有更强大的逻辑处理能力。
输出：

　　将某项数据输出到模版中，标准语法和原始语法如下

   // 标准语法
<h2>{{value}}</h2>
<h2>{{ a ? a : b}}</h2>
<h2>{{a+ b}}</h2>

// 原始语法
<h2><%= value  %></h2>
<h2><%= a ? a : b  %></h2>
<h2><%= a + b  %></h2>

原文输出
- 如果数据中携带HTML标签，模版引擎不会解析标签，回将其转移后输出。
- 标准语法： {{ @数据 }}
- 原始语法：<% -数据 %>

　条件判断

在模版中可以更具条件来决定显示哪块 html 代码
{{ if 条件 }} {{ /if }}

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

{{ if vl }} {{ else if v2 }} {{ /if }

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

　循环

　　标准语法： {{ each 数据 }} {{ /each}}

<ul>
  {{ each users}}
    <li>
    {{ $value.name }}
    {{ $value.age }}
    </li>
    {{ /each }}
</ul>

原始语法： <% for() { %> <% } %}

<ul>
<% for (var i = 0; i < users.length; i++) { %>
  <li>
  <%= users[i].name %>
  <%= users[i].age %>
  </li>
<% } %>
</ul>

子模版
- 　　使用子模版可以将网站公共区块（头部，底部）抽离到单独的文件中。
- 标准语法： {{ include '子模版路径' }}
- ```
{{ include './header.art' }}

<div> content</div>

{{ include './footer.art' }}
```
- 原始语法： <% include ('子模版路径') %>
- ```
<% include ('./header.art') %>

<div> content</div>

<% include ('./footer.art') %>
```

模版继承

　　使用模版继承可以将网站HTML骨架抽离到单独的文件中，其他页面模版可以继承骨架文件夹。
引入模版 {{ extend '模版路径' }}
填充内容 {{ block '名称' }} {{ /block }}

//  layout.art
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  {{ block 'link'}}  {{ /block }}
</head>
<body>
  {{ block 'content' }}  {{ /block }}
</body>
</html>


// index.art
{{ extend './layout.art' }}

{{ block 'link'}}
<link rel="stylesheet" href="1.css">
{{ /block}}

{{ block 'content'}}
<p>内容</p>
{{ /block }}

　　向模版中导入变量 template.defaults.imports.变量名 = 变量值 (固定写法)

示例：

// index.js

const dateFormat = require('dateformat')
const template = require('art-template')
const path = require('path')

const views = path.join(__dirname, './8.art')

// 导入模版变量 （固定写法）
template.defaults.imports.dateFormat = dateFormat
template.defaults.imports.test = 'test'

const html = template(views, {
  time: new Date()
})

console.log(html)

// 8.art
{{dateFormat(time, 'yyyy-mm-dd')}}
{{test}}

配置模版根目录（配置完模版根目录之后，调用模版可以不写文件的路径） template.defaults.root = 模版目录

template.defaultls.root = path.join(__dirname, 'views' )

配置模版默认后缀(配置完模版后缀，在调用模版文件时可以不用写模版文件的后缀名)，template.defaults.extname = '.art'