模版引擎是第三方模块
可以让开发着以更友好的方式拼接字符串，使项目代码更加清晰，更加易于维护。
art-template 模版引擎
- 使用命令行工具 输入 npm i art-template 进行安装
- 使用const template = require('art-template') 引入模版引擎
- 告诉模版引擎要拼接的数据和模版在哪 const html = template('模版路径'， '数据')
- 参数一： 模版引擎的路径（绝对路径，需要path.join 拼接）
- 参数二：要传递给模版引擎的数据
模版语法
- 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'