テンプレートエンジンpugを使って、LP用テンプレートを作った話

pugとは、何?

pugとは、htmlを出力するためのテンプレートエンジンです。

pugを使うには、gulpのインストールとgulp pugの設定が必要になります。

なぜ、テンプレートを作ろうと思ったか?

特にECモールのLP用のコーディングは、ほぼどのページでも共通のパーツが多いです。

少しでも早く作業を効率化するために、作成しました。

テンプレート作る際に適している「extends」

まず、ベースとなるpugを作成します。

gista55b486fc929988c50f398b83a4ffeb6

ファイルごとに違うコンテンツを入れたいものには、[block 名前]で書きます。

ベースとは異なるpugを作成します。 そこに、▽を書きます。

gistb65941748e4de39e7043d84fc3535b31

※pugを書く際は、インデントが正しくないと、コンパイルできませんので、注意してください。

[参考]私がpugを勉強する際に見ているサイト

ゴリラでもわかるJade改めPug入門

→こちらのサイトは分かりやすくて、いつも、分からなくなったら、見ています。

そもそも、なぜ、pugを使うようになったのか?

今働いている会社が、pugでコーディングが必須です。htmlはダメです。

pugの方が、プログラマーの人たちがやりやすいらしいです。

この記事を書いた人

tsubochi

EC業界のWeb/UIデザイン歴7年程度携わってきました。高校中退後、約4年間ほど飲食店で働きながら、高卒認定を独学で勉強し、合格した後に職業訓練でパソコンの基礎とWebデザインを学びました。
EC業界のデザインを得意とし、新規ECサイト制作・ECサイトリニューアル/LP作成/バナー作成/サービスの管理画面UIデザイン/アプリUIデザイン等さまざまな経験を積んできました。これからは、経験を生かしながら、ユーザーのために面白いものや楽しいものを作っていきたいです。