Jade 中扩展和包含的区别答案

【问题标题】：difference between extend and include in JadeJade 中扩展和包含的区别
【发布时间】：2016-09-01 04:46:05
【问题描述】：

我无法弄清楚extend 和include 之间的区别我很困惑。对我来说extend可以帮你扩展模板， include 只会包含它。我说的对吗？

【问题讨论】：

标签： pug

【解决方案1】：

基本上你是对的，但是extend 关键字让你努力使用块语句，你可以从模板文件中的扩展布局覆盖默认块，甚至扩展这个布局文件。模板中关键字include 包含的所有继承文件也可以使用此块语句。

这里是一个简单的例子

layout.jade

doctype html
html(lang='de')
  head
    // Default meta block
    block meta
      meta(charset="utf-8")
      title This is the pagetitle

    // Default block for css assets
    block styles
      style.
        .somecss {
        }
  body
    // Default block for the navigation
    block navigation
      ul.my_default_nav
        li: a(href="template.html") Navitem

    // Default content block
    block main

    // Default footer block
    block footer
      p Some copyright notes

template.jade

extend layout.jade

block meta
  title This block overrides the default block statement

block footer
  p You can place your block somewhere in your template, during 
    | compile jade knows where to place it.

block main
  div
    p Here you can place your default content it also will be
      | replaced.

所有的结果：

<!DOCTYPE html>
<html lang="de">
  <head>
    <!-- Default meta block-->
    <title>This block overrides the default block statement</title>
    <!-- Default block for css assets-->
    <style>
      .somecss {
      }
    </style>
  </head>
  <body>
    <!-- Default block for the navigation-->
    <ul class="my_default_nav">
      <li><a href="template.html">Navitem</a></li>
    </ul>
    <!-- Default content block-->
    <div>
      <p>
        Here you can place your default content it also will bereplaced.</p>
    </div>
    <!-- Default footer block-->
    <p>
      You can place your block somewhere in your template, during compile jade knows where to place it.</p>
  </body>
</html>

【讨论】：