art-template 模板引擎(服务器端)

最新推荐文章于 2022-05-09 18:36:24 发布

昵称2-20个字符

最新推荐文章于 2022-05-09 18:36:24 发布

阅读量451

点赞数

分类专栏： node 文章标签： nodejs art-template

本文链接：https://blog.youkuaiyun.com/weixin_39517183/article/details/107286049

版权

node 专栏收录该内容

9 篇文章

订阅专栏

art-template模板引擎提供了丰富的语法，如条件判断、循环、子模板和模板继承等特性。支持标准语法和原始语法，适用于Node.js环境。通过`template()`方法结合模板路径和数据对象进行字符串拼接。模板继承允许抽离网站骨架，子模板用于管理公共区块，配置选项可定制模板行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

art-template 模板引擎

template 方法是用来拼接字符串的
template()参数一模板路径绝对路径
template()参数二要在模板中显示的数据对象类型

//js代码
const views=path.join(__dirname,'views','index.art');
const html=template(views,{
    name:'张狗蛋',
    age:22
});

// 模板语法
{{name}}
{{age}}

1.模板语法

art-template同时支持两中模板语法：标准语法和原始语法
标准语法可以让模板更容易读写,原始语法具有强大的逻辑处理能力.

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

1.1 输出
- 将某项数据输出在模板中,变种语法和原始语法如下:
- 标准语法:{{数据}}
- 原始语法:<%=数据%>
```

<h2>{{value}}</h2>
<h2>{{a ? b :c}}</h2>
<h2>{{a + b}}</h2>
<h2>{{@a + b}}</h2>

<h2><%=value %></h2>
<h2><%=a ? b :c%></h2>
<h2><%=a + b %></h2>
<h2><%=a + b %></h2>
```
1.原文输出

如果数据中携带HTML标签,默认模板引擎不回解析标签,会将其转移后输出
- 标准语法:{{@数据}}
- 原始语法:<% -数据%>

1.2 条件判断

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

    // 标准语法
   // {{if 条件}}...{{/if}}
    //{{if vl}}...{{else if v2}}...{{/if}}

     {{if age>18}}
        年龄大于18
    {{else if age<15 }}
        年龄小于15
    {{else}}
        年龄不符合要求
    {{/if}}

    // 原始语法
    // <% if (value) {%>...<%}%>
    // <% if (value) {%>...<%} else if(value2){%>...<%} %>
    <% if(age>18 ){%>
        年龄大于18
    <% } else if(age<15){%>
        年龄小于15
    <% } else{%>
        年龄不符合要求
    <% } %>

1.3 循环

- 标准语法:{{each 数据}}{{/each}}
- 原始语法:<%for(){%> <%}%>

    <!-- js 代码 -->
    // 引进模块引擎
    const template=require('art-template');
    // 引进路径模块
    const path=require('path');
    // 拼接文件绝对路径
    const views=path.join(__dirname,'views','03.art');
    // 定义数据
    const html=template(views,{
        users:[
            {name:'张蛮子',
            age:20,
            sex:'男'
        },{
            name:'李四',
            age:30,
            sex:'男'
        },{
            name:'玛利亚',
            age:12,
            sex:'女'
        }
        ]
    });
    console.log(html);

// art文件代码
// //标准语法 
//     target 要循环的数据
//     $index 代表循环索引 $value 代表循环的每个数据 
// {{each target}}
//          {{$index}}{{$value}}
// {{/each}} 
    <ul>
        {{each users}}
            <li>
                <span>{{$value.name}}</span>
                <span>{{$value.age}}</span>
                <span>{{$value.sex}}</span>
            </li>
        {{/each}}
    </ul>
//原始语法
// <% for(var i=0;i<target.length;i++>){ %>
// <%=i%><%=target[i] %>
// <% } %>
        <ul>
            <%for(var i=0;i<users.length;i++) { %>
                <li>
                    <%=users[i].name%>
                    <%=users[i].age%>
                    <%=users[i].sex%>
                </li>
            <% } %>
        </ul>

2.子模版

使用子模版可以将网站公共区块(头部,底部)抽离到单独的文件中

标准语法 {{include ‘./header.art’}}
原始语法 <% include(’./header.art’)%>

 <!-- 标准语法 -->
 {{include './header.art'}}
 <!-- 原始语法 -->
 <%include('./header.art')%>

 <!-- 案例: -->
 <!-- 标准语法 -->
 {{ include './common/header.art' }}
     <div>{{ msg }}</div>
 {{ include './common/footer.art'}}

 <!-- 原始语法 -->
 <% include('./common/header.art')%>
      <div>{{ msg }}</div>
 <% include('./common/header.art')%>

3.模板继承

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>骨架模板</title>
        {{block 'link'}}{{/block}}
    </head>
    <body>
        {{block 'content'}}{{/block}}
    </body>
    </html>

        //继承骨架模板 
        {{extend './common/layout.art'}}

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

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

4.模板配置

向模板中导入变量 template.defaults.imports.变量名=变量值
实例:

    <!-- js文件 -->
    const template=require('art-template');
    const path=require('path');
    //引入处理时间的模块  下载 npm install dateformat
    const dateFormat=require('dateformat');

    const views=path.join(__dirname,'views','06.art');
    // 导入模板变量
    template.defaults.imports.dateFormat=dateFormat;
    const html = template(views,{
        time:new Date()
    });
    console.log(html);

    <!-- 模板文件 time 值 yyyy-mm-dd时间格式-->
    {{dateFormat(time,'yyyy-mm-dd')}}

设置模板根目录 template.defaults.root=模板目录

    const template=require('art-template');
    const path=require('path');
    const dateFormat=require('dateformat');

    // const views=path.join(__dirname,'views','06.art');

    // 设置模板根目录
    template.defaults.root=path.join(__dirname,'views');
    // 导入模板变量
    template.defaults.imports.dateFormat=dateFormat;
    const html = template('06.art',{
        time:new Date()
    });
    console.log(html);

设置模板默认后缀 template.defaults.extname=’.art’;

    const template=require('art-template');
    const path=require('path');
    const dateFormat=require('dateformat');

    // const views=path.join(__dirname,'views','06.art');

    // 设置模板根目录
    template.defaults.root=path.join(__dirname,'views');
    // 导入模板变量
    template.defaults.imports.dateFormat=dateFormat;

    // 配置模板的默认后缀   
    template.defaults.extname='.html';

    const html = template('06.art',{
        time:new Date()
    });
    console.log(template('07',{}));
    console.log(html);