jade include使用笔记

jade include

jade的include关键字，允许你在一个文件中引入（包含）另一个文件的内容。include的使用存在两种情况，

一种是直接引入静态文本（被引入的文件不是".jade"后缀）：

文件A.txt:

<button type="button" class="btn btn-default">首页</button>

在文件B.jade中引入A.txt（假设A和B在同级目录）:

div(class="btn-group")
  include A.txt

这样A中文文本将被直接引入到B中。

另一种是引入另一个jade文件，如A.jade，这样A中的内容会先被编译成html文件，再引入编译后的html文本，

这种情况下，就要注意代码的布局了，尤其两个文件各自的缩进处理，会影响编译后的html代码格式，甚至报错。

如A.jade中的代码：

doctype html
html
  head
    link(rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css")

B.jade中的代码：

include A
  body
    div(class="container")

这样编译完后，body标签将被包含进head标签里，导致html格式错误。如果把B.jade的内容改成：

include A
body
  div(class="container")

又将导致body标签和html标签同级。这里只是一个极端的例子。

这种布局相关的，最好好事用jade的继承机制block和extends来处理，不要用include。