テンプレートエンジンのPugで使うクラス名をページ、ディレクトリなどで任意に変える

技術情報
本ページは広告およびアフィリエイトプログラムによる収益を得ています。

以前、テンプレートエンジンのPugをご紹介いたしました。

GulpでテンプレートエンジンのPugを使ってみた
Getting Started – Pug前回はGulpで利用するテンプレートエンジンのEJSをご紹介いたしました。EJSの他に、Gulpで利用できるテンプレートエンジンにはPugというものが有名なようなので、試しに使ってみました。Pugと...

今回はインクルードしているファイル内で記述しているクラス名を任意に変える方法をご紹介いたします。

変数を使ってクラス名を変える

pug

下記のように「include ../common/_header.pug」としてヘッダーをインクルードしているとします。

doctype html
html(lang="ja")
  include ../common/_head.pug
  body
    include ../common/_header.pug

    h1 ニュースページ

    main
      p ニュースページ

    include ../common/_footer.pug

doctype htmlの上に変数「- var news = “-news”」を記述します。

- var news = "-news"
doctype html
html(lang="ja")
  include ../common/_head.pug
  body
    include ../common/_header.pug

    h1 ニュースページ

    main
      p ニュースページ

    include ../common/_footer.pug

_header.pug

インクルードしているヘッダー内の、「ニュースページ」のa要素に記述しているクラス属性に「`navi${news}`」と記述します。

header
  nav
    ul
      li: a(href="#") トップページ
      li: a(href="#" class=`navi${news}`) ニュースページ

上記のように記述するとhtmlを出力したときに「navi」がデフォルトで表示され、「- var news = “-news”」と記述しているPugテンプレートにのみ、「${news}」に「-news」が入ります。

<header>
    <nav>
        <ul>
            <li><a href="#">トップページ</a></li>
            <li><a class="navi-news" href="#">ニュースページ</a></li>
        </ul>
    </nav>
</header>

class=`navi${news}`」が「class="navi-news"」となっていることがわかります。

まとめ

  • 該当するテンプレートのdoctype htmlの上に変数を記述。
  • `${news}`」などとして、展開用の記述をする。
  • 変数を記述しているテンプレートにのみ、セットした値が入る。

本当は「if news」などとして条件分岐でクラス名を変更しようと思ったのですが、a要素の()内では改行してのスペースなど、分岐で利用する際の記法が効かないようなので、今回のような方法を選択しました。

今回ご紹介した方法はインクルード内の特定の要素の見た目を、ページやディレクトリごとに変更したい場合に便利なので、積極的に利用していきたいと思います。

スポンサーリンク
技術情報
スポンサーリンク
シェアする
ボヘミアンをフォローする
この記事が気に入ったら
フォローしよう
最新情報をお届けします。
スポンサーリンク

コメント