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

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

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

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

$ npm i -D gulp-ejs

ファイル構成

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

├─ /src
│  └─ /ejs
│      ├─ index.ejs
│      ├─ /page
│      │  └─ index.ejs
│      └─ /templates
│         ├─ _head.ejs
│         └─ meta.json
└─ gulpfile.js

タスクの記述

タスクは特別な記述などは必要なく、単純に/srcをgulp.dest()するという感じで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をそれぞれ引数として指定しておきます。

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

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

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

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

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

これをEJSの機能を利用して該当ページにいる場合は特定のa要素に対して.is-currentというclassが付与されるようにしていき、/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要素にそれぞれ下記のようにカレントクラスが記述されているのを確認できます。

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

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

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