模板引擎 art-template

最新推荐文章于 2024-04-06 11:09:13 发布

梦想总是美好的ヾ ^_^♪

最新推荐文章于 2024-04-06 11:09:13 发布

阅读量179

点赞数 1

分类专栏： Web开发文章标签： javascript html node.js

本文链接：https://blog.csdn.net/qq_51975341/article/details/120373809

版权

Web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

模板引擎 art-template

用来拼接String
art-template模板引擎来自于腾讯

模板引擎的使用

通过 npm install art-template
使用 const template = require('art-template') 应用模板引擎，在 node 中使用
它的返回值是改变后的字符串

入门代码样例

js代码

const template = require('art-template'); // 引入 art-template 模块
const path = reqire('path'); // 使用 path 模块
/*
	__dirname: 表示当前文件所在的目录
	path.join(): 是 path 模块中的拼接字符串的方法
*/
const views = path.join(__dirname, 'views', 'index.art');
/*
	1.模板路径  为绝对路径会更安全
	2.要在模板中显示数据， 对象类型
	返回值为拼接好的字符串
*/
const html = template(views, {
    name: '张三',
    age: 20
})
// 输出结果
console.log(html);

html代码

<body>
    {{ name }}
    {{ age }}
</body>

运行结果：

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title></title>
        </head>
        <body>
            张三
            20
        </body>
</html>

模板引擎语法

模板语法

标准语法和原始语法
标准语法可以让模板更容易读写，原始语法具有更强大的逻辑处理能力

标准语法： {{ 数据 }}

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

输出

标准语法： {{ 数据 }}

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

语法内容可以进行简单的运算和三元计算，输出结果是运算结果

<!--
	标准语法
-->
<h2>
    {{ value }}
</h2>
<!--
	原始语法
-->
<h2>
    <%= value %>
</h2>

样例：

<body>
		{{ name }}
		<%= name %>
</body>

运行结果：

&#60;p&#62;张三&#60;/p&#62;
&#60;p&#62;张三&#60;/p&#62;

原文输出

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

<!--
	标准语法
-->
<h2>
    {{@ value }}
</h2>
<!--
	原始语法
-->
<h2>
    <%- value %>
</h2>

样例：

{{@ name }}
<%- name %>

运行结果

<p>张三</p>
<p>张三</p>

条件判断

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

原始语法：有一个好处可以写所有的原生的 javascript 的代码

<!-- 标准语法 -->
{{if 条件 }} ... {{/if}} // 如果条件满足显示之间内容
{{if v1}} ... {{else if v2}} ... {{/if}}
<!-- 原始语法 -->
<% if (value) { %> ... <% } %> // 有一个好处可以写所有的原生的 javascript 的代码
<% if (v1) { %> ... <% }> else if (v2) { %> ... <% } %>

循环语法

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

如果 value 为一个对象，则使用 value.v1 取出数据，对于原始语法则使用 value[i].v1 取出数据

<!-- 标准语法 -->
{{each target}} //target 要循环的数据
	{{$index}} {{$value}} //$index: 循环的索引 $value: 当前循环的数据
{{/each}}
<!-- 原始语法 -->
<% for(var = i = 0; i < target.length; i++) { %>
	<%= i %><%= target[i] %>
<% } %>

子模版

使用子模版可以将网站公共的区块（头部、底部）处理到单独的文件当中去。

标准语法： {{include ‘模板’}}
原始语法： <%include(‘模板’) %> include相当于一个方法

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

模板继承

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

实例：

骨架模板：

通过 block 来预留位置，声明名字，他是一个双标签。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML骨架模板</title>
        {{block 'head'}}{{/block}}
        //预留位置
    </head>
    <body>
        {{block 'content'}}{{/block}}
        //预留位置
    </body>
</html>

继承骨架模板：

通过 extend 标签继承骨架模板
通过 block 标签去填充骨架模板中的预留位置，中间填内容

<!-- index.art or aother.art 首页模板或者其他的页面模板 -->
<!-- 引入骨架模板，填充相应的骨架模板的路径 -->
{{extend '对应的骨架模板的路径'}}
<!-- 填充对应的内容 -->
{{block 'head'}} <link rel="#" href="#" > {{/block}}

模板配置

本身模板是不能直接使用变量或者调用方法。需要将方法作为模板的变量导入模板中，然后在使用这个方法。

template.defaults.imports.变量名 = 变量值

然后就可以在模板中调用这个方法了

const template = require('art-template'); // 引入 art-template 模块
const path = reqire('path'); // 使用 path 模块
const dataFormat = require('dataFormat'); // 使用dataFormat 模块
// 设置模板的根目录
template.defaults.root = path.join(__dirname, 'views');
// 导入模板变量
template.defaults.imports.dataFormat = dataFormat;

// 配置模板的默认后缀
template.defaults.extname = '.art';
/*
	1.模板路径  为绝对路径会更安全
	2.要在模板中显示数据， 对象类型
	返回值为拼接好的字符串
*/
const html = template('index', {
    name: '张三',
    age: 20
})
// 输出结果
console.log(html);