Pug(jade)は独特の記法なので、最初ちょっと覚えるの大変ですよね。
これだけ覚えれば、普通のHTML書くのに困らない、
基本のコードをpickupしてまとめました。
はじめの一歩
- <>不要、閉じタグ不要
- タグの後ろにスペースをいれてタグ内テキスト
▼Pug(Jade)
p ほげほげ
▽HTML
<P>ほげほげ</P>
ネスト（入れ子）
- 改行＋インデントで要素の入れ子を作る
▼Pug(Jade)
ul
li アイテム
li アイテム
▽HTML
<ul>
<li>アイテム</li>
<li>アイテム</li>
</ul>
タグ内でテキストを改行する
- 「 | 」を使う
▼Pug(Jade)
p 吾輩は猫である。
br
| 名前はまだない。
br
| どこで生れたかとんと見当けんとうがつかぬ。
▽HTML
<p>吾輩は猫である。<br>
名前はまだない。<br>
どこで生れたかとんと見当けんとうがつかぬ。
</p>
idやclassをつける
- id=""不要、class=""不要
- タグのすぐ後ろに、「#id名」、「.class名」でつける
- divは省略できる
▼Pug(Jade)
#box
h1.title タイトル
p.lead ほげほげ
▽HTML
<div id="box">
<h1 class="title">タイトル</h1>
<p class="lead">ほげほげ</p>
</div>
属性の書き方
- タグの後ろ（）をつけて、内に書きます。
▼Pug(Jade)
a(href="https://google.com" target="blank") ほげリンク
img(src="./sample.img")
▽HTML
<a href="https://google.com" target="blank">ほげリンク</a>
<img src="./sample.img">
ネスト（入れ子）する時、改行とインデントを省略する
- タグの後ろにスペースを入れて「：」を入れるとネストできる
- navを作る時に便利
- ２つ以上も使用可能(ただし、テキストの後には「：」は使えないので注意)
▼Pug(Jade)
ul
li: a(href="#")
li: a(href="#"): span ほげ
li: a(href="#"): img(src="")
▽HTML
<ul>
<li><a href="#"></a></li>
<li><a href="#"><span>ほげ</span></a></li>
<li><a href="#"><img src=""></a></li>
</ul>
コメント
- ２種類あり
- コンパイルした後、HTMLに残すもの
- コンパイルした後、HTMLに残さないもの（Pugでのみ表示）
▼Pug(Jade)
// コンパイルした後、HTMLに残すもの
//- コンパイルした後、HTMLに残さないもの（Pugでのみ表示）
▽HTML
<!-- コンパイルした後、HTMLに残すもの-->
ジェネレータを使う
やっぱり慣れなくてストレス溜まるー！って方はまずはこちらで感覚をつかむのをオススメします。
HTML -> Pug(Jade)を自動変換サイト
HTML to Jade converter
http://html2jade.aaron-powell.com/
Pug(Jade) -> HTML 自動変換サイト
Online Jade Template Editor
http://aramboyajyan.github.io/online-jade-template-editor/