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

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>

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

共通部分をパーツ化できる include

「共通パーツ化したファイルはコンパイルされない仕組みを作っておくと良い」

繰り返しの記述をループで処理できる for、each

forの場合

eachの場合

変数が使える Interpolation

テンプレートがつくれる Extends

関連リンク

共通部分をパーツ化できる　include

繰り返しの記述をループで処理できる　for、each