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

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

Getting Started – Pug 前回はGulpで利用するテンプレートエンジンのEJSをご紹介いたしました。 EJSの他に...

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

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

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要素の()内では改行してのスペースなど、分岐で利用する際の記法が効かないようなので、今回のような方法を選択しました。

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

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!