Pug設定後の、基本的な記述方法についてまとめてみます。
タグ
行頭のテキストでタグ名を指定します。
Pug
p
これをHTMLにコンパイルすると、以下のように出力されます。
HTML
<p></p>
タグにテキストを含めたい場合、タグ名の後に半角スペースを空けてテキストを記述します。
Pug
p テスト
HTML
<p>テスト</p>
インデントはタグのネストになります。
半角スペースとタブが混ざるとコンパイルエラーになるようなので、どちらかに統一するようにして下さい。
Pug
ul li リストA li リストB li リストC
HTML
<ul> <li>リストA</li> <li>リストB</li> <li>リストC</li> </ul>
インデントを深くしたくない場合、「: 」で同じ行に続けて記述することもできます。
Pug
ul li: a メニューA li: span メニューB(現在地) li: a メニューC
HTML
<ul> <li><a>メニューA</a></li> <li><span>メニューB(現在地)</span></li> <li><a>メニューC</a></li> </ul>
Pug上でテキストの改行を行いたい場合、バーティカルバー(|)を先頭に付けます。
Pug
p | テストの文章です。 | Pug上では行を分けてみます。
HTML
<p> テストの文章です。 Pug上では行を分けてみます。 </p>
HTMLにJavaScriptを直接記述したい場合などでも、バーティカルバーを先頭に付けて対応できます。
Pug
script
| var str = 'hoge';
| if(str === 'hoge') {
| console.log('hoge');
| }
HTML
<script>
var str = 'hoge';
if(str === 'hoge') {
console.log('hoge');
}
</script>
ただ、上記方法だと記述しにくいので、タグ名の直後に「.」を付ける方法でも対応可能です。
Pug
script.
var str = 'hoge';
if(str === 'hoge') {
console.log('hoge');
}
HTML
<script>
var str = 'hoge';
if(str === 'hoge') {
console.log('hoge');
}
</script>
テキスト内でインライン要素を使いたい場合、テキスト内に通常のタグを記述します。
Pug
p テストの文章です。<span>spanタグ</span>を間に挟みます。
HTML
<p>テストの文章です。<span>spanタグ</span>を間に挟みます。</p>
もしくは、バーティカルバーを使って以下のようにもできます。
Pug
p | テストの文章です。 span spanタグ | を間に挟みます。
HTML
<p>テストの文章です。<span>spanタグ</span>を間に挟みます。</p>
brで改行したい場合もインライン要素を使う場合と同様です。
Pug
p テストの文章です。<br>2行目です。
HTML
<p>テストの文章です。<br>2行目です。</p>
Pug
p | テストの文章です。 br | 2行目です。
HTML
<p>テストの文章です。<br/>2行目です。</p>
YouTubeやGoogleマップを埋め込みたい場合、タグをそのまま記述できます。
Pug
div <iframe width="560" height="315" src="https://www.youtube.com/embed/rTZGtIoByTg" frameborder="0" allowfullscreen></iframe>
HTML
<div><iframe width="560" height="315" src="https://www.youtube.com/embed/rTZGtIoByTg" frameborder="0" allowfullscreen></iframe></div>
属性
属性の指定は、タグ名の直後で(属性名=値)の形で指定します。
Pug
a(href='https://www.google.co.jp/') Google
HTML
<a href="https://www.google.co.jp/">Google</a>
複数の属性を指定する場合、(属性名1=値1, 属性名2=値2)のようにカンマ区切りで指定します。
Pug
a(href='https://www.google.co.jp/', class='link') Google
HTML
<a class="link" href="https://www.google.co.jp/">Google</a>
属性が多い場合、改行して複数行で指定することもできます。
Pug
a( href='https://www.google.co.jp/' class='link' target='_blank' ) Google
HTML
<a class="link" href="https://www.google.co.jp/" target="_blank">Google</a>
style属性も他の属性と同じように指定できます。
Pug
p(style='color: #ff0000; line-height: 1.5;') テスト
HTML
<p style="color: #ff0000; line-height: 1.5;">テスト</p>
もしくは、オブジェクト形式でも記述できます。
Pug
p(style={color: '#ff0000', 'line-height': '1.5'}) テスト
HTML
<p style="color:#ff0000;line-height:1.5;">テスト</p>
IDやclassの場合、CSSと同じように「#」や「.」を使った形でも定義できます。
Pug
div#contents p.sentence テスト
HTML
<div id="contents"> <p class="sentence">テスト</p> </div>
連結することで複数のclassも可能です。
Pug
div#contents.is-navfix p.sentence.color-blue.fz18 テスト
HTML
<div class="is-navfix" id="contents"> <p class="sentence color-blue fz18">テスト</p> </div>
checkedやdisabledなど、値が真偽値になる属性はtrueかfalseを指定します。
値を省略するとtrueになります。
Pug
input(type='checkbox', checked) input(type='checkbox', checked=true) input(type='checkbox', checked=false)
HTML
<input type="checkbox" checked="checked"/> <input type="checkbox" checked="checked"/> <input type="checkbox"/>
【参考サイト】
コメントが承認されるまで時間がかかります。