Jade模板继承答案

【问题标题】：Jade template inheritanceJade模板继承
【发布时间】：2012-01-27 13:53:52
【问题描述】：

Jade 中的 Jade 模板继承快把我逼疯了……

问题是我想将大量代码排除到外部模板中，然后将其包含在内。当我这样做时，一切都会变得糟糕：/

示例代码：

!!!5
html(lang="en")
  head
    title sample title
  body
    header
      div#someDiv
        div#someContent
          section#main

假设我想排除从顶部到div#someContent 的所有内容。那我就有了

include inc/header
          section#main

这种方式代码缩进出错，一切都搞砸了：/你能指出包含模板的正确方向吗？

提前致谢！

【问题讨论】：

标签： node.js express pug

【解决方案1】：

这不是模板继承，而是包含（模板继承是用block和extends关键字）。我确实尝试了您的代码，它对包含的作用是将“section#main”插入“div#someDiv”而不是“div#someContent”。不确定这是否应该被视为一个错误或什么（解析器如何知道添加的内容是否应该在包含文件的最后一项内，或者在同一级别？）。它似乎并不关心“include”语句下的缩进级别。

但是，如果您确实使用模板继承，您可以在包含的末尾放置一个空块：

!!!5
html(lang="en")
    head
        title sample title
    body
        header
            div#someDiv
                div#someContent
                    block content

然后您可以将块附加到您的实际内容文件中：

include inc/header
    block append content
        section#main

这在 DOM 中呈现正常（section#main 在 div#someContent 中）。根据您的视图结构，您最好使用“扩展”而不是“包含+块附加”。详情可以查看Jade's GitHub doc。

【讨论】：

GitHub 文档的链接已失效。