HTMLをPug(Jade)で書くのは慣れたから、
どんどんPug(Jade)の機能使っていきたいぜー！ってなってきた時のために
さくっと使いやすい応用記法をまとめました。
まだ「HTMLをPug(Jade)で書くことが慣れてないのよ」って方は、
こちらの記事を参考にしてもらえると良いかと思います
Pug(Jade)の基本記法について
共通部分をパーツ化できる include
- 様々な箇所で共通ファイルを呼び出して使える
- 共通パーツ化したファイルはコンパイルされない仕組みを作っておくと良い
head部分などは毎回同じ記述になるので別ファイルを作ってしまう
今回はcommonフォルダの中に_head.pugファイルを作成。
▼Pug(Jade)
//- common/_head.pug
head
title サイトタイトル
script(src='/javascripts/jquery.js')
script(src='/javascripts/app.js')
include ファイルのパスで任意のファイルを呼び出すことができます
//- index.pug
doctype html
html
include commmon/_head.pug
// commmonフォルダのhead.pugをインクルード
body
h1 こんにちは
common/head.pngがインクルードされてコンパイルされる
▽HTML
<!DOCTYPE html>
<html>
<head>
<title>サイトタイトル</title>
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/app.js"></script>
</head>
<body>
<h1>こんにちは</h1>
</body>
</html>
「共通パーツ化したファイルはコンパイルされない仕組みを作っておくと良い」
↑なのですが、私の場合、接頭語にアンダーバーを入れると、読み込まれないという記述をいれて対処してます。
▼gulpfile.js
gulp.task('pug', () => {
return gulp.src(['./pug/**/*.pug', '!./pug/**/_*.pug'])
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('./html/'));
});
繰り返しの記述をループで処理できる for、each
forの場合
▼Pug(Jade)
- for (var x = 0; x < 3; x++)
li item
▽HTML
<li>item</li>
<li>item</li>
<li>item</li>
eachの場合
▼Pug(Jade)
ul
- var list = ["りんご", "レモン", "バナナ"]
each item in list
li= item
▽HTML
<ul>
<li>りんご</li>
<li>レモン</li>
<li>バナナ</li>
</ul>
変数が使える Interpolation
- 繰り返し出て来る共通の単語など、変数化すると便利
- 変更に強いHTMLがつくれる
▼Pug(Jade)
変数は- var 変数名 = "値"で定義して、
#{変数名}で呼び出せます。
- var word = "犬"
h1 #{word}のサイトへようこそ！
P ここは#{word}好きによる#{word}好きのためのサイトです。
p あなたは#{word}を飼っていますか？？
▽HTML
<h1>犬のサイトへようこそ！</h1>
<P>ここは犬好きによる犬好きのためのサイトです。</P>
<p>あなたは犬を飼っていますか？？</p>
突然の仕様変更で犬→猫になったとしても、
- var word = "犬"を- var word = "猫"に帰るだけで、
#{word}の部分すべてに、「猫」が反映されます。
テンプレートがつくれる Extends
- 同じようなレイアウトページを量産する時に便利
▼Pug(Jade)
まず、レイアウトのベースになるファイルを作成します。
//- _layout.pug
doctype html
html
head
block title
title ページタイトル
body
block content
ファイルごとに違うコンテンツを入れたい部分はblock 名前で囲っておく。
サンプルとしてpage1.pugをつくります
レイアウトを適用したいファイルにextends レイアウトファイルのパスを挿入する
block 名前ごとに入れたい要素を記述します
extends _layout.pug
block title
title １ページ目
block content
h1 これは１ページ目です
page2.pugも同じように一部変えて作ります。
extends _layout.pug
block title
title ２ページ目
block content
h4 これは２ページ目です
P 1ページ目は面白かったですか？
▽HTML
page1.pug
<!DOCTYPE html>
<html>
<head>
<title>1ページ目</title>
</head>
<body>
<h1>これは1ページ目です</h1>
</body>
</html>
page2.pug
<!DOCTYPE html>
<html>
<head>
<title>２ページ目</title>
</head>
<body>
<h4>これは２ページ目です</h4>
<P>1ページ目は面白かったですか？</P>
</body>
</html>
関連リンク
Getting Started Pug（公式サイト）
https://pugjs.org/api/getting-started.html
もっと機能を知りたい方は、公式のドキュメントを参照していただけると良いかと思います