Includes

Includes allow you to insert the contents of one Pug file into another.

  1. //- index.pug
  2. doctype html
  3. html
  4.   include includes/head.pug
  5.   body
  6.     h1 My Site
  7.     p Welcome to my super lame site.
  8.     include includes/foot.pug
  1. //- includes/head.pug
  2. head
  3.   title My Site
  4.   script(src='/javascripts/jquery.js')
  5.   script(src='/javascripts/app.js')
  1. //- includes/foot.pug
  2. footer#footer
  3.   p Copyright (c) foobar
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <title>My Site</title>
  6.   <script src="/javascripts/jquery.js"></script>
  7.   <script src="/javascripts/app.js"></script>
  8. </head>
  10. <body>
  11.   <h1>My Site</h1>
  12.   <p>Welcome to my super lame site.</p>
  13.   <footer id="footer">
  14.     <p>Copyright (c) foobar</p>
  15.   </footer>
  16. </body>
  18. </html>

If the path is absolute (e.g., include /root.pug), it is resolved by prepending options.basedir. Otherwise, paths are resolved relative to the current file being compiled.

If no file extension is given, .pug is automatically appended to the file name.

Including Plain Text

Including non-Pug files simply includes their raw text.

  1. //- index.pug
  2. doctype html
  3. html
  4.   head
  5.     style
  6.       include style.css
  7.   body
  8.     h1 My Site
  9.     p Welcome to my super lame site.
  10.     script
  11.       include script.js
  1. /* style.css */
  2. h1 {
  3.   color: red;
  4. }
  1. // script.js
  2. console.log('You are awesome');
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <style>
  6.     /* style.css */
  8.     h1 {
  9.       color: red;
  10.     }
  11.   </style>
  12. </head>
  14. <body>
  15.   <h1>My Site</h1>
  16.   <p>Welcome to my super lame site.</p>
  17.   <script>
  18.     // script.js
  19.     console.log('You are awesome');
  20.   </script>
  21. </body>
  23. </html>

Including Filtered Text

You can combine filters with includes, allowing you to filter things as you include them.

  1. //- index.pug
  2. doctype html
  3. html
  4.   head
  5.     title An Article
  6.   body
  7.     include:markdown-it article.md
  1. # article.md
  3. This is an article written in markdown.
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>An Article</title>
  5.   </head>
  6.   <body>
  7.     <h1>article.md</h1>
  8.     <p>This is an article written in markdown.</p>
  9.   </body>
  10. </html>