Pugを使って共通部分をパーツ化して作成する方法

こんにちは、株式会社Pentagonでコーダーをしているあきです。

今回はPugを使ってコーディング時にヘッダー部分やフッター部分の共通パーツを管理しやすくなる方法を解説します。
PugとはHTMLを効率的に書くためのテンプレートエンジンです。

【こんな人に読んで欲しい】
Pugを使ってヘッダー、フッターなどの共通パーツを効率よく管理する方法を知りたい

【この記事を読むメリット】
共通部分をパーツ化することにより変更等にも柔軟に対応できるようになる。

目次

共通部分をパーツ化する

まずは共通部分のファイルを作成しましょう。
今回はheadを作成します。

//- inc/_head.pug
head
  meta(charset="utf-8")
  title pugの使い方

パーツ化したファイルを読み込む

先ほど作成した共通部分のファイルをincludeを使用して読み込みます。

//- index.pug
doctype html
html(lang="ja")
  include inc/_head
  body
    main
      p コンテンツ部分

コンパイル後のHTMLがこちらです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Pugの使い方</title>
  </head>
  <body>
      <main>
       <p>コンテンツ部分</p>
    </main>
  </body>
</html>

まとめ

今回はPugを使って共通部分のパーツ化する方法を解説しました。

今回の例のほか、コーディング時に共通部分となるヘッダーやフッターも同じくパーツ化して管理でき、変更が生じた時に柔軟に対応できるようになります。

採用情報はこちら
目次
閉じる