包含

优质

小牛编辑

127浏览

2023-12-01

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

 ./layout.jade
 ./includes/
   ./head.jade
   ./tail.jade

下面是 layout.jade 的内容:

  html
    include includes/head  
    body
      h1 My Site
      p Welcome to my super amazing site.
      include includes/foot

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

<html>
  <head>
    <title>My Site</title>
    <script src="/javascripts/jquery.js">
    </script><script src="/javascripts/app.js"></script>
  </head>
  <body>
    <h1>My Site</h1>
    <p>Welcome to my super lame site.</p>
    <div id="footer">
      <p>Copyright>(c) foobar</p>
    </div>
  </body>
</html>

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

html
  body
    include content.html

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

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

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

html
  include head
    script(src='/foo.js')
    script(src='/bar.js')
  body
    h1 test