包含 Include ~~ Includes

包含（include）功能允许您把另外的文件内容插入进来。

  1. \\\\\\\\\\ index.pug
  2. //- index.pug
  3. doctype html
  4. html
  5.   include includes/head.pug
  6.   body
  7.     h1 我的网站
  8.     p 欢迎来到我这简陋得不能再简陋的网站。
  9.     include includes/foot.pug
  10. \\\\\\\\\\ includes/head.pug
  11. //- includes/head.pug
  12. head
  13.   title 我的网站
  14.   script(src='/javascripts/jquery.js')
  15.   script(src='/javascripts/app.js')
  16. \\\\\\\\\\ includes/foot.pug
  17. //- includes/foot.pug
  18. footer#footer
  19.   p Copyright (c) foobar

被包含的文件的路径，如果是一个绝对路径（如 include /root.pug），那么前面会加上 options.basedir 选项属性来进行解析。否则，路径应该相对于正在被编译的当前文件。

在 Pug v1 里，如果没有给出文件扩展名，会自动加上 .pug。但是这个特性在 Pug v2 中这是不赞成使用的。

包含纯文本 ~~ Including Plain Text

被包含的如果不是 Pug 文件，那么就只会当作文本内容来引入。

  1. \\\\\\\\\\ index.pug
  2. //- index.pug
  3. doctype html
  4. html
  5.   head
  6.     style
  7.       include style.css
  8.   body
  9.     h1 我的网站
  10.     p 欢迎来到我这简陋得不能再简陋的网站。
  11.     script
  12.       include script.js
  13. \\\\\\\\\\ style.css
  14. /* style.css */
  15. h1 {
  16.   color: red;
  17. }
  18. \\\\\\\\\\ script.js
  19. // script.js
  20. console.log('真了不起！');

使用过滤器包含文本 ~~ Including Filtered Text

您可以合并过滤器和包含语句，从而做到引入文件内容并直接用过滤器处理它们。

  1. \\\\\\\\\\ index.pug <
  2. //- index.pug
  3. doctype html
  4. html
  5.   head
  6.     title 一篇文章
  7.   body
  8.     include:markdown-it article.md
  9. \\\\\\\\\\ article.md <
  10. # article.md
  12. 这是一篇用 Markdown 写的文章。
  13. \\\\\\\\\\ output.html >
  14. <!DOCTYPE html>
  15. <html>
  16.   <head>
  17.     <title>一篇文章</title>
  18.   </head>
  19.   <body>
  20.     <h1>article.md</h1>
  21.     <p>这是一篇用 Markdown 写的文章。</p>
  22.   </body>
  23. </html>