【テンプレートエンジン】Pugでマークアップ環境を作る

JavaScriptについてばかりでしたので、たまには違うメモを。

といってもなぜか、サーバーサイド寄りの内容になりますmm

前にCodePenを漁っていたら、これ↓が目に入ったのがきっかけで

気になってしょうがなくてそのままPugをずっと調べてました。

Pugは元の名がJadeで、ちょっと前にPugに名前が変わったそうです。

私も馴染みのあるHamlに影響を受けたJavaScriptテンプレートエンジンなんだそうです。

↓試しに作ったこれを元にメモしていきます。よければ見てみてください。

github.com

完成図

Pugテンプレート作成

まずテンプレートを用意します。

開発環境のルートディレクトリに

• config.pug
• layout.pug

そしてpugフォルダを作り、その中に

• index.pug

を作成し、3つの主要ファイルを用意します。

そして今回の場合、

メタ要素を入れる    _inc_head.pug

コンテンツには

     ヘッダー             _inc_header.pug

     ナビ                    _inc_nav.pug

     フッター             _inc_footer.pug

という設定です。

テンプレートは全部includeで読み込むので、includeフォルダ内に纏めます。

トップページの要素はtopフォルダ内に纏めます。

このような感じにしてみました。

_inc_head.pug

includeテンプレートから作成していきます。

まずヘッダーから、Pugはこのような書き方をします。

_inc_header.pug

この閉じタグなしで入れ子の書き方はHamlの経験があれば馴染みがあります。
%などが無くさらにスッキリです。
divは省略ができ、if文もこんな感じで書けてしまいます。
(keyやpages.top.urlなどの変数は後に出るconfig.pug内で設定してます。)

_inc_nav.pug

eachやforも使えるので、かなりシンプルになります。
リンク内にも変数を使えました。

_inc_footer.pug

最後にscriptを読み込んでますが、
jsフォルダまでのpathをconfig.pugに纏めておけば、
テンプレート内でpathが長くなることがありません。

layout.pug

layout.pugでトップページの構成を組んでいきます。
1行目の書き方でHTML5の宣言になります。
2行目,14行目にblockとありますが、varsには変数、contentsにはコンテンツの内容をindex.pug内で纏めたものを呼び出しています。
8行目のbodyクラスにkeyという変数を使っています。keyはvars内で代入しています。

index.pug

index.pug内はまずextendsでlayout.pugを継承することから始め、
block varsに変数を纏めています。(config.pug内の変数もvarsに纏めています。)
block contentsにコンテンツ内容を纏めています。
caseを使って場合によりコンテナ内が変わるようにしてみました。
ちなみに、コメントアウトは//-です。
入れ子にすれば2行以上コメントアウトできます。

config.pug

config.pugにはページ情報を書きます。
省略パスもここで設定してます。
変数を定義するときはなぜか-(ハイフン)が必要になります。
ちなみに変数を使用する場合は#{key}という書き方です。

長くなりましたが、以上でテンプレの準備は大丈夫かなと思います。

そして最後にpugをhtmlに変換します。
ここではgulpを使用しています。
npmパッケージはgulp-pugを使用すれば簡単にコンパイルができます。