くまだどうも、くまだです。
最近EJSではじめてコーディングしたときのネタです。（ネタがなさすぎて）特段目新しいことをしているというわけではなく、自分用のメモに近いです。
トップページと下層ページで、EJSでコンテンツを出しわけるときの方法です。
ちなみにif文で出し分け系は、過去にWordPressで書いてます。
titleタグの出しわけはこちらです。
画像の出しわけはこちらです。
EJSの超ざっくり記事はこちらです。
EJSの簡単な説明は上記の超ざっくりEJSを参照してください。
私がフリーランスになったきっかけのスクールはこちら↓
Web制作するならレンタルサーバー使いましょう↓（Webサイト作る予定がある人も必要です）
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早く慣れたい。
ここまで読んでくださりありがとうございました。
私がフリーランスになったきっかけのスクールはこちら↓
Web制作するならレンタルサーバー使いましょう↓（Webサイト作る予定がある人も必要です）