HTMLをPugで書くメリット
- 閉じタグを書かなくて良いので、書き忘れることが無くなる
- Classを「.」、IDを「#」と書くので、Class名やID名変更時の置換が楽になる
- ヘッダー、フッターなど共通部分を別ファイルで管理できる
- 変数や条件分岐ができる
HTMLをPugで書くデメリット
- 変換する環境が必要
変換は、npm-scriptsやGulpを使いましょう。npm-scriptsの記事書きました。
GUIでの変換が良い方は、Preprosがオススメです。
Pug←→HTML変換サービス
環境を作らずにPugの書き方を練習できます。
HTMLをPugに変換
html2pug - convert your html code to pug
https://html2pug.now.sh/
PugをHTMLに変換
PugHtml - Pug and HTML online converter in realtime
https://pughtml.com/
タグ
- タグ名はHTMLタグになる タグ要素名はそのまま記述
- 要素ごとに改行する
- タグの中のテキストは半角スペース1つ空けて、続けて書く
タグの中で特殊なもの
div
divタグは省略可能
.test ああああ
↓変換
<div class="test">ああああ</div>
br
p ああああ
br
| ああああ
↓変換
<p>ああああ<br>ああああ</p>
doctype宣言
doctype html
↓変換
<!DOCTYPE html>
入れ子(子要素)
改行せずに入れ子
「:」 ＋ 半角スペース
li: a(href="#") あああ
↓変換
<li><a href="#">あああ</a></li>
改行して入れ子
改行をしてインデントをつければ入れ子になる
インデントとタブが混在すると変換時にエラーになるので、EditorConfigなどで整形すると良いです。
div ああああ
div ああああ
div ああああ
div ああああ
↓変換
<div>ああああ</div>
<div>ああああ</div>
<div>ああああ
<div>ああああ</div>
</div>
IDとClass
Classは「.」、IDは「#」で表します。
classやidは要素に続けて記述します。
section#main
.content.picture
↓変換
<section id="main"></section>
<div class="content picture"></div>
属性
属性は丸括弧内に記述する
属性と値は要素に続けて（attr=”value”）という形で記述
IDとClassも属性なので、同じように書くことができます。
link(rel="stylesheet" link="css/style.css")
script(src="js/main.js")
a(href="#") Top
input(
type="radio"
name="test"
checked
)
↓変換
<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種類の記号「&」 「<」「 >」「"」「'」をエスケープできます。
パイプライン（|）が入るとエスケープは解除されます。
p= "& < > > >"
p "& < > > >"
↓変換
<p>& < > > ></p>
<p>"& < > > >"</p>
外部ファイルの読み込み
includeで共通化したファイルを挿入できます。
相対パスで指定します。(ルートパスでは指定できません)
include directory/header.pug
HTMLをそのままPugファイル内で使う
HTMLはドット（.）で終わる要素の中に入れておけばそのまま出せます。
.
<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情報など、ページごとに違う内容の場合は、変数を使う事ができます。
定義はページの一番上に書きます。
- var pagename='ページ名'
title #{pagename}
↓
<title>ページ名</title>
プロパティで変数を使う
「- var 変数名 = 変数の中身」で定義
- var classname='aaa'
div(class=classname)
div(class=`${classname}`)
↓変換
<div class="aaa"></div>
<div class="aaa"></div>
ループ
for
- 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に出す-->
```