Jade 中 include 与 block 的区别

Jade 是一款简洁优美而且易于上手的模板引擎，它允许开发者用极为简单的语法来快速构建 HTML 页面。在 Jade 中，我们可以使用 include 和 block 来组织页面结构。

include

include 是将一个外部文件嵌入到当前 Jade 文件中，例如：

html
  head
    title My Page
    include header.jade
  body
    p This is my page.

代码中，header.jade 是在 head 标签内引入的一个外部文件，它的内容将被插入到 head 标签下方。

include 的主要作用是重用代码。例如，在多个不同的页面中都需要使用相同的导航栏时，可以将导航栏抽离成一个独立的文件，然后使用 include 在需要的页面中引用即可。

block

block 是在 Jade 中定义一个可被覆盖的占位符。例如：

html
  head
    title 
      block title
        My Page
  body
    block content

代码中，title 标签中的文本被包含在了一个 block 中。这个 block 可以被子模板覆盖，例如：

extends layout.jade

block title
  My Super Awesome Page!

block content
  p This is the content of my super awesome page.

代码中，layout.jade 是一个基础模板，它包含了上述代码中的 html 结构。子模板通过 extends 继承了基础模板，并在其中覆盖了 block 中的内容。

block 的主要作用是允许子模板对基础模板进行个性化定制。

区别

include 和 block 在 Jade 中都可以用来组织页面结构，但它们的作用有所不同。

• include 用于重用代码，将外部文件嵌入到当前文件中；
• block 用于定义可被覆盖的占位符，让子模板可以对基础模板进行个性化定制。

需要注意的是，在使用 block 时，必须先定义一个块名（如上例中的 title 和 content），否则会出现编译错误。

总结

Jade 中的 include 和 block 都是非常实用的功能，熟练掌握这两种语法可以帮助我们更好地组织和管理页面结构。在实际开发中，我们应该根据具体场景选择合适的方式来组织和重用代码。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31031