默认地,EJS 并不支持模板布局(也叫“模板继承”),但 sfn 框架提供了这个能力。
如果你想要在目标模板中使用布局模板,只需要加上一句注释,格式为
<!-- layout: filename -->
,到目标模板的第一行第一列,就像这样:
<!-- layout: ./layout -->
<p>
This is the target template.
</p>
而在布局模板中,使用变量 $LayoutContents
来附上目标模板渲染的内容,就像这样(使用
标签 <%-
而不是 <%=
):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<%- $LayoutContents %>
</body>
</html>
然后当目标模板被渲染时,他就会输出像下面这样的内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>
This is contents in a layout.
</p>
</body>
</html>
这只是 sfn 框架提供的一个小技巧,如果你使用其它的框架,它将会毫无作用,但
你依旧可以使用 include()
语句来加载相关的模板,它已经适合了大多数情况。
如果你想要看看 sfn 框架是如何处理模板布局的,请转到 https://github.com/Hyurl/sfn-ejs-engine/blob/master/src/index.ts
sfn 框架是我用 TypeScript 编写的一个简洁框架,它提供可非常优雅的方式来书写程序逻辑,大家可以到 https://github.com/Hyurl/sfn 查看其源码,或者到 https://hyurl.github.io/sfn/ 查看开发文档。
除此之外,我也在编写自己的模板引擎,虽然大家可能会说世面上已经存在了很多这样的模板引擎,但是作为我学习过程中的一环,我觉得它还是很有意义的, 并且新引擎也将会带来很多不同于其他引擎的风格(就像 sfn 框架)。
因为要开发新模板引擎,所以 sfn 框架的测试和修理工作可能会被延误,Sorry。