logo标签列表

使用Node.js、Handlebars和Express实现模板继承

javascriptnode.jsinheritanceexpresshandlebars.js
7
我刚开始学习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>
4个回答
3

我不确定你所谓的模板“继承”是什么意思，但是Handlebars模板可以包含其他模板，这些模板也可以包含其他模板，因此您可以嵌套到任意深度。

例如，我只使用以下语法：

{{> common_header}}

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

您还可以使用布局（在这里讨论），这允许您拥有类似主模板的模板，不同的内容可以呈现出来。

顺便说一下，有关使用Handlebars实现类似Django的模板继承的讨论在这里和这里，以及Handlebars中的布局扩展在这里，更多使用布局的讨论在这里。

谢谢！我在主贴中添加了一个我想到的继承类型的示例。我会查看其他讨论。 - Ninethousand
2
我认为这个问题是在问如何在Handlebars中实现继承，而不是如何找到其他模板系统。 - jfriend00
谢谢！我会尝试使用Handlebars找到解决办法，如果不行的话我会试试Swig。 - Ninethousand
也许可以尝试这种方法： https://gist.github.com/mmcgahan/9fa045d98c7c122f1c0b看起来比传统的单继承更优雅（基本上你可以为命名块定义内容，然后包含“继承”的模板）。 - Reda El Khattabi
1

任何来到这个问题的人可能想知道：Swig不再受支持，因为他们的GitHub上说。

话虽如此，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}}

请查看上面的文档以获取更多使用方法。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接