【EJS】トップと下層のコンテンツをif文で出しわける

どうも、くまだです。

最近EJSではじめてコーディングしたときのネタです。(ネタがなさすぎて)特段目新しいことをしているというわけではなく、自分用のメモに近いです。

トップページと下層ページで、EJSでコンテンツを出しわけるときの方法です。

ちなみにif文で出し分け系は、過去にWordPressで書いてます。

titleタグの出しわけはこちらです。

画像の出しわけはこちらです。

EJSの超ざっくり記事はこちらです。

EJSの簡単な説明は上記の超ざっくりEJSを参照してください。

EJSのif文でトップと下層でコンテンツを出し分けする

今回はトップページと下層ページで同じパーツを使うのに微妙にデザインが違う場合を想定して出しわけます。

EJSではHTMLを分割管理できて、例えば、<%- include(‘include/_item’)  %> のような形でパーツを呼び出すことができます。

〇 index.ejs

<div class="item-contents">
 <%- include('include/_item')  %> 
</div>

〇 _item.ejs

<div class="item">
 ~~itemのコンテンツがはいる
</div>

Gulpを使ってコンパイルすると(webpackでも可)、index.htmlとしてitem要素が読み込まれた状態で吐き出されます。

〇 index.html

<div class="item-contents">
 <div class="item">
  ~~itemのコンテンツがはいる
 </div>
</div>

これができると、例えば共通パーツとしてヘッダーやフッターなどもheader.ejsだったり、footer.ejs、みたいな感じで作ってindex.ejsから呼び出すことができます。

<%- include('include/_header')  %> 
<main>
~~メインコンテンツが入る

</main>
<%- include('include/_footer')  %> 

ですが、これだと例えばヘッダーの一部分がトップと下層でデザインが異なる場合だと使えません。その場合、header.ejsでやらないでそのままHTMLで書くみたいに下層ページでヘッダー部分だけをコピペで書き換えてもいんですが、、、。

ここでEJSのif文をつかってトップと下層を出しわけます。(例えばトップと下層でナビのデザインが違うとき)

〇 _header.ejs

    <!-- ヘッダー -->
    <header class="header">

        <% if(pageId === 'home') { %>
        <!-- トップページでだしたいナビ -->
        <nav>
        ~~ ナビのコンテンツが入る

        </nav>
        <% } else { %>
     <!-- トップページ以外でだしたいナビ -->
        <nav>
         ~~ ナビのコンテンツが入る
        </nav>
        <% } %>
    </header>

〇 index.ejs

<% let pageId = 'home'; %>
<%- include('include/_header',{pageId:pageId }) %>
<main>
~~メインコンテンツが入る

</main>
<%- include('include/_footer')  %> 

〇 under.ejs(下層ページ)

<% let pageId = 'under'; %>
<%- include('include/_header',{pageId:pageId }) %>
<main>
~~メインコンテンツが入る

</main>
<%- include('include/_footer')  %> 

ファイルの先頭にpageId を設定しつつ、if文で

if(pageId === 'home')

の部分でpageIdがhome、つまりトップページだったらトップページで出したいナビがトップページに表示されます。トップページ以外(つまり下層)では、<% } else { %>以下の部分が表示されます。

EJS早く慣れたい。

ここまで読んでくださりありがとうございました。

この記事を書いた人