Edited at

Pugの記法まとめ


HTMLをPugで書くメリット


  • 閉じタグを書かなくて良いので、書き忘れることが無くなる

  • Classを「.」、IDを「#」と書くので、Class名やID名変更時の置換が楽になる

  • ヘッダー、フッターなど共通部分を別ファイルで管理できる

  • 変数や条件分岐ができる


HTMLをPugで書くデメリット


  • 変換する環境が必要

変換は、npm-scriptsやGulpを使いましょう。npm-scriptsの記事書きました。

GUIでの変換が良い方は、Preprosがオススメです。


Pug←→HTML変換サービス

環境を作らずにPugの書き方を練習できます。


PugをHTMLに変換

html2pug - convert your html code to pug

https://html2pug.now.sh/


HTMLをPugに変換

PugHtml - Pug and HTML online converter in realtime

https://pughtml.com/


タグ


  • タグ名はHTMLタグになる タグ要素名はそのまま記述

  • 要素ごとに改行する

  • タグの中のテキストは半角スペース1つ空けて、続けて書く


タグの中で特殊なもの


div

divタグは省略可能


pug

 .test ああああ


↓変換


html

<div class="test">ああああ</div>



br


pug

p ああああ

br
| ああああ

↓変換


html

<p>ああああ<br>ああああ</p>



doctype宣言


pug

doctype html


↓変換


html

<!DOCTYPE html>



入れ子(子要素)


改行せずに入れ子

「:」 + 半角スペース


pug

li: a(href="#") あああ


↓変換


html

<li><a href="#">あああ</a></li>



改行して入れ子

改行をしてインデントをつければ入れ子になる

インデントとタブが混在すると変換時にエラーになるので、EditorConfigなどで整形すると良いです。


pug

 div ああああ

div ああああ

div ああああ
div ああああ


↓変換


html

<div>ああああ</div>

<div>ああああ</div>

<div>ああああ
<div>ああああ</div>
</div>



IDとClass

Classは「.」、IDは「#」で表します。

classやidは要素に続けて記述します。


pug

section#main

.content.picture

↓変換


html

<section id="main"></section>

<div class="content picture"></div>


属性

属性は丸括弧内に記述する

属性と値は要素に続けて(attr=”value”)という形で記述

IDとClassも属性なので、同じように書くことができます。


pug

link(rel="stylesheet" link="css/style.css")

script(src="js/main.js")
a(href="#") Top
input(
type="radio"
name="test"
checked
)

↓変換


html

<link rel="stylesheet" link="css/style.css"/>

<script src="js/main.js"></script>
<a href="#">Top</a>
<input type="radio" name="test" checked="checked"/>


エスケープ

イコール(=)を使って5種類の記号「&」 「<」「 >」「"」「'」をエスケープできます。

パイプライン(|)が入るとエスケープは解除されます。


pug

p= "& < > > >"

p "& < > > >"

↓変換


html

<p>&amp; &lt; &gt; &gt; &gt;</p>

<p>"& < > > >"</p>


外部ファイルの読み込み

includeで共通化したファイルを挿入できます。

相対パスで指定します。(ルートパスでは指定できません)


pug

include directory/header.pug



HTMLをそのままPugファイル内で使う

HTMLはドット(.)で終わる要素の中に入れておけばそのまま出せます。


pug

.

<iframe width="560" height="315" src="https://www.youtube.com/embed/9xLvF6xoG30" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

HTML以外、例えばphpも書くことができます。(拡張子はphpにする必要があります)


変数

head内のmeta情報など、ページごとに違う内容の場合は、変数を使う事ができます。

定義はページの一番上に書きます。


pug

- var pagename='ページ名'

title #{pagename}



html

 <title>ページ名</title>



プロパティで変数を使う

「- var 変数名 = 変数の中身」で定義


pug

- var classname='aaa'

div(class=classname)
div(class=`${classname}`)


↓変換


html

<div class="aaa"></div>

<div class="aaa"></div>


ループ


for


pug

- for (var x = 0; x < 5; x++)

li number#{x}

↓変換


html

<li>number0</li>

<li>number1</li>
<li>number2</li>
<li>number3</li>
<li>number4</li>


each


pug

each value in ["yamada", "suzuki", "sato", "ito", "tanaka"]

li #{value}

↓変換


html

<li>yamada</li>

<li>suzuki</li>
<li>sato</li>
<li>ito</li>
<li>tanaka</li>


条件分岐


if


pug

 - var name = '山田'

if name=='鈴木'
p 私は鈴木です
else if name=='佐藤'
p 私は佐藤です
else
p 私は鈴木でも佐藤でもありません


↓変換


html

 <p>私は鈴木でも佐藤でもありません</p>



switch


pug

- var name = '山田'

case name
when '鈴木'
p 私は鈴木です
break
when '佐藤'
p 私は佐藤です
break
default
p 私は鈴木でも佐藤でもありません


↓変換


html

<p>私は鈴木でも佐藤でもありません</p>



コメントアウト

コメントにはHTMLとして出力されるものと、されないものがある


pug

// HTMLに出す

//- HTMLに出さない

↓変換


html

<!-- HTMLに出す-->