こんにちは、株式会社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を使って共通部分のパーツ化する方法を解説しました。
今回の例のほか、コーディング時に共通部分となるヘッダーやフッターも同じくパーツ化して管理でき、変更が生じた時に柔軟に対応できるようになります。
