高阶模版引擎

高阶模版引擎简介

模版引擎是第三方模块，可以让开发者以更加友好的方拼接字符串，根据开发人员定义的模块结构和数据，自动生成一个完整的HTML页面的模式，使项目代码更加清晰，更加易于维护

图片1.png

art-template模版引擎

在终端中使用npm install（i） art-template命令进行下载
使用const template=require("art-template")引入模版引擎
使用模版引擎将要拼接的数据和模版进行绑定 const html=template("模版路径"，数据)；（数据要是对象类型）
使用模版语法告诉模版引擎。模版与数据应该如何进行拼接

art模版代码

<div>

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

    <span>{{data.age}}</span>

</div>

模版引擎语法

art-template同时支持两种模版语法：标准语法和原始语法标准语法：{{数据}}} 原始语法：<%=数据 %>

标准语法{{数据}}（在书写时使用两对{{}包裹，输出变量时可以直接输出变量名或表达式}）

    <h2>{{value}}</h2>

    <h2>{{a?b:c}}</h2>

    <h2>{{a+b}}</h2>

原始语法<%=数据%>（这里就不过多介绍）

模版引擎的基本用法

if判断语句

使用条件判断的话在if后面直接写判断条件，if语句结束，使用/if即可

示例如下：

    {{if 1>1}}
    {{name}}
    {{/if}}

循环语句

使用each后面跟上要被循环输出的内容（这里的内容要是数组格式） $index表示下标$ value表示内容 for循环语句结束时，使用/each

示例如下：

    {{each content}}
    {{$value}}
    {{/each}}

模版继承

在用于继承的骨架中设置预留位置以便于继承页面中插入不同内容，使用block来预留位置，骨架中可以预留多个内容，对于这些位置要进行区分，可以通过命名的方式来进行区分。

例如我们要书写内容和外联样式时可以这样书写

    <html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    {{block 'style'}}{{/block}}
    </head>
<body>
    
    {{block 'body'}} {{/block}}
</body>
</html>

既然我们可以创建骨架，那我们怎么来使用这个模版呢？

使用{{include "子模版的路径"}}来进行导入我们的字模版。

其他用法

如果你想将html中的标签进行解析需要使用@ 变量名

高阶模版引擎的使用