pug2とは何か?
Angular2を勉強するための基礎知識として、pug2を勉強したのでそれのメモ
htmlファイルを生成するための形式。最初は jade と言っていたが、商標?の関係で名称がpugと成ったようだ。
環境 OSX 10.11.6,Angular2,pug
- node: 6.10.3
- @angular/cli: 1.0.3
- pug version: 2.0.0-rc.1
- pug-cli version: 1.0.0-alpha6
記述ルール
h1 タイトル
上記のpugを変換すると以下のhtmlになる。
<h1>タイトル</h1>
先駆者が情報をまとめているので、参考に。
重要そうなところメインに調査
idとclassの書き方
idは「#」、classは「.」で区切れば属性として展開される。また、タグを省略すると「div」タグとなる。
section#top
.content.inner
<section id="top">
<div class="content inner"></div>
</section>
改行せずに要素の入れ子をつくる
pugは、「: ＋ 半角スペース」で横並びに書いても、要素の入れ子を作れる。
ul
li: a(href="#") Top
li: a(href="#") About
li: a(href="#"): span Links
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">About</a></li>
<li><a href="#"><span>Contacts</span></a></li>
</ui>
コメント
pugのコメントの書き方は2種類あり、書き出したHTML内にコメントを残す方法と残さない方法。
// HTMLで書き出されるコメント
//- HTMLで書き出されないコメント
include機能
記述の一部をパーツ化し、includeで必要な箇所に読み込むことが出来る。
拡張子「.pug」を省略すると「.pug」付きのファイル名で読み込む。[.jade]では読み込んでくれないようだ。
変数の利用
「- var 変数名 = 変数の中身」で定義できる。
- 変数の展開は、include展開を行った後評価されるようで、以下のような使い方も出来た。
- var title = "サンプルソース";
doctype html
html(lang="ja")
include header.pug
body
h1 title
head
meta(charset="utf-8")
style(src="css/style.css")
title #{title}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style src="css/style.css"></style>
<title>サンプルソース</title>
</head>
<body>
<h1>title</h1>
</body>
</html>
forループ文
section#top
.content.top
- for (var i = 0; i < 3; i++) {
.block
h2(class="#{i}") 見出し
p テキストテキスト#{i}
a(href="#") ボタン
- }
<section id="top">
<div class="content top"></div>
<div class="block">
<h2 class="#{i}">見出し</h2>
<p>テキストテキスト0</p><a href="#">ボタン</a>
</div>
<div class="block">
<h2 class="#{i}">見出し</h2>
<p>テキストテキスト1</p><a href="#">ボタン</a>
</div>
<div class="block">
<h2 class="#{i}">見出し</h2>
<p>テキストテキスト2</p><a href="#">ボタン</a>
</div>
</section>
参考にしたページでは、classの変数は展開されていたが、やってみると展開されなかった。
pug-cliのバージョンにより動きが変わるのか?
jadeがpugになって変わった所のメモに記載があった。仕様が変わったようだ。
行先頭の - なしでIteration命令(each,while)が使えるようだ。ただ、forがeachの別名(機能はeachと同じ)になったのは、少し不便。
一定回数のループは、whileを利用するか、下記のサンプルのようにArrayのキー不自然に利用するしかなくなる。
section#top
.content.top
each idx in [ ...Array(3).keys() ]
.block
h2(class='test'+idx) 見出し
p テキストテキスト #{idx}
a(href="#") ボタン
<section id="top">
<div class="content top"></div>
<div class="block">
<h2 class="test0">見出し</h2>
<p>テキストテキスト 0</p><a href="#">ボタン</a>
</div>
<div class="block">
<h2 class="test1">見出し</h2>
<p>テキストテキスト 1</p><a href="#">ボタン</a>
</div>
<div class="block">
<h2 class="test2">見出し</h2>
<p>テキストテキスト 2</p><a href="#">ボタン</a>
</div>
</section>
一応、期待した動きになったが、変数(idx)へのアクセスルールがよく理解できない。idx でアクセスしたり、#{idx}でアクセスしたり。
eachループ文
ul
each val in ["Top", "About", "Works", "Contact"]
li: a(href="#")= val
<ul>
<li><a href="#">Top</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Contact</a></li>
mixin機能
mixin 関数のような機能を実現できる。
mixin title-block(title, date)
h1= title
p= date || new Date
mixin title-block("Hello, World!", "Tue Jan 14 2014 00:00:00 GMT+0900 (JST)")
mixin title-block("Hello, World!")
こ記述方法では、以下のエラーとなる。
Error: d.pug:5:1
3| p= date || new Date
4|
> 5| mixin title-block("Hello, World!", "Tue Jan 14 2014 00:00:00 GMT+0900 (JST)")
-------^
6| mixin title-block("Hello, World!")
7|
以下のように + での指定のみになったようだ。jadeがpugになって変わった所のメモでも記載があるが、jadeからpugに変わったときの影響のようだ。
mixin title-block(title, date)
h1= title
p= date || new Date
+title-block("Hello, World!", "Tue Jan 14 2014 00:00:00 GMT+0900 (JST)")
+title-block("Hello, World!")
<h1>Hello, World!</h1>
<p>Tue Jan 14 2014 00:00:00 GMT+0900 (JST)</p>
<h1>Hello, World!</h1>
<p>Sun May 14 2017 10:44:35 GMT+0900 (JST)</p>
mixin機能とinclude機能を組み合わせ
include header2
doctype html
html(lang="ja")
+header-block("タイトル")
body
h1 title
mixin header-block(ti)
head
meta(charset="utf-8")
style(src="css/style.css")
title ti
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8"/>
<style src="css/style.css"></style>
<title>ti</title>
</head>
<body>
<h1>title</h1>
</body>
</html>
参考
jadeがpugになって変わった所のメモ
pug Getting Started
Migrating to Pug 2
Iteration to Pug 2