模板引擎
1.模板引擎的基础概念
1.2 art-template 模板引擎
在命令行工具中使用npm install art-template命令进行下载
使用const template = require('art-template')引入模板引擎
告诉模板引擎要拼接的数据和模板在哪里: const html = template('模板路径',数据);
基础示例代码如下：
// 导入模板引擎 const template = require('art-template'); const { Agent } = require('http'); const path = require('path'); // 拼接模板路径 const views = path.join(__dirname,'views','index.art') // template方法是用来拼接字符串的 // 1.模板路径 使用绝对路径 // 2.要在模板中显示的数据 对象类型 // 返回拼接好的字符串 const html = template(views, { name: '张三', age:20 }) console.log(html);
2.模板引擎语法
2.1 模板语法
art-template同时支持两种模板语法： 标准语法和原始语法。
标准语法可以让模板更容易读写，原始语法具有强大的逻辑处理能力。
2.2 输出
将某项数据输出在模板中，标准语法和原始语法如下：
标准语法：{{数据}}
原始语法：<%=数据%>
2.3 原文输出
如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后输出。
标准语法：{{@数据}}
原始语法：<%-数据 %>
2.4 条件判断
在模板中可以根据条件来决定显示哪块HTML代码。
<!-- 标准语法进行条件判断 --> {{if age > 18}} 年龄大于18 {{else if age < 15}} 年龄小于15 {{else}} 年龄不符合要求 {{/if}} <!-- 原始语法进行条件判断 --> <% if (age > 18) { %> 年龄大于18 <% } else if (age < 15) { %> 年龄小于15 <% } else { %> 年龄不符合要求 <% } %>
2.5 循环
标准语法：{{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>
2.6 子模板
使用字幕版可以将网站公共区块（头部、底部）抽离到单独的文件中。
标准语法：{{include ‘模板’}}
原始语法：<%include(’模板‘) %>
{{include './common/header.art'}} <div> {{ msg }} </div> {{include './common/footer.art'}} <%include('./common/header.art') %> <div> {{ msg }} </div> <%include('./common/footer.art')%>
2.7 模板继承
使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。
示例代码如下：
该部分是HTML骨架模板部分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML骨架模板</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" href="./main.css"> {{/block}}
2.8 模板配置
向模板中导入变量 template.defaults.imports.变量名= 变量值;
设置模板根目录template.defaults.root = 模板目录；
配置模板的默认后缀template.defaults.extname = 后缀名
示例代码如下：
// 导入模板引擎 const template = require('art-template'); const path = require('path'); const dateformat = require('dateformat') // 设置模板的根目录 template.defaults.root = path.join(__dirname, 'views'); // 导入模板变量 template.defaults.imports.dateformat = dateformat; // 配置模板的默认后缀 template.defaults.extname = '.html'; // 设置了模板的根目录后，只需要在此处填写要渲染的文件名即可：例如06 const html = template('06.art', { time : new Date() }); // 渲染07.html文件，写入07自动查询文件名为07.html的文件 console.log(template('07', {})) console.log(html);
