简介
ejs 是一种简单、高效、易用的 JavaScript 模板引擎,它可以帮助你以一种优雅、简洁的方式来生成 HTML 标记或任何其他格式的文本。ejs 的语法简单易懂,支持嵌入 JavaScript 逻辑,适合用于各类 Web 应用的开发。
安装
通过 npm 安装:
--- ------- ---
使用
ejs 的使用非常简单,主要分为两步:
第一步:准备模板
ejs 支持嵌入 JavaScript 代码,因此模板文件的后缀名通常为 .ejs
,例如 template.ejs
。在模板文件中,可以使用 <% %>
和 <%= %>
这两种标记来嵌入 JavaScript 代码。
其中,<% %>
表示执行 JavaScript 逻辑,例如:
------ ------ --------- ------------ ------- ------ -- ------- ---- - - ------------- ---- - -- ---- ------------- ------- -------------- ------- ------ ---------------- ------ ------ -- - -- ------- -------
<%= %>
表示输出变量,例如:
------ ------ ---------- ----- ---------- ------- ------ ------- ------- ------- ------- -------
第二步:渲染模板
在 Node.js 中,可以使用 ejs 的 render()
函数来渲染模板。render()
函数接收两个参数:模板文件的路径和数据对象。例如:
----- --- - --------------- ----- -- - -------------- ----- -------- - ------------------------------- --------- ----- ---- - - ------ --- ------ ------ - - ------ ------ ------- -------- -------- -- -- ------- -- - ------ ---- -- --- ----- -------- --- -- ---- ------- -- -- -- ----- ---- - -------------------- ------ ------------------
这段代码加载模板文件 template.ejs
,将数据对象 data
传递给模板并渲染,最终输出 HTML 代码。
高级用法
include
可以使用 include
来引入其他模板。例如:
------ ------ --------- ------------ ------- ------ -- ------- ---------- -- -- ------- ---- - - ------------- ---- - -- -- ------- -------- - ----- -------- - -- -- - -- -- ------- ---------- -- ------- -------
在这个例子中,include
引入了三个模板:header.ejs
、post.ejs
和 footer.ejs
,并将对象 { post: posts[i] }
传递给了 post.ejs
。
layout
使用 layout 可以方便地定义整个网站的布局。例如:
layout.ejs:
--------- ----- ------ ------ ---------- ----- ---------- ------- ------ --- ---- -- ------- -------
header.ejs:
-------- ------- ----- ------- ---------
post.ejs:
--------- ------- ---------- ------- ------ ------------ ------ ----------
index.ejs:
-- ---------------- -- -- ------- ------ -- -- ------- ---- - - ------------- ---- - -- -- ------- ---- - ----- -------- - -- -- - -- -- ------- ------ --
在这个例子中,layout.ejs
定义了网站的整体布局,header.ejs
和 post.ejs
是局部模板,index.ejs
使用了 layout
和 include
分别引入了这些模板。
总结
ejs 是一种非常优秀的 JavaScript 模板引擎,它简单易用、灵活高效,适合用于各类 Web 应用的开发。通过本文的介绍,相信读者已经了解了 ejs 的基本使用方法,并可以借助 ejs 完成自己的 Web 应用开发工作。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600668e1d9381d61a3540936