gulp ejs パンくずbreadcrumb（オブジェクトkey, value展開）メモ

パンくずリストはサイトでは欠かせないほど実装されている。パンくずをejsで実装する際に、key, valueセットでテンプレートに渡して展開する方法をメモしておく。

環境の整理

• gulp v2.3.0

方法

1.以下のようなパンくずを作成するとする。

2.index.ejsにて、commonDataのbreadcrumbsにkey, valueセットを書く。
/assets/inc/_breadcrumb.ejsテンプレートにcommonDataをcommonという変数名で渡す。

<%
  var commonData = {
    ...
    breadcrumbs: {
      'トップページ': '/',
      '会社概要': '/company/',
      '資産': '/assets/',
    }
  };

  ...

  <%- include('./../assets/inc/_breadcrumbs',{common:commonData}); %>

%>

3._breadcrumb.ejsテンプレートにて、common.breadcrumbsのkey, valueを展開する。

<div class="c-breadcrumbs">
  <div class="c-breadcrumbs-box">
    <% Object.keys(common.breadcrumbs).forEach(function (key) { %>
    <a href="<%= common.breadcrumbs[key] %>"><%= key %></a>
    <% }); %>
  </div>
</div>

＊補足
breadcrumb.scssは以下

// breadcrumbs
.c-breadcrumbs {
  background-color: #f2f2f2;
  .c-breadcrumbs-box {
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
    a {
      display: inline-block;
      padding: 0 10px;
      font-size: 13px;
      color: #24588d;
      &:not(:first-of-type) {
        border-left: 1px solid #24588d;
      }
    }
  }
}

OK