Includes

更新日: 2018-09-10

インクルード

インクルードを使うと、他のファイルの内容を挿入することができます。

//- index.pug
doctype html
html
  include includes/head.pug
  body
    h1 My Site
    p Welcome to my super lame site.
    include includes/foot.pug

//- includes/head.pug
head
  title My Site
  script(src='/javascripts/jquery.js')
  script(src='/javascripts/app.js')

//- includes/foot.pug
footer#footer
  p Copyright (c) foobar

<!DOCTYPE html>
<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>
  <footer id="footer">
    <p>Copyright (c) foobar</p>
  </footer>
</body>

</html>

絶対パス(例：include /root.pug)で指定するには、 options.basedirを使うことで対応できます。その他にも、コンパイル時に該当ファイルを基点にしてパスが解決されます。

拡張子が指定されていない場合は、自動でファイル名に.pugを付与します。

プレーンテキスト

Pug以外のファイルの場合は、そのまま出力されます。

//- index.pug
doctype html
html
  head
    style
      include style.css
  body
    h1 My Site
    p Welcome to my super lame site.
    script
      include script.js

/* style.css */
h1 {
  color: red;
}

// script.js
console.log('You are awesome');

<!DOCTYPE html>
<html>

<head>
  <style>
    /* style.css */
    h1 {
      color: red;
    }
  </style>
</head>

<body>
  <h1>My Site</h1>
  <p>Welcome to my super lame site.</p>
  <script>
    // script.js
    console.log('You are awesome');
  </script>
</body>

</html>

フィルタ

フィルタとインクルードを合わせて使うことができます。フィルタを追加すると、フィルタを適用したものとしてインクルードします。

//- index.pug
doctype html
html
  head
    title An Article
  body
    include:markdown-it article.md

# article.md

This is an article written in markdown.

<!DOCTYPE html>
<html>
  <head>
    <title>An Article</title>
  </head>
  <body>
    <h1>article.md</h1>
    <p>This is an article written in markdown.</p>
  </body>
</html>

このコンテンツはpugドキュメントを翻訳/改変したものです。