Pugのファイル設計について（コーポレートサイトなどの複数ページ案件）
コーポレートサイトなどの複数ページ案件のファイル設計では、共通要素部分のHTMLコードの外部化によるファイル設計をどうするか。
ここが、前回の記事（Pugのファイル設計について（LPなどの1ページ案件））のファイル設計と違ってきます。
下記に、複数ページ案件用のサンプルデータ一式を用意しました。
サンプルデータ一式 : sample2.zip
こちらのサンプルデータにあるファイルを見ながら、この記事を読んでいただければ、よりわかりやすいと思います。
共通要素部分のHTMLコードとは、サイト共通のヘッダー、フッターのようなHTML構造と構造内のテキストを含め全て同じになっている共通要素と、パンくずリストのようなHTML構造は共通だけど、構造内のテキストが異なる共通要素の2パターンが存在します。
これら2パターンのHTML構造を外部化すると、次のようになります。
HTML構造と構造内のテキストを含め全て同じになっている共通要素 → include（例、ヘッダー・フッター）
HTML構造は共通だけど、構造内のテキストが異なる共通要素 → mixin（例、パンくずリスト）
コーポレートサイトでTOPページはオリジナルデザイン、下層ページは共通要素のヘッダー、フッター、パンくずリストが配置されているサイトを想定したファイル設計を提案してみます。
- pug
- _config.pug // 設定ファイル
- index.pug // TOPページ（htmlファイル）を出力するテンプレートファイル
- about
- index.pug // aboutページ（htmlファイル）を出力するテンプレートファイル
- privacy
- index.pug // privacyページ（htmlファイル）を出力するテンプレートファイル
- sitepolicy
- index.pug // sitepolicyページ（htmlファイル）を出力するテンプレートファイル
- include
- _head.pug // サイト共通head要素内
- _header.pug // サイト共通ヘッダー要素
- _footer.pug // サイト共通フッター要素
- _script.pug // サイト共通script要素
- layout
- _home.pug // TOPページ用レイアウト
- _page.pug // 下層ページ用レイアウト
- mixin
- _breadcrumbs.pug // パンくずリスト
上のようなファイル設計になります。
まず最初に、ファイル名の頭文字に「_（アンダーバー）」が設定されているファイルに関しては、以前の記事「webpackの設定について」で解説しましたが、htmlファイルとして出力されるファイルの対象外となり、Pugファイル内で読み込まれるファイルとなります。
TOPページは下層ページと異なるオリジナルデザインを想定しているので、サイト共通のヘッダー、フッター要素を使用できません。
そのため、TOPページと下層ページで、レイアウトを変える必要が出てきます。
- layout/_home.pug
-
block config
include ../_config
doctype html
html(lang="ja")
head
block head
include ../include/_head
body
// header
header.header
p home用ヘッダーです。
// /header
block content
// footer
footer.footer
p home用フッターです。
// /footer
block script
include ../include/_script
上がTOPページ用のレイアウトになります。
include/_head.pugとinclude/_script.pugに関しては、共通して読み込みます。
TOPページのヘッダー、フッターに関しては、オリジナルデザインという想定のため、このレイアウトに直接HTMLコードを書きます。（特に外部ファイル化する必要がない）
続けて、下層ページのレイアウトです。
- layout/_page.pug
-
block config
include ../_config
include ../mixin/_breadcrumbs
doctype html
html(lang="ja")
head
block head
include ../include/_head
body
include ../include/_header
block content
include ../include/_footer
block script
include ../include/_script
これが下層ページ用のレイアウトになります。
パンくずリストがある想定なので、mixin/_breadcrumbsをインクルードしておきます。
下層ページに関しては、ヘッダー、フッターがサイト共通として使用できる想定なので、これらもインクルードします。
以上が、レイアウトファイルになります。
続けて、実際のテンプレートファイルを見てみます。
- index.pug
-
extends ./layout/_home //TOPページ用のレイアウトを使用する
block append config
- var page = pagelist['home']; //TOPページ用の情報を代入
block append head
link(rel="stylesheet" href=ROOT_PATH+"css/home/style.css") //TOPページのみで使用するcssファイルを読み込む
block content
// main
main.main //コンテンツ部分は直接HTMLコードを記述
p TOPページのメインコンテンツ
// /main
block append script
script(src=ROOT_PATH+"js/home.js") //TOPページのみで使用するjsファイルを読み込む
上がTOPページのテンプレートファイルになります。
レイアウトは、layout/_homeを使用しています。
変数pageに、TOPページ用の情報を代入します。
headとscript部分に、個別のcssとjsを追加します。（必要があれば）
コンテンツ部分に関しては、このファイルに直接HTMLコードを記述します。
続けて、下層ページのテンプレートファイルです。
- index.pug
-
extends ../layout/_page //下層ページ用のレイアウトを使用する
block append config
- var page = pagelist['about']; //aboutページ用の情報を代入
block append head
link(rel="stylesheet" href=ROOT_PATH+"css/about/style.css") //aboutページのみで使用するcssファイルを読み込む
block content
// main
main.main //コンテンツ部分は直接HTMLコードを記述
h1 #{page.name}
+breadcrumbs([
['ホーム', '/'],
[page.title, page.local_url]
]) //パンくずリストを使用する
// /main
block append script
script(src=ROOT_PATH+"js/about.js") //aboutページのみで使用するjsファイルを読み込む
上がaboutページ（下層ページ）のテンプレートファイルになります。
レイアウトは、layout/_pageを使用しています。
変数pageに、aboutページ用の情報を代入します。
headとscript部分に、個別のcssとjsを追加します。（必要があれば）
コンテンツ部分に関しては、このファイルに直接HTMLコードを記述します。
TOPページとの違いは、使用するレイアウトファイルが違う点と、コンテンツ部分のみとなります。
以上が、コーポレートサイトなどの複数ページ案件で使用するファイル設計になります。
この記事では、ファイル設計についての解説のため、mixinで使用している_breadcrumbs.pugの記述方法などの解説に関しては割愛します。
また、インクルードが必要になるファイルは、実際にはこのサンプルデータより増えます。
例えば、グローバルナビに関しても、コーポレートサイトには必須だと思います。
グローバルナビ、これもファイルの外部化をすべきで、includeディレクトリに、_navi.pugなどのファイル名で格納されると思います。
mixinディレクトリもパンくずリスト（_breadcrumbs.pug）以外にも増えるはずです。
ただし、なんでもすぐに外部化するのではなく、単一のものはテンプレートファイルに直接記述し、複数箇所で使用する同じHTMLコードがある場合のみ外部化するというルールを決めることで、Pugのファイル設計は悩まずに、また綺麗なファイル設計になるはずです。
以上が、Pugのファイル設計についての解説になります。
次回はSCSSのファイル設計について、解説したいと思います。