使用Node.js，Handlebars和Express进行模板继承

I'm just getting started with Node.js, so I'm building very simple applications in order to practice the basics. I was trying to get some Django-like template inheritance working, but I'm at a bit of a loss on how to do it.

我刚刚开始使用Node.js，所以我正在构建非常简单的应用程序以实践基础知识。我试图让一些类似Django的模板继承工作，但我对如何做它有点不知所措。

I understand that the library "express-handlebars" includes the concept of layouts, and I thought that might be the best way to go about it, but at first glance I don't know if it allows more than one step of inheritance, or using it for replacing different blocks (I saw one general layout where the other templates are inserted in place of the {{{body}}} tag, although there may very well be more tricks to it).

据我所知，图书馆“快递把手”包括布局的概念，我认为这可能是最好的方法，但乍一看我不知道它是否允许不止一步的继承，或者使用它来替换不同的块（我看到了插入其他模板的一般布局代替{{{body}}}标签，尽管可能有更多的技巧）。

So, my question: how would one implement a multi-layered template inheritance (also, with children inserting content into different separate blocks, instead of a single one)? I'm using Node.js, Express and handlebars, but if it's not possible with the latter two I don't mind trying out other frameworks or templating languages.

所以，我的问题是：如何实现多层模板继承（同样，将子内容插入不同的单独块，而不是单个块）？我正在使用Node.js，Express和把手，但如果后两者不可能，我不介意尝试其他框架或模板语言。

Thanks!

谢谢！

Edit:

编辑：

A pseudo-coded example of what I mean:

我所说的伪编码示例：

First, we could have a common outer template:

首先，我们可以有一个共同的外部模板：

<html>
    <head></head>
    <body>
        <h1> Main Title </h1>
        <h2> {{section name block}} </h2>
        <h3> {{subsection name block}} </h3>
        {{content block}}
    </body>
</html>

then another one under it (middle template), substituting some of the outer one's blocks (and potentially adding other ones):

然后在它下面的另一个（中间模板），替换一些外部的块（并可能添加其他块）：

{{inheriting from outer template}}
{{section name block}} Section Three {{/block}}

and finally an inner one, which would be the one to call from the javascript code:

最后是一个内部的，可以从javascript代码调用：

{{inheriting from middle template}}
{{subsection name block}} Subsection Two {{/block}}
{{content block}}
    <p>This is the content of Section Three, Subsection Two.</p>
{{/block}}

The result when processing the inner template would be:

处理内部模板时的结果是：

<html>
    <head></head>
    <body>
        <h1> Main Title </h1>
        <h2> Section Three </h2>
        <h3> Subsection Two </h3>
        <p>This is the content of Section Three, Subsection Two.</p>
    </body>
</html>

3 个解决方案

#1

It not 100% clear what you're asking for with the term "inheritance" for templates, but handlebars templates can include templates which can include other templates which can include templates so you can nest as deep as you want.

它不是100％清楚你要求的模板术语“继承”，但是把手模板可以包括模板，其中可以包含其他模板，其中可以包含模板，以便您可以根据需要进行嵌套。

For example, I just use the syntax:

例如，我只使用语法：

{{> common_header}}

to embed the common_header template inside of the current template. That common_header could itself embed other templates in it and so on.

将common_header模板嵌入当前模板中。 common_header本身可以嵌入其他模板，依此类推。

You can also use layouts (discussed here) which allows you to have a master-like template which different content can be rendered into.

您还可以使用布局（此处讨论），它允许您拥有类似于母版的模板，可以将不同的内容呈现到该模板中。

FYI, there's a discussion of a Django-like template inheritance using Handlebars here and here and a layouts extension for Handlebars here and more discussion of using layouts in Handlebars here.

仅供参考，我在这里和这里讨论了使用Handlebars的类似Django的模板继承，以及Handlebars的布局扩展，以及更多关于在Handlebars中使用布局的讨论。

#2

Swig seems to have that functionality

Swig似乎有这个功能

http://paularmstrong.github.io/swig/docs/#inheritance

Haven't personally used it but looks like the same inheritance syntax as PHP's Twig, so should be OK

没有亲自使用它，但看起来像PHP的Twig一样的继承语法，所以应该没问题

#3

Anyone landing on this question may want to know about this : Swig is no longer supported as their github says

任何登陆此问题的人都可能想知道这一点：Swig不再受到支持，因为他们的github说

That said, Nunjucks looks like the only alternative out there for extensible templating in Javascript. The syntax is very similar to the one of Twig (PHP)

也就是说，Nunjucks看起来是Javascript中可扩展模板的唯一选择。语法非常类似于Twig（PHP）

I hope this helps

我希望这有帮助

#1