Pug - にほんご。

Includes

インクルード

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

//- 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>

© 2017 pugjs.org Released under the MIT license

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