easyTempale模板工具语法 template模板引擎

• 概述

• 模板引擎是第三方模块。
• 让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。
• 不适用模板引擎拼接字符串会非常繁琐，臃肿

• 而使用了模板引擎拼接字符串，就会更加清晰

• 模板引擎种类

• art-template模板引擎是由腾讯公司出品
• art-template模板引擎文档是中文文档
• art-template模板引擎使用范围很广，速度很快

• 1.下载

• 在命令行工具中使用 npm install art-template 命令进行下载

• 2.引入模板引擎

• 使用const template = require('art-template')引入模板引擎
• 返回一个方法，用于对模板和数据进行拼接

• 3.引入数据和模板

• 对模板和数据进行拼接之前，需要先使用模块返回的方法引入待拼接的模板和数据
• 告诉模板引擎要拼接的数据和模板在哪 const html = template(‘模板路径’, 数据);
• 参数

• 1.模板字符串

• 可以将模板字符串定义为单独的文件
• 约定俗成，存放模板的文件为views
• 模板引擎规定该文件后缀为 .art 类型（即使规定了后缀，内容也可以为html）

• 2.在模板中展示的数据（对象类型）

• 这样就可以在模板中直接使用此对象的属性进行引用拼接

• 返回值

• 返回拼接好的字符串

• 4.使用语法

• 使用模板语法告诉模板引擎，模板与数据应该如何进行拼接

• 方法调用

• 模板内容

• 模板语法

• 语法是写在模板字符串之中的，为了便与进行数据的拼接
• art-template同时支持两种模板语法：标准语法和原始语法。
• 标准语法

• 标准语法可以让模板更容易读写
• 输出

• 将某项数据输出在模板中，除了直接输出，还可以在其中进行运算
• { { 数据 } }

• 原文输出

• 如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后原样输出输出。
• 可以使用原文输出对其中HTML代码进行解析
• { { @ 数据 } }

• 转存失败重新上传取消

• 条件判断

• 在模板中可以根据条件来决定显示哪块HTML代码
• 条件判断语句总是成对出现
• { { if 条件1} } ... { { else if 条件2}} ... { { / i f } }

• 循环语法

• 循环语句也是成对出现的
• { { each 循环数据 } } { { / each } }

• art-template中可以直接循环数组数据
• 参数

• { { $index} } 代表了本次循环的索引
• { { $value} } 代表了本次循环的数据内容

• 子模版

• 使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
• 而可以使用子模版语法将抽离的头部文件重新添加进原有的页面
• { { include '模板' } } （这里模板路径不需要写括号）

• 原始语法

• 原始语法具有强大的逻辑处理能力。
• 输出

• 将某项数据输出在模板中，除了直接输出，还可以在其中进行运算
• < % = 数据   % >

• 原文输出

• 如果数据中携带HTML标签，默认模板引擎不会解析标签，会将其转义后原样输出输出。
• 可以使用原文输出对其中HTML代码进行解析
• < % - 数据 % >

• 转存失败重新上传取消

• 条件判断

• 在模板中可以根据条件来决定显示哪块HTML代码
• <% if (条件1) { %> ... <% } else if (条件2) { %> ... <% } %> 转存失败重新上传取消

• 循环语法

• <% for() { %> <% } %>

• 转存失败重新上传取消

• 子模版

• 使用子模板可以将网站公共区块(头部、底部)抽离到单独的文件中。
• 而可以使用子模版语法将抽离的头部文件重新添加进原有的页面
• < % include('模板') % >（这里模板路径需要加括号）

• 转存失败重新上传取消

• 模板继承

• 可以使用子模版的方式将部分代码抽离出去，但HTML骨架部分（html标签，herd标签，body标签），也属于公共部分，但是不能通过子模版抽离出去
• 使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。

• 页面 = 继承骨架 + 包含子模版

• 在骨架文件中可以预留一些位置，为页面独有的一些内容填写数据

• 在模板文件中使用 关键字 block 预留位置

• 转存失败重新上传取消

• { { block '位置名' } } { { / block } }

• 引用时使用 关键字 extend继承模板 再使用 关键字 block 填充位置

• 引用模板

• { { extend ' 模板路径 ' } }

• 填充位置

• {{block '模板中位置名'}} 填充内容 {{/block}}

• 模板配置

• 1.向模板中导入变量

• template.defaults.imports.变量名 = 变量值;

• 在模板当中，直接使用传入的变量值调用相应的变量

• 可以将第三方模块作为变量导入模板，从而在模板中使用第三方模块

• 2.设置模板根目录

• template.defaults.root = 模板目录
• 设置跟根目录后，就不需要再进行冗余的重复拼接路径行为了

• 2.设置模板默认后缀

• template.defaults.extname = '.art'
• 但设置了默认后缀后，在没有书写路径文件后缀时，模板路径会自动拼接上默认后缀