昨日(Pugに入門してみる ~環境構築編 その2~)までで,環境構築が完了したので今日は実際に使ってPugを試していきます。
Pugを使ってみる
HTMLタグは < > なしでOK
行の最初に書かれた文字列がHTMLタグになるので独自タグも使用できます。
スペースで区切りるとHTMLの中身が書けます。
Pug
doctype html
html
div
h1 headline1
h2 headline2
p Sentences
test testHTML
<!DOCTYPE html>
<html></html>
<div></div>
<h1>headline1</h1>
<h2>headline2</h2>
<p>Sentences</p>
<test>test</test>インデントで入れ子構造を表現
インデントにタブとスペースが混在するとエラーになってしまうようなので注意が必要です。
個人で使う分には良いですがチームで開発する場合は要注意ですね。
Pug
doctype html
html
head
title Document
body
main
h1 Headline1
p Sentence
h2 Headline2HTML
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<main>
<h1>Headline1
<p>Sentence</p>
</h1>
<h2>Headline2</h2>
</main>
</body>
</html>コメントの付け方
HTMLに出力されるコメントとされないコメントがあります。
ハイフン-がつくと出力されなくなります。
Pug
// 出力されるコメント
div.appear ↑見える
//- 出力されないコメント
div.invisible ↑見えないHTML
<!-- 出力されるコメント-->
<div class="appear">↑見える</div>
<div class="invisible">↑見えない</div>HTML属性は ( ) をつける
複数の属性がある場合は,改行させることも可能です。
クロスサイトスクリプティングなどの攻撃を防ぐために,属性値はデフォルトでエスケープされます。
Pug
a(href="https://bellbellbell.info") bellbellbell.info
//- 複数行指定可
input(
type='checkbox'
name='agreement'
checked
)
// デフォルトでエスケープ
div(escaped="<code>")
// エスケープしない場合
div(unescaped!="<code>")HTML
<a href="https://bellbellbell.info">bellbellbell.info</a>
<input type="checkbox" name="agreement" checked="checked"/>
<!-- デフォルトでエスケープ-->
<div escaped="<code>"></div>
<!-- エスケープしない場合-->
<div unescaped="<code>"></div>ID属性は # ,クラス属性は .
CSSと同じ書き方でID属性とクラス属性を指定出来ます。
タグを指定しない場合はdivタグにID属性,クラス属性が付与されたものが出力されます。
複数のクラスを指定する場合はJavaScriptの配列の形式で書くことが出来ます。
Pug
div#div-id Content
div.div-class Content
// タグを省略した場合
#div-element Content
.div-element Content
// 複数クラスを指定した場合
div(class=["first", "second", "third"]) ContentHTML
<div id="div-id">Content</div>
<div class="div-class">Content</div>
<!-- タグを省略した場合-->
<div id="div-element">Content</div>
<div class="div-element">Content</div>
<!-- 複数クラスを指定した場合-->
<div class="first second third">Content</div>改行させる
インライン要素のタグは1行に出力される仕様になっているっぽいです。
改行するためにはパイプ|を使います。
HTMLへ
Pug
//- インライン要素は1行に出力される
a(href="https://twitter.com/") Twitter
a(href="https://www.google.com/") Google
a(href="https://www.amazon.co.jp/") Amazon
//- 改行する
|
|
a(href="https://twitter.com/") Twitter
|
|
a(href="https://www.google.com/") Google
|
|
a(href="https://www.amazon.co.jp/") Amazon
//- タグの中身を改行したい場合
p
| test
| test
| testHTML
<a href="https://twitter.com/">Twitter</a><a href="https://www.google.com/">Google</a><a href="https://www.amazon.co.jp/">Amazon</a>
<a href="https://twitter.com/">Twitter</a>
<a href="https://www.google.com/">Google</a>
<a href="https://www.amazon.co.jp/">Amazon</a>
<p>
test
test
test
</p>まとめ
基本的な使い方としてはこれくらいでしょうか。
他にも継承できたり,ファイルのインクルード(挿入)が出来たり,条件によって表示するものを変えたりとできるようです。
それではまた明日。
参考ページ
関連記事
- Pugに入門してみる ~Hello, Pug!!編~
- Pugに入門してみる ~環境構築編 その1~
- Pugに入門してみる ~環境構築編 その2~
- Pugに入門してみる ~使い方･基本編~