Pugを使えばhtmlマークアップを高速化でき、メンテナンスもしやすくなります。
include文を使うと、他のpugファイルはもちろん、javascriptやcssといった他の形式のファイルも読み込めます。ファイルを分割管理して、メンテナンスしやすくするのに便利です。
mixinでブロックをパーツ化して流用すればコード量を少なく、見通しを良くすることができます。
eachはjavascript感覚でかなり応用の利く繰り返し処理が可能、シンプルにループを回すだけならwhileですね。
それぞれの基本的な使い方を以下の順番で説明していきます。
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>
mixin
基本の形は、以下の通り。mixinを宣言したら、「+[mixin名]」で使用します。
mixin list
ul
li item1
li item2
li item3
+list
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
引数
引数を取ることができます。デフォルト値を設定することもできます。
mixin fruit(name, cat='fruit')
li(class=cat)= name
ul
+fruit('orange')
+fruit('banana')
+fruit('cabbage', 'vegetable')
<ul>
<li class="fruit">orange</li>
<li class="fruit">banana</li>
<li class="vegetable">cabbage</li>
</ul>
ブロック
mixinを宣言するときに「block」と書いた部分に、任意のブロックを入れることができます。
mixin article(title)
.article
.article-wrapper
h1= title
if block
block
else
p No content provided
+article('Hello world')
+article('Hello world')
p This is my
p Amazing article
<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>No content provided</p>
</div>
</div>
<div class="article">
<div class="article-wrapper">
<h1>Hello world</h1>
<p>This is my</p>
<p>Amazing article</p>
</div>
</div>
Rest Arguments
不特定数の引数を取って繰り返し処理することができます。
mixin list(id, ...items)
ul(id=id)
each item in items
li= item
+list('my-list', 'orange', 'banana', 'cabbage', 'cucumber')
<ul id="my-list">
<li>orange</li>
<li>banana</li>
<li>cabbage</li>
<li>cucumber</li>
</ul
繰り返し処理
JavaScriptの「for」ももちろん使えますが、ここでは「each」と「while」の2つのメソッドを使って繰り返し処理する方法をご紹介します。
each
まずは最も単純な構文から。
ul
each val in [1, 2, 3]
li= val
<ul> <li>1</li> <li>2</li> <li>3</li> </ul>
インデックスを使う
ul
each val, index in ['zero', 'one', 'two']
li= index + ': ' + val
<ul> <li>0: zero</li> <li>1: one</li> <li>2: two</li> </ul>
インデックスにキーをあてる
オブジェクトのキーをインデックスとして扱います。
ul
each val, index in {1:'one',2:'two',3:'three'}
li= index + ': ' + val
<ul> <li>1: one</li> <li>2: two</li> <li>3: three</li> </ul>
JavaScriptと併せて使う
eachに使う配列やオブジェクトはただのJavaScriptなので、変数はもちろん、関数とかを入れたって大丈夫です。
- var values = [];
ul
each val in values.length ? values : ['There are no values']
li= val
<ul> <li>There are no values</li> </ul>
「else」で例外処理する
繰り返し処理する変数に値が入っていないときに実行するブロックを追加できます。
- var values = [];
ul
each val in values
li= val
else
li There are no values
<ul> <li>There are no values</li> </ul>
while
回数を回すだけのループなら「while」で。
- var n = 0;
ul
while n < 4
li= n++
<ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> </ul>
コメント