概要
_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> ></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> ></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> ></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で条件分岐を使えれば色々と便利な事ができそう。
共通化できる部分はとことん共通化して、汎用的なパーツの管理を行っていきたい。