Jade 是一款简洁优美而且易于上手的模板引擎，它允许开发者用极为简单的语法来快速构建 HTML 页面。在 Jade 中，我们可以使用 include 和 block 来组织页面结构。
include
include 是将一个外部文件嵌入到当前 Jade 文件中，例如：
----
----
----- -- ----
------- -----------
----
- ---- -- -- -----代码中，header.jade 是在 head 标签内引入的一个外部文件，它的内容将被插入到 head 标签下方。
include 的主要作用是重用代码。例如，在多个不同的页面中都需要使用相同的导航栏时，可以将导航栏抽离成一个独立的文件，然后使用 include 在需要的页面中引用即可。
block
block 是在 Jade 中定义一个可被覆盖的占位符。例如：
----
----
-----
----- -----
-- ----
----
----- -------代码中，title 标签中的文本被包含在了一个 block 中。这个 block 可以被子模板覆盖，例如：
------- ----------- ----- ----- -- ----- ------- ----- ----- ------- - ---- -- --- ------- -- -- ----- ------- -----
代码中，layout.jade 是一个基础模板，它包含了上述代码中的 html 结构。子模板通过 extends 继承了基础模板，并在其中覆盖了 block 中的内容。
block 的主要作用是允许子模板对基础模板进行个性化定制。
区别
include 和 block 在 Jade 中都可以用来组织页面结构，但它们的作用有所不同。
- include 用于重用代码，将外部文件嵌入到当前文件中；
- block 用于定义可被覆盖的占位符，让子模板可以对基础模板进行个性化定制。
需要注意的是，在使用 block 时，必须先定义一个块名（如上例中的 title 和 content），否则会出现编译错误。
总结
Jade 中的 include 和 block 都是非常实用的功能，熟练掌握这两种语法可以帮助我们更好地组织和管理页面结构。在实际开发中，我们应该根据具体场景选择合适的方式来组织和重用代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31031