我的前端自学 node 模板引擎 art-template

最新推荐文章于 2022-03-16 12:21:49 发布

gh100330

最新推荐文章于 2022-03-16 12:21:49 发布

阅读量126

点赞数

分类专栏：自学

本文链接：https://blog.csdn.net/gh100330/article/details/114600030

版权

自学专栏收录该内容

32 篇文章 0 订阅

订阅专栏

（一）概述
art-template模板引擎是为了代替服务器端以字符串拼接的方式响应资源的解决方案，它是node的一个第三方模块。
下载命令：npm install art-template
引入资源： const template = require(“art-template”);
创建模板数据：const html = template(“模板路径”, { 数据 })；
注意，模板路径一定要是绝对路径，模板文件的格式为art

const path = require("path");
const template = require("art-template");
const pathname = path.join(__dirname, "demo.art");
const html = template(pathname, {
	data: {
		name: "art-template",
		date: new Date()
	}
})

(二)模板语法
模板语法分为标准语法和原始语法
1 .输出:

①标准语法

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

②原始语法

<div> <%=data.name %> </div>
<span> <%=data.date %> </span>

两种模板语法都支持简单的计算

{{ 1 + 1 }}
{{ a > 0 ? a : b }}
<%=1 + 1 %>
<%= a > 0? a : b %>

③输出语法的特殊情况：
如果输出的结果里面含有HTML标签，浏览器默认是不进行解析的,当必须有解析的需求时，在标准模板语法里加入@(@符号和大括号之间不要存在空格)，在原始模板语法里将=（等号）换成 -(短横线)

const html = template(pathname, {
	mes: "<h1>html</h1>"
})

{{@ mes }}
<%-mes %>

2 .判断:

①标准语法每一个分支语句的最后，一定是{{ /if }},表示条件判断结束

{{ if true }}...{{ /if }}
{{ if 条件1 }}...{{ else if 条件2}}...{{ /if }}

②原始语法

<% if (条件) {%>...<% } %>
<% if (条件一) {%>
...
<% } else if (条件二) {%>
...
<% } %>

3 .循环

①标准语法和分支语法相同，有开始就要有结束。$ index是循环项的数据的索引，$ value是循环项的每一个数据

{{each 循环项}} 
	{{ $index }} {{ $value }}
{{ /each}}

②原始语法

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

（三）子模版
子模版用于将网页的公共区域抽离到单独的文件中
①标准语法

{{ include "模板" }}

②原始语法

<% include("模板") %>

③模板继承
模板继承可以将HTML骨架抽离到单独的文件中，其他的模板文件可以继承这个骨架。
html骨架通过block标签预留位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html骨架</title>
    {{ block "cssLink" }} {{ /block }}
</head>

<body>
    {{ block "content"}} {{ /block }}
</body>

</html>

模板文件通过extend标签引入骨架，并通过block标签为骨架预留空间填充内容

<!-- 引入骨架 -->
{{ extend "./views/index.art"}} 
<!-- 引入样式 -->
{{ block "cssLink"}}
<link rel="stylesheet" href="./public/css/index.css">
{{ /block}}
<!-- 引入内容 -->
{{ block "content"}}
<div class="w">
    <form action="" name="">
        <fieldset>
            <legend>
                <h2>学生档案</h2>
            </legend>
            <table>
                <tr>
                    <td>
                        <label for="name"><span>*</span> 姓名 :</label>
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="name" placeholder="请输入姓名" required></td>
                </tr>
                <tr>
                    <td>
                        <label for="age"><span>*</span> 年龄 :</label>
                    </td>
                </tr>
                <tr>
                    <td><input type="text" id="age" placeholder="请输入年龄" required></td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" name="" id="" value="确认提交">
                        <input type="reset" name="" id="" value="重新填写">
                    </td>
                </tr>
            </table>

        </fieldset>
    </form>
</div>
{{ /block }}

④模板配置
Ⅰ向模板中导入变量

require("art-template").defaults.imports.变量名 = 变量值;

如，向模板中导入处理时间格式的第三方模块：dateformat
dateformat第三方模块用来自定义时间格式

const template = require("art-template");
const format = require("dateformat");
const path = require("path");
// 向模板中导入format方法
template.defaults.imports.format = format;
// 获取绝对路径
const realpath = path.join(__dirname, "index.art");
// 创建日期数据
const html = template(realpath, {
	timer: new Date()
});
console.log(html);

模板：

<body>
	<div> {{format(timer, "yyyy-mm-dd HH:MM:ss")}} </div>
</body>

Ⅱ 自定义渲染模板的根目录以及后缀

// 自定义根目录
template.defaults.root = path.join(__dirname, "views");
// 自定义后缀
template.defaults.extname = ".art";

在渲染模板时，就可以直接写views目录下的文件名

console.log(template("index", {}));

gh100330

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的前端自学 node 模板引擎 art-template

（一）概述art-template模板引擎是为了代替服务器端以字符串拼接的方式响应资源的解决方案，它是node的一个第三方模块。下载命令：npm install art-template引入资源： const template = require(“art-template”);创建模板数据：const html = template(“模板路径”, { 数据 })；注意，模板路径一定要是绝对路径，模板文件的格式为artconst path = require("path");const te
复制链接

扫一扫