html 的模板语法,art-template模板语法

art-template模板语法支持两种模板语法，分别是标准语法和原始语法。

标准语法：

标准语法可以让模板更容易读写，例如：{{ 数据 }}

原始语法：

原始语法具有强大的逻辑处理能力，例如：

纯文本输出语法：

输出语法表示将数据输出到模板中。 (ps：类似于Vue 中的 v-text 指令)

标准语法示例：

Title

{{ name }}

{{ value1 + value2 }}

{{ a ? c : d ]}

原始语法示例：

Title

HTML标签解析输出语法：

如果想将数据中的html 输出，那么可以通过该语法。(ps：类似于Vue 中的 v-html 指令)

数据：

/*

引入art-template

该模块返回一个函数

*/

const artTemplate= require('art-template');

/*

引入系统模块path主要是为了拼接路径

*/

const path = require('path');

// 拼接模板路径

const templatePath = path.join(__dirname,'index.art');

/*

* 通过artTemplate 来拼接

* 参数一：模板路径

* 参数二：要在模板中展示的数据

* 该函数返回以拼接完成的模板字符串

* */

const html = artTemplate(templatePath,{

content:'

我是h1标签

'

});

标准语法示例：

只需在数据前加上@符号即可

Title

{{ @content }}

原始语法示例：

只需将

Title

结果：

Title

我是h1标签

条件判断语法：

在模板中，可以根据条件来决定显示哪块HTML代码

标准语法示例：

Title

{{ if age>16 }}

年龄大于16岁

{{ else if age>10 }}

年龄大于10岁

{{ else }}

年龄小于或者等于10岁

{{ /if }}

原始语法示例：

16) { %>

年龄大于16岁~~~

10) { %>

年龄大于10岁~~~

年龄小于或者等于10岁~~~

结果：

Title

年龄小于或者等于10岁~~~

循环语法：

通过循环语法可以对数组数据进行循环展示(ps：类似于Vue 中的 v-for 指令)

数据：

引入art-template

该模块返回一个函数

*/

const artTemplate= require('art-template');

/*

引入系统模块path主要是为了拼接路径

*/

const path = require('path');

// 拼接模板路径

const templatePath = path.join(__dirname,'index.art');

/*

* 通过artTemplate 来拼接

* 参数一：模板路径

* 参数二：要在模板中展示的数据

* 该函数返回以拼接完成的模板字符串

* */

const html = artTemplate(templatePath,{

datas:[{name:'张三'},{name:'李四'}],

});

console.log(html);

标准语法示例：

{{ each datas }}

当前的下标为：{{ $index }}

当前的item数据为： {{ $value.name }}

{{ /each }}

原始语法示例：

当前的下标为：

当前的item数据为：

效果图：

Title

当前的下标为：0

当前的item数据为： 张三

当前的下标为：1

当前的item数据为： 李四

子模板语法：

通过子模板可以将网站中的公共区域(头部、底部)抽离到单独的文件中。(ps：类似于Vue中的公共组件、Android中的include标签 )

子模板数据：

我是网页底部

子模板路径：

标准语法示例：

Title

{{ include './footer.art' }}

原始语法示例：

Title

效果图：

Title

我是网页底部子模板

模板继承语法：