Help us understand the problem. What is going on with this article?

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

cotolier_risa
良いと思ってもすぐ忘れるのでQiitaに記録していけたらなぁと思います。 ミスや不具合等ありましたらお気軽にご指摘いただけると助かります。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした