简介
Art-template 是一个轻量级 JavaScript 模板引擎，可以用于前端和后端的渲染。
特点：
- 高性能，能在浏览器和 Node.js 运行。
- 语法简单，风格清新。
- 支持 include 包含语句。
- 支持 if、each 循环语句。
- 支持自定义过滤器等等。
通过 npm 包管理器，可以方便地安装、使用和升级。
安装
在项目目录下，执行以下命令进行安装：
npm install art-template
也可以全局安装，方便在不同项目中使用：
npm install -g art-template
使用
基础
以下是基本的模板语法：
-- -------------------- ---- -------
--------- -----
------
------
------------------------
-------
------
------------------
------------------
-------
-------使用 template.render 函数进行渲染：
-- -------------------- ---- -------
----- -------- - ------------------------
----- ---- - -----------------
--------- -----
------
------
------------------------
-------
------
------------------
------------------
-------
-------
-- -
------ ------- ---------------
-------- ----- -- - ------
---
------------------输出结果：
-- -------------------- ---- -------
--------- -----
------
------
------------- ---------------------
-------
------
---------- ------------------
------- -- - ---------
-------
-------模板配置
可以通过 template.defaults 修改默认配置：
-- -------------------- ---- -------
----- -------- - ------------------------
-- ------
------------------------ - ------ -- --- ---- ----
-------------------------- - ----- -- -- ----
----- ---- - -----------------
--------- -----
------
------
------------------------
-------
------
------------------
------------------
-------
-------
-- -
------ ------- ---------------
-------- ----- -- - ---- ---
---
------------------输出结果：
<!DOCTYPEhtml><html><head><title>Hello,Art-template!</title></head><body><h1>Hello,Art-template!</h1><p>Thisisatest中文</p></body></html>
include 语句
使用 include 语句可以将其他模板文件包含进来：
- 当前目录下的模板文件：
{{include './header.html'}} - 指定目录下的模板文件：
{{include './partials/header.html'}}
-- -------------------- ---- -------
----- -------- - ------------------------
----- ---- - ----------------
----- ---- - -----------------
--------- -----
------
------
------------------------
-------
------
--------- --------------------------
------------------
------------------
-------
-------
-- -
------ ------- ---------------
-------- ----- -- - ------
-- -
-- -----------
----- -
-------------------- ---------
-------------------- -----------
-
---
------------------if 语句
可以使用 if 语句进行条件判断：
{{if isAdmin}}
<p>你是管理员。</p>
{{else}}
<p>你不是管理员。</p>
{{/if}}each 语句
使用 each 语句可以进行循环：
<ul>
{{each list}}
<li>{{$index}} - {{$value}}</li>
{{/each}}
</ul>也可以使用 $item 和 $key 来代替 $value 和 $index：
<ul>
{{each list}}
<li>{{$key}} - {{$item}}</li>
{{/each}}
</ul>过滤器
通过 template.defaults.imports 可以注册自定义过滤器：
-- -------------------- ---- ------- ----- -------- - ------------------------ ----- ---------- - ---------------------- -- -------- ------------------------------------ - -------------- ------- - ------ ---------------- -------- -- ----- ---- - ----------------- ------------ - ------------------------------- -- - ----- ---------- --- ------------------
更多语法
Art-template 支持更多的语法，请参考官方文档。
结语
Art-template 是一款性能优异的模板引擎，无论是后端渲染还是前端渲染都非常适合。本文介绍了基本的使用方法和一些高级语法，希望能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61649