本插件用于在 HTML 中引入其他 HTML 片段,同时支持多目录查询和art-template模板渲染。
使用方法举例如下(参见 example):
gulpfile.js:
const gulp = ;const htmlArt = ; gulp;
html/component/index.html:
next file: component/index.html next file: common/phrase.html
html/common/head.html:
{{ title }} {{if useHeader}} {{/if}}
其他文件略(参见 example 目录下的文件)。
注:模板语法参考art-template模板引擎语法。
配置参数如下:
paths
字符串或数组,定义跨目录查找的目录路径data
模板渲染的初始数据beautify
HTML美化参数,传递给js-beautify
插件
跨目录查找
当模板中引入的子模板无法在当前目录及相对地址中查找到时,将从配置的 paths
目录中去查找(深遍历子目录)。文件索引的优先级是,当前目录最优,其后依次是 paths
中指定的目录。
模板数据
模板中的数据共三种来源:
-
在 Gulp 中配置
data
项作为初始数据 -
在模板标签中配置属性,如
将得到数据如下:
useHeader: "useHeader"toBool: falsetoInt: 2src: 'header.html'title: 'hello world'属性解析规则如下:
false
和true
被视为 Boolean 类型- 数字字符串被视为 Number 类型
- 如果属性无值,则值为 String 类型的属性名
-
模板标签的内容,如:
{"useHeader": true,"toBool": false}标签内的内容将由
eval()
解析。此外,src
必须写在标签属性中。或者,作如下定义:
click here将得到:
varname: '<a href="#">click here</a>'利用
fragment
可以很方便地传入 HTML 代码(提示:有的模板编译引擎有字符串转义功能,如果发现代码被转义,应当从模板引擎处查找问题。)注意,由于本页默认数据先于模板被处理,因此定义本页默认数据标签在模板中有类似于“作用域提升”的效果,即当前页面使用数据渲染的代码可以写在用标签定义数据代码之前
所有数据将层层传递,从初始数据到父模板,再到子模板,优先级是:标签内容数据 > 标签属性 > 继承数据 > 本页默认数据。
HTML美化
内置调用了 js-beautify
插件,对最后的结果进行美化。默认定义了如下参数:
{
indent_size: 4,
indent_char: '\t',
indent_with_tabs: true,
preserve_newlines: true,
max_preserve_newlines: 1
}
可通过配置项 beautify
覆盖本插件的默认配置和添加其他可用配置。详情请见 js-beautify
插件。