上篇在 Egg 中已经配置好了 EJS 模板,本文学习一下 EJS 模板引擎的基本使用语法。如果你有 PHP 开发经验,这些语法就非常简单了,因为跟 PHP 的模板语法基本一样。
EJS 模板中显示 controller 返回的数据
在 Controller 中我们有一些动态的数据,需要在 EJS 模板中进行显示。这时候可以使用render()第二个参数,第二个参数可以传递 JavaScript 中的对象,也就是说你可以任意的传递各种形式的参数过去。
我们先到/app/controller/mybj.js文件下面。在index()方法里,使用第二个render()的参数,来传递参数。
async index() {
const { ctx } = this;
await ctx.render(
'mybj.html',{
id:2021,
name:'小红',
age: 18,
skill:'泰式按摩'
})
}
有了这些数据后,就可以在/controller/view/jspang.html文件下使用这些参数了。默认使用的方法是<%= 参数 %> 。
<!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>Document</title>
</head>
<body>
<h1>欢迎来到红浪漫~~</h1>
<h2>现在由<%= id %>号技师,为您服务!</h2>
<h3>您好,我是<%= name %>,今年<%= age %>岁,专业技能是<%= skill %></h3>
</body>
</html>
通过这种方式,在 EJS 模板中就可以使用controller传递过来的变量了。
效果如下:

修改默认分隔符符号
其实很多前端小伙伴是不喜欢用这种<%%>的形式展示数据的,这很不前端。EJS 也为我们提供了配置型方法,你可以根据你的喜好配置这个配置符。
打开/config/config.default.js文件,然后修改config.ejs选项:
config.ejs={
delimiter: "$"
},
然后再回到mybj.html文件,用全部地替换的方法,把%换车$,这样就更换成功了。建议这个还是在项目初级就规范好,不要随意改动。
EJS 还提供了单独修改某个修饰符,但这里不建议这样修改,会让项目变的混乱不堪,也就是render的第三个参数。
总结
本文我们主要学习了 EJS 模板引擎的基本使用方法,还学习了配置 EJS 的配置分隔符的方法。其实 EJS 是完全可定制的,有很多地方都可以根据需要自行修改。但是个人不建议作太多的个性化配置,这会给团队和项目带来混乱和跟多的学习成本。