EJS:インクルードの引数を利用してカレントクラスを付与する方法

Tips

EJS:インクルードの引数を利用してカレントクラスを付与する方法

EJSで特定のファイルを共通ファイルとしてインクルードさせたいけど、ページによって一部変更したい箇所があるときなどに使える方法で、今回はナビゲーションを例に該当のページだった場合は特定の要素にカレントクラスを付与させるという動きを具体的にはインクルード時の引数と条件分岐を利用して実装してみます。

※以下で紹介する方法はgulpを使用して実装する方法になりますので、予めgulpが使用できる環境を用意してください。

※EJSの基本的な使用方法などについては省略しているので、「EJS -- Embedded JavaScript templates」や「GitHub - mde/ejs: Embedded JavaScript templates」などで確認してください。

使用するプラグインとファイル構成

プラグインのインストール

今回はgulpでEJSを使用するので、まず下記コマンドで「gulp-ejs」をインストールします。

$ npm i -D gulp-ejs

ファイル構成

ここで使用する方法は以下のようなファイル構成のものを使用した想定になり、後述するコード内のパスなどについてもこの構成をもとにしています。
/src直下のindex.ejsがTOPページ、/src/pageindex.ejsは下層ページ扱いとして、いずれも共通ナビゲーションが記述された/src/templates/_nav.ejsを読み込んでナビゲーションを表示させるというものになります。

├─ /src
│  └─ /ejs
│      ├─ index.ejs
│      ├─ /page
│      │  └─ index.ejs
│      └─ /templates
│          └─ _nav.ejs
└─ gulpfile.js

タスクの記述

タスクは特別な記述などは必要なく、単純に/srcgulp.dest()するという感じでgulpfile.jsに下記のように記述します。

gulpfile.js

var gulp = require( 'gulp' ),
    ejs = require( 'gulp-ejs' );

gulp.task('ejs', function() {
  return gulp.src(['src/ejs/**/*.ejs', '!src/ejs/**/_*.ejs'])
      .pipe(ejs({}, {}, {ext: '.html'}))
      .pipe(gulp.dest('dist'));
});

EJSへの記述

まず、各index.ejsにナビゲーションが記述されたファイルをインクルードさせていきます。
今回は/src/templates内にある_nav.ejsをインクルードさせるのでそれぞれ下記のようにincludeを利用し、その際にそのページを示すIDとなるような引数をcurrent: 'ID'のような形で記述します。
ここでは/src/index.ejsにはhomeを、/src/page/index.ejsにはpageをそれぞれ引数として指定しておきます。

/src/index.ejs

<%-
  include('./templates/_nav', {
    current: 'home'
  });
%>

/src/page/index.ejs

<%-
  include('../templates/_nav', {
    current: 'page'
  });
%>

include使用時の注意点としては、パスはその読み込むファイル(自身のファイル)からの相対パスで指定する必要があります。
また、読み込むファイルは_nav.ejsですが、上記のように拡張子を省略して指定することが可能です。

次に上でインクルードするように指定したナビゲーション用ファイルの作成で、ベースとなるHTMLとしては下記のようなものを使用します。

HTML

<nav>
  <a href="#">home</a>
  <a href="#">page</a>
</nav>

これをEJSの機能を利用して該当ページにいる場合は特定のa要素に対して.is-currentというclassが付与されるようにしていき、/src/templates/_nav.ejsに下記のように記述します。

/src/templates/_nav.ejs

<% var currentClass = 'class="is-current" '; -%>
<nav>
  <a <%- current == 'home' ? currentClass : '' %>href="#">home</a>
  <a <%- current == 'page' ? currentClass : '' %>href="#">page</a>
</nav>

まず、コード上部でカレントクラスを表示する際に使用する変数を作成し、今回は.is-currentというclassを付与したいのでclass="is-current"としておきます。
次に各a要素にtrueだった場合にカレントクラス用の変数が入るように条件分岐を記述し、条件部分には先ほどインクルード時に指定した引数を利用してcurrent == 'ID'のような形で記述します。
例えば/src/index.ejsにはインクルード時にhomeという引数を付けており、そのページを表示する際はひとつ目のa要素にclassが付いてほしいので、そこにcurrent == 'home'という条件を指定していきます。

あとは$ gulp ejsを実行すれば/srcの並列に/distが出力されるので、その中の各HTMLを確認すると/dist/index.htmlではひとつ目のa要素に、/dist/page/index.htmlではふたつ目のa要素にそれぞれ下記のようにカレントクラスが記述されているのを確認できます。

/dist/index.html

<nav>
  <a class="is-current" href="#">home</a>
  <a href="#">page</a>
</nav>

/dist/page/index.html

<nav>
  <a href="#">home</a>
  <a class="is-current" href="#">page</a>
</nav>

今回はナビゲーションで特定の要素にカレントクラスを付与する動きを例に紹介してきましたが、冒頭にも書いたように特定のファイルを共通ファイルとしてインクルードさせつつページによって変更したい箇所がある場合に使えるので、EJSでこのようなことをしたいときに試してみてください。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.