Edited at

Pug(Jade)の応用記法について

More than 1 year has passed since last update.

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 1ページ目

block content
h1 これは1ページ目です

 

page2.pugも同じように一部変えて作ります。

extends _layout.pug

block title
title 2ページ目

block content
h4 これは2ページ目です
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>2ページ目</title>
</head>
<body>
<h4>これは2ページ目です</h4>
<P>1ページ目は面白かったですか?</P>
</body>
</html>


関連リンク

Getting Started Pug(公式サイト)

https://pugjs.org/api/getting-started.html

もっと機能を知りたい方は、公式のドキュメントを参照していただけると良いかと思います