EJS 模板引擎添加布局模板支持,看 SFN 框架是怎么做的
发布于 4 年前 作者 Hyurl 2445 次浏览 来自 分享

默认地,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。

2 回复

怎么只有9个commit

@chapgaga 我才刚发出来

回到顶部