HTMLテンプレートエンジンのPugですが、前回記事「HTMLテンプレートエンジンのPugを導入するまで」では導入までの流れと基本的なコーディング方法を紹介しましたが、今回はPugを活用するための便利な機能をまとめていきたいと思います。  

1. 変数定義・ミックスイン

プログラミングでは基本となる変数を扱ったり、Sassなどではおなじみのミックスインも使うことができます。特有の記述方法になりますので慣れるまでは大変ですが、基本的には同じような感じで記述することになります。 変数を定義し出力する

- var variable = 'Hello World!!' 
p #{variable}

// 出力結果
<p>Hello World!!</p>

  ミックスインを定義し出力する

mixin navigation 
nav 
 ul 
  li ナビメニュー1 
  li ナビメニュー2 
  li ナビメニュー3 
+navigation

// 出力結果
<nav> 
 <ul> 
  <li>ナビメニュー1</li>
  <li>ナビメニュー2</li> 
  <li>ナビメニュー3</li>
 </ul>
</nav>

  ミックスインで引数を使用する

mixin navigationItem(arg) 
 li= arg 
nav
 ul 
  +navigationItem('ナビメニュー1') 
  +navigationItem('ナビメニュー2') 
  +navigationItem('ナビメニュー3')

// 出力結果
<nav>
 <ul>
  <li>ナビメニュー1</li>
  <li>ナビメニュー2</li>
  <li>ナビメニュー3</li>
 </ul>
</nav>

   

2. 要素のループ

同じ要素を繰り返す場合はループさせることが可能です。ループさせるにはいくつかの方法がありますが、全く同じものを繰り返す、順番によってテキストを変える、などそれぞれにあった内容を選択するようにしましょう。 for文でループさせる

ul 
 - for (var i = 0; i < 3; i++) { 
  li リスト 
 - }

// 出力結果 
<ul>
 <li>リスト</li>
 <li>リスト</li>
 <li>リスト</li>
</ul>

  while文でループさせる

- var n = 0; 
ul 
 while n < 3 
  li= n++ 

// 出力結果
<ul> 
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>

  each文でループさせる

ul 
 each val in ['one','two','three']
  li= val

// 出力結果
<ul>
 <li>one</li>
 <li>two</li>
 <li>three</li>
</ul>

   

3. 外部ファイルのインクルード

PHPやSSIのように外部ファイルをテンプレートとしてファイル内にインクルードさせることができます。ページの共通部分がたくさんある場合はメンテナンス性が向上します。ファイル先頭にアンダースコアをつける必要はないですが、目印としてつけておくと管理しやすくなります。ここでは下記のファイル構成を想定しています。

index.pug 
_includes
 ┣ _header.pug
 ┣ _main.pug
 ┗ _footer.pug

  ではそれぞれのファイルをみていきます。 【index.pug】

doctype html
html(lang="ja") 
 head
  meta(charset="utf-8")
  link(rel="stylesheet" href="./style.css") 
  title サンプルコーディング 
 body 
  include _includes/_header.pug 
  main 
   p コンテンツ 
  include _includes/_footer.pug

  【_includes/header.pug】

header 
 h1 H1テキスト 
 nav 
  ul 
   li ナビ1 
   li ナビ2 
   li ナビ3

  【_includes/footer.pug】

footer 
 span.copyright COPYRIGHT ALL RIGHT RESERVED.

  これらそれぞれのPugファイルがインクルードされて1つのHTMLになりますと、このような形になります。 【index.html】

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="./style.css">
  <title>サンプルコーディング</title>
 </head>
 <body>
  <header>
   <h1>H1テキスト</h1>
   <nav>
    <ul>
     <li>ナビ1</li>
     <li>ナビ2</li>
     <li>ナビ3</li>
    </ul>
   </nav>
  </header>
  <main>
   <p>コンテンツ</p>
  </main>
  <footer><span class="copyright">COPYRIGHT ALL RIGHT RESERVED.</span></footer>
 </body>
</html>

   

4. 条件分岐

プログラミングではおなじみの条件分岐もif文やcase文のような形式で記述することができます。javascriptの感覚でコーディングできるのでイメージしやすいかと思います。 if文を使った条件分岐

- var value = 'hoge'
if value === 'hoge' 
 p 値は「hoge」です
else
 p 値は「hoge」ではありません

// 出力結果
<p>値は「hoge」です</p>

  case文を使った条件分岐

- var num = 5
case num
 when 0
  p No count
 when 1
  p 1st count
 default
  p #{num} counts
 
// 出力結果
<p>5 counts</p>

 

---

  ここまでくるとよりプログラミングっぽくなってきましたね、このほかにもいろんな機能があるようなのですが、詳しくは公式サイトのドキュメントを見ていただくのが早いかと思います。慣れるとかなりコーディングスピードが上がりそうですね！