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

【问题标题】：Template inheritance with Node.js, Handlebars and Express使用 Node.js、Handlebars 和 Express 进行模板继承
【发布时间】：2023-03-26 22:48:01
【问题描述】：

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

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

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

谢谢！

编辑：

我的意思的伪代码示例：

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

<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

【解决方案1】：

对于模板的“继承”一词，您所要求的不是 100% 清楚，但车把模板可以包含模板，这些模板可以包含其他模板，这些模板可以包含模板，因此您可以嵌套任意深度。

例如，我只是使用语法：

{{> common_header}}

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

您还可以使用布局（讨论过here），它允许您拥有一个类似大师的模板，可以将不同的内容呈现到其中。

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

【讨论】：

谢谢！我在主帖中添加了一个我正在考虑的继承类型的示例。我会检查其他讨论。

【解决方案2】：

Swig 似乎有这个功能

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

个人没用过，不过看起来跟PHP的Twig继承语法一样，应该没问题

【讨论】：

我的问题是关于如何在 Handlebars 中进行继承，而不是如何找到其他模板系统。
谢谢！我会尝试找到使用 Handlebars 的方法，但如果我做不到，我会尝试 Swig。
也许可以试试这个方法：gist.github.com/mmcgahan/9fa045d98c7c122f1c0b 似乎比传统的单继承更优雅（基本上你为命名块定义内容然后包括“继承”模板）

【解决方案3】：

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

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

希望对你有帮助

【讨论】：