Pugの基本的な記述方法

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"/>

　

【参考サイト】

• Tags – Pug
• Plain Text – Pug
• Attributes – Pug