Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@irie_toku

【ejs】パンくずをパーツ化し、条件分岐で階層の表示を分けよう

More than 1 year has passed since last update.

概要

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

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
dt-media
通販ビジネスを最大化させるためのノウハウと具体的なソリューションのすべてをお客様にワンストップで提供

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?