包含

Includes 允许你静态包含一段Jade, 或者别的存放在单个文件中的东西比如css, html。 非常常见的例子是包含头部和页脚。 假设我们有一个下面目录结构的文件夹:

  1. ./layout.jade
  2. ./includes/
  3. ./head.jade
  4. ./tail.jade

下面是 layout.jade 的内容:

  1. html
  2. include includes/head
  3. body
  4. h1 My Site
  5. p Welcome to my super amazing site.
  6. include includes/foot

这两个包含 includes/headincludes/foot 都会读取相对于给 layout.jade 参数filename 的路径的文件, 这是一个绝对路径,不用担心Express帮你搞定这些了。Include 会解析这些文件,并且插入到已经生成的语法树中,然后渲染为你期待的内容:

  1. <html>
  2. <head>
  3. <title>My Site</title>
  4. <script src="/javascripts/jquery.js">
  5. </script><script src="/javascripts/app.js"></script>
  6. </head>
  7. <body>
  8. <h1>My Site</h1>
  9. <p>Welcome to my super lame site.</p>
  10. <div id="footer">
  11. <p>Copyright>(c) foobar</p>
  12. </div>
  13. </body>
  14. </html>

前面已经提到,include 可以包含比如html或者css这样的内容。给定一个扩展名后,Jade不会把这个文件当作一个Jade源代码,并且会把它当作一个普通文本包含进来:

  1. html
  2. body
  3. include content.html

Include 也可以接受块内容,给定的块将会附加到包含文件 最后 的块里。 举个例子,head.jade 包含下面的内容:

  1. head
  2. script(src='/jquery.js')

我们可以像下面给include head添加内容, 这里是添加两个脚本.

  1. html
  2. include head
  3. script(src='/foo.js')
  4. script(src='/bar.js')
  5. body
  6. h1 test