javascript - 从多个子模板继承模板

Question

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

- 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 带有 block 的 html 骨架:
  • {% block html %}
  • {% block css %}
  • {% block js %}
  • {% block body %}
• base.html 扩展 skeleton.html，带有 block /子 block 的基本布局:
  • {% block body %}
    • {% block header %} 包括一些默认的头部内容。
      • {% block nav %} 包括主要导航内容。
    • {% block content %} 空
    • {% block footer %}包括版权等
• index.html 扩展 base.html
  • {% block nav %}(潜在的导航内容，否则只让 base.html 呈现其导航内容
  • 您还可以根据需要覆盖在 base.html 中设置的任何其他 block 。如果您发现自己需要对模板进行更多控制，请考虑创建另一个扩展 base.html 的子布局，然后让 index.html 扩展它。