gulp-ejs-sassのメインナビゲーションのパターン2

gulp-ejs-sass.js

<% var
// `fileName`にページのフォルダ名を記述します。
// `pageName`にナビゲーションに表示するページ名を記述します。
// `subName`にナビゲーションに表示するページ名の補足等を記述します。
// index.ejsの`pageCurrent`と`name`が同じ場合は`.is-current`が付きます。
navs = [
  { fileName: "child-page1", pageName: "child page1", subName: "sub name1"},
  { fileName: "child-page2", pageName: "child page2", subName: "sub name2"},
  { fileName: "child-page3", pageName: "child page3", subName: "sub name3"},
]
// `ul`, `li`, `a`要素に記述するクラス名をそれぞれ定義します。
ulClass = "main-nav";
liClass = "main-nav__item";
aClass = "main-nav__link";

if (typeof modifier === undefined) { var modifier = ''; }
-%>

    <header class="header<%= modifier %>">
      <h1><a href="<% if(page.path) { %><%= page.path %>index.html><% } %>"><%= site.name %></a></h1>
      <nav>
        <ul class="<%= ulClass %>"><% navs.forEach(function(nav) { %><% if(page.current === nav.fileName) { %><% if(page.path === "../") { %>
          <li class="<%= liClass %>">
            <a href="" class="<%= aClass %> is-current"><%= nav.pageName %><span><%= nav.subName %></span></a>
          </li><% } else { %>
          <li class="<%= liClass %>">
            <a href="<%= page.path.slice(3) %>index.html" class="<%= aClass %> is-current"><%= nav.pageName %><span><%= nav.subName %></span></a>
          </li><% } %><% } else if(page.current === "") { %>
          <li class="<%= liClass %>">
            <a href="<%= nav.fileName %>/index.html" class="<%= aClass %>"><%= nav.pageName %><span><%= nav.subName %></span></a>
          </li><% } else { %>
          <li class="<%= liClass %>">
            <a href="<%= page.path %><%= nav.fileName %>/index.html" class="<%= aClass %>"><%= nav.pageName %><span><%= nav.subName %></span></a>
          </li><% } %><% }) %>
        </ul>
      </nav>
    </header>