HTMLテンプレートのPugを使えば、より効率的なコーディングができるようになります。

基本的な構文が分かったら、Pugの便利な機能の使い方です!

include

include文を使って、他のPugファイルを読み込むことができます。

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

パーツごとに分割して管理できるので便利ですね。

拡張子の.pugは省略できるようです。

Pug以外のファイルもincludeできる

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>

参照:Includes – Pug