Template inheritance

jade支持通过关键字block和extends来实现模板继承。

比如，在layout.jade写上如下代码

html

  head

    title My Site - #{title}

    block scripts

      script(src='/jquery.js')

  body

    block content

      p Nothing

    block foot

      #footer

        p some footer content

中间的block content代表块，content表示块名字。

另一个index.jade文件中可以继承layout.jade文件。

extends ./layout.jade

block scripts

  script(src='/jquery.js')

block content

  h1= title

  each pet in pets

    include pet

在index.jade文件中，父模板中的block content块将在子模板中被重写（包括块内内容），即编译index.jade生成的html文件中，content块中将不含有<p>Nothing</p>这部分代码。

这是一个递归的过程。

extends ...表示从layout.jade文件中将所有代码已经继承过来了。

extends后可以加需要继承文件的相对路径，若在同一文件下，用不含后缀名的文件名即可。

Append block、Prepend block

对于之前的layout.jade代码中的block scripts块，若想在index.jade中的block scripts块中继续添加script(src='/jquery.js')这条语句，即生成的index.html中block scripts中包含两条script语句，那么只需将index.jade中block scripts改为block append scripts或block prepend scripts即可。如下：

block append scripts

  script(src='/jquery.js')

或者如下

block prepend scripts

  script(src='/jquery.js')

这两种方法的区别在于，prepend会先编译子模板块内的内容再编译父模板块内的内容，append则相反。