art-template 模板引擎 - 语法

art-template基本使用

1、npm install art-template
2、引入模板引擎const template = require("art-template")
3、告诉模板引擎要拼接的数据和模板在哪const html = template("模板路径",数据)

这是js文件

const template = require("art-template");
const path = require("path");
// 参数1：模板的路径，使用绝对路径
// 参数2：要在模板中显示的数据，对象类型
// 返回值是拼接好的字符串
const html = template(path.join(__dirname,"./views/index"),{
    data:{
        name:"张三"
    }
})

console.log(html); // 打印出的是html页面的字符串

art模板文件(格式与html文件完全相同，就是后缀使用art)

<div>{{data.name}}</div>

模板语法

• art-template同时支持两种模板语法：标准语法和原始语法
• 标准语法可以让模板更容易阅读，原始语法具有强大的逻辑处理能力
  标准语法：{{ 数据 }}
  原始语法：<%=数据 %>

1、输出

将某项数据输出到模板中，标准语法和原始语法如下：

• 标准语法：{{ 数据 }}
• 原始语法：<%=数据 %>

<!--标准语法-->
<div>{{data.name}}</div>
<!--原始语法-->
<h1><%= data.name %></h1>

2、原文输出

如果数据中携带html标签，默认模板引擎是不会解析标签，会将其转义后输出。
如果需要解析的话，如下：

• 标准语法：{{ @数据 }}
• 原始语法：<%- 数据 %>
  js文件中：

const template = require("art-template");
const path = require("path");
// 参数1：模板的路径，使用绝对路径
// 参数2：要在模板中显示的数据，对象类型
// 返回值是拼接好的字符串
const html = template(path.join(__dirname,"./views/index"),{
    data:{
        name:"张三",
        content:`<h1>kk</h1>`
    }
})

console.log(html); // 打印出的是html页面的字符串

art文件中

<!--标准语法-->
<div>{{@ data.content}}</div>
<!--原始语法-->
<div><%- data.content%></div>

3、条件判断

• 标准语法
  {{ if 条件 }} ...... {{ /if }}
{{ if v1 }} ...... {{ else if v2 }} ...... {{ /if }}
• 原始语法

<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

{{ if data.age < 20 }}
<div>我21</div>
{{ /if }}

4、循环

• 标准语法

{{each target}}
    {{$index}} {{$value}}
{{/each}}

• 原始语法

<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

1、target支持Array和Object的迭代，默认值为$data；
2、$value和$index可以自定义：{{ each target val key }}

5、子模板

• 标准语法

{{ include "模板路径" }}

• 原始语法

<%include("模板路径")%>

6、模板继承

跟Vue的插槽有些像

• 原始语法

{{extend './layout.art'}}
{{block 'head'}} ... {{/block}}

• 标准语法

<% extend('./layout.art') %>
<% block('head', function(){ %> ... <% }) %>