来自多个子模板的模板inheritance

所以我有一个网站，它的结构是由各种模板组成的：

- index //the html skeleton, with script tags and css links - header //the header of the page - topnavigation //contains the main nav with the menu - content //this is where the dynamic content will be changed for different pages - footer //the footer 

现在，我知道整合的唯一方法是：

 res.render(content); content -> inherits footer footer -> inherits topnavigation topnavigation-> inherits header header -> inherits index 

我认为如果我能有这样的东西，它会更加实际和容易维护：

 res.render(content); content -> inherits dochead index -> includes header + topnnavigation + footer 

• 我错了吗？
• 如果我是对的，我该怎么做？

谢谢

Answer 1

典型的extends设置更像这样：（对于一个工作示例，您可以看到Swig文档如何在这里设置其布局： https : //github.com/paularmstrong/swig/tree/master/docs/layouts ）

• 具有块的skeleton.html html框架：
  • {% block html %}
  • {% block css %}
  • {% block js %}
  • {% block body %}
• base.html使用块/子块扩展skeleton.html ，基础布局：
  • {% block body %}
    • {% block header %}包含一些默认的标题内容。
      • {% block nav %}包含主要的导航内容。
    • {% block content %}空
    • {% block footer %}包括版权等
• index.html扩展了base.html
  • {% block nav %} （用于导航的内容，否则只要让base.html呈现其导航内容
  • 您也可以根据需要覆盖base.html设置的其他任何块。 如果您发现自己需要对模板进行更多的控制，请考虑创build另一个扩展base.html子布局，然后再扩展index.html 。