概要

_breadcrumb.ejsというファイルを作り、各ページに読み込ませてページタイトルをパンくずに表示したい。以前投稿したこちらの記事の発展型。

ソース

_breadcrumb.ejs

<div id="breadcrumb_box">
  <ol id="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">
    <li class="home"><a href="/" itemprop="url"><span itemprop="title">トップページ</span></a>&nbsp;&gt;</li>
    <li>
      <%- page['title'] %>
    </li>
  </ol>
</div>

_breadcrumb.ejsのソース自体はこんな感じ。
それを各ページに読み込ませる際

_exsample.ejs

  <%- include('../includes/_breadcrumb', {
     page: json['exsample']
   }); %>

こんな形で読み込む。

2階層しかないサイトの場合(トップ > 会社概要　等)、ただタイトルを表示させるだけで問題はないが、3階層以上の場合(トップ > 商品一覧 > 商品詳細　等)はまた条件分岐を行わせる必要がでてくる。

_breadcrumb.ejs

<div id="breadcrumb_box" class="center_box">
  <ol id="breadcrumb" itemscope itemtype="https://data-vocabulary.org/Breadcrumb">
    <li class="home"><a href="/" itemprop="url"><span itemprop="title">トップページ</span></a>&nbsp;&gt;</li>
    <%
      var status; //statusを宣言
      if(status == 'exsample_detail') {　//_exsample.ejsにて設定されたstatusがexsample_detailの場合下記liを出力
    %>
    <li><a href="../" itemprop="url"><span itemprop="title">
          <%- page['middleLayer'] %></span></a>&nbsp;&gt;</li> 
    <% }  %>
    <li>
      <%- page['title'] %>
    </li>
  </ol>
</div>

_exsample.ejs

  <%- include('../includes/_breadcrumb', {
    status:'exsample_detail', //statusにexsample_detailを設定
    page: json['exsample']
  }); %>

3階層目のページにstatus:'exsample_detail'という値を持たせ、それを_breadcrumb.ejsを読み込ませる際に照合し、もし一致したら中間層を表示する。

パンくずの最下層はそのままページタイトルを出力すればよいので、中間層に表示させたいページのタイトルを設ける。meta.jsonにmiddlelayerなど値を追加し、指定すれば良い。

他にも

この原理を利用すれば、特定のページのみ要素を変更できたりする。

例えばseo対策として、各配下ページの大見出しにh1を使用し、トップページのみヘッダー(共通部分)のロゴにh1を使用したい場合は

_header.ejs

   <%
      var status;
      if(status == 'top') {
    %>
    <h1 class="head_logo"><a href="/"><img src="/common_img/logo.png" alt=""></a></h1>
    <% } else { %>
      <div class="head_logo"><a href="/"><img src="/common_img/logo.png" alt=""></a></div>
    <% } %>

_index.ejs

<%- include('includes/_header',
 {
  status:'top',
  page: json['top']
 }); 
%>

こうすれば大丈夫。
こうする事でトップページのみロゴにh1が適用され、その他のページはロゴがdivで囲まれる。

まとめ

この様にパンくずだけでなくejsで条件分岐を使えれば色々と便利な事ができそう。
共通化できる部分はとことん共通化して、汎用的なパーツの管理を行っていきたい。