art-temolate模板引擎

最新推荐文章于 2022-04-14 17:19:49 发布

杨王畅

最新推荐文章于 2022-04-14 17:19:49 发布

阅读量158

点赞数

本文链接：https://blog.csdn.net/qq_45520554/article/details/111929599

版权

模板引擎

1.1模板引擎：

让开发者以更加友好的方式拼接字符串，使代码更加清晰，更加易于维护。

1.2：art-template 模板引擎

使用art-template第三方模块。首先下载这个模

npm install art-template

入门示例：

// 引入这个模块
const template = require("art-template");

const path = require("path");
let views = path.join(__dirname,'views','01.art')
// template方法有两个参数，第一个参数是模板的路径（最好使用绝对路径），第二个参数是数据。该方法有一个返回值是对象
let html = template(views, {
    name: '刘德华',
    age: 52
});

// 打印得到的返回值
console.log(html);

运行结果

<div> 刘德华</div>
<div> 52</div>

2.1:模板引擎的语法：

1：标准语法{{数据}}

2：原始语法<%=数据%>

2.2：条件判断

标准语法和原始语法示例中的js代码都是相同的，如下：

// 引入这个模块
const template = require("art-template");

const path = require("path");
let views = path.join(__dirname, 'views', '02.art');


let html = template(views, {
    name: '刘德华',
    age: 52
});

// 打印得到的返回值
console.log(html);

标准语法：

{{if v1}} ... {{/if}}

示例：

{{if age>30}}
    刘德华年龄大于30
{{/if}}

运行结果：

    刘德华年龄大于30

原始语法：

<% if(条件) {%>
    
<%}%>

示例：

<%if(age>30) {%>
    刘德华年龄大于30
<%}%>

运行结果：

  刘德华年龄大于30

2.3：循环

标准语法和原始语法示例中的js代码都是相同的，如下：

// 引入这个模块
const template = require("art-template");

const path = require("path");
let views = path.join(__dirname, 'views', '03.art')
// template方法有两个参数，第一个参数是模板的路径（最好使用绝对路径），第二个参数是数据。该方法有一个返回值是对象
let html = template(views, {
    data: [{
        name: "刘德华",
        age: 52
    },
    {
        name: "张学友",
        age: 50
        },
        {
            name: "黎明",
            age:54
        },
        {
            name: '郭富城',
            age:48
    }]
});

// 打印得到的返回值
console.log(html);

标准语法：

{{each target}}
	{{$index}} {{$value}} //前者代表索引，后者代表值
{{/each}}

示例：

<ul>
    {{each data}}
    <li>{{$value.name}}</li>
    <li>{{$value.age}}</li>
    {{/each}}
</ul>

运行结果：

<ul>

    <li>刘德华</li>
    <li>52</li>

    <li>张学友</li>
    <li>50</li>

    <li>黎明</li>
    <li>54</li>

    <li>郭富城</li>
    <li>48</li>

</ul>

原始语法：

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

示例代码：

<ul>
<%for(var i=0;i<data.length;i++){%>
    <li><%=data[i].name%></li>
    <li><%=data[i].age%></li>
<%}%>
</ul>

运行结果：

<ul>

    <li>刘德华</li>
    <li>52</li>

    <li>张学友</li>
    <li>50</li>

    <li>黎明</li>
    <li>54</li>

    <li>郭富城</li>
    <li>48</li>

</ul>

2.4：子模板

使用子模板可以将网站公共区块（头部、底部）抽离到单独的文件中.

在view 文件夹下新建一个common文件夹存放公共部分

标准语法：

{{include '模板'}}

示例：

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

运行结果：

<div>我是头部</div>
<div>我是底部</div>

原始语法：

<%include('模板')%>

示例：

<% include('./common/header.art')%>
<% include('./common/footer.art')%>

运行结果:

<div>我是头部</div>
<div>我是底部</div>

2.5：模板继承

使用模板继承可以将网站HTML骨架抽离到单独的文件中，其他页面模板可以继承骨架文件。

首先在骨架文件中使用block来保留位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    {{block 'link'}}{{/block}}
</head>
<body>
    {{block 'content'}}{{/block}}
    
</body>
</html>

继承并且填充保留的位置

{{extend './common/layout.art'}}

{{block 'link'}}
<link rel="stylesheet" href="">
{{/block}}


{{block 'content'}}
<p>{{msg}}</p>
{{/block}}

运行结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<link rel="stylesheet" href="">

</head>
<body>

<p>首页s模板</p>


</body>
</html

杨王畅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
art-temolate模板引擎

模板引擎1.1模板引擎：让开发者以更加友好的方式拼接字符串，使代码更加清晰，更加易于维护。1.2：art-template 模板引擎使用art-template第三方模块。首先下载这个模npm install art-template入门示例：// 引入这个模块const template = require("art-template");const path = require("path");let views = path.join(__dirname,'views','01
复制链接

扫一扫