以前、テンプレートエンジンのPugをご紹介いたしました。
GulpでテンプレートエンジンのPugを使ってみた
Getting Started – Pug前回はGulpで利用するテンプレートエンジンのEJSをご紹介いたしました。EJSの他に、Gulpで利用できるテンプレートエンジンにはPugというものが有名なようなので、試しに使ってみました。Pugと...
www.pc-weblog.com
2017.04.30
今回はインクルードしているファイル内で記述しているクラス名を任意に変える方法をご紹介いたします。
変数を使ってクラス名を変える
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要素の()内では改行してのスペースなど、分岐で利用する際の記法が効かないようなので、今回のような方法を選択しました。
今回ご紹介した方法はインクルード内の特定の要素の見た目を、ページやディレクトリごとに変更したい場合に便利なので、積極的に利用していきたいと思います。
コメント