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

问题描述 投票:0回答:4

我刚刚开始使用 Node.js,因此我正在构建非常简单的应用程序来练习基础知识。我试图让一些类似 Django 的模板继承工作起来,但我对如何做到这一点有点茫然。

我知道库“express-handlebars”包含布局的概念,我认为这可能是最好的方法,但乍一看我不知道它是否允许不止一步继承,或者使用它来替换不同的块(我看到了一种通用布局,其中插入其他模板来代替 {{{body}}} 标签,尽管很可能还有更多技巧)。

所以,我的问题是:如何实现多层模板继承(另外,子级将内容插入到不同的单独块中,而不是单个块中)?我正在使用 Node.js、Express 和 Handlebars,但如果后两者无法实现,我不介意尝试其他框架或模板语言。

谢谢!

编辑:

我的意思的伪代码示例:

首先,我们可以有一个通用的外部模板:

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

然后在它下面的另一个(中间模板),替换一些外部的块(并可能添加其他块):

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

最后是一个内部的,它将是从 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}}

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

<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>
javascript node.js inheritance express handlebars.js
4个回答
3
投票

并不是 100% 清楚您对模板的术语“继承”的要求,但车把模板可以包含模板,而这些模板可以包含其他模板,而其他模板又可以包含模板,因此您可以嵌套任意深度。

例如,我只使用语法:

{{> common_header}}

common_header
模板嵌入到当前模板中。
common_header
本身可以在其中嵌入其他模板等等。


您还可以使用布局(在此处讨论),它允许您拥有一个类似主模板的模板,可以将不同的内容渲染到其中。


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



2
投票

Swig 好像有这个功能

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

没亲自使用过,但看起来和 PHP 的 Twig 继承语法一样,所以应该没问题


1
投票

任何遇到这个问题的人可能想了解这一点:正如他们的 github 所说,Swig 不再受支持

也就是说,Nunjucks 看起来是 Javascript 中可扩展模板的唯一替代方案。语法与 Twig (PHP) 非常相似

我希望这有帮助


0
投票

这可以使用 npm 包 handlebar-layouts 来实现。

您可以拥有父布局

main.hbs

<html>
    ...
    <body>
        {{#block "header"}}
            <h1>Hello World</h1>
        {{/block}}
 
        {{#block "main"}}
            <p>Lorem ipsum.</p>
        {{/block}}
 
        {{#block "footer"}}
            <p>&copy; 1999</p>
        {{/block}}
    </body>
</html>

然后你的子布局可以是

child.hbs
:

{{#extend "layout"}}
 
    {{#content "header"}}
        <h1>Goodnight Moon</h1>
    {{/content}}
 
    {{#content "main" mode="append"}}
        <p>Dolor sit amet.</p>
    {{/content}}
 
    {{#content "footer" mode="prepend"}}
        <p>MIT License</p>
    {{/content}}
 
{{/extend}}

请参阅上面的文档了解更多用法。

© www.soinside.com 2019 - 2024. All rights reserved.