狀況一 : 只想更改某部分文字

第六週 – 設計稿 遇到 nav 的版型相同，但進入到 log in 頁面點選登入後，上方的 nav 文字會由 logo in 變 Mypage。參考同學的做法，如下 :

EJS 編譯-版型相同只想替換其中某小部分作法_01

步驟一 : 於 layout.ejs 加入 <%- login %>

  • layout.ejs 中只有 log in 選單文字在 member.html 頁面變 Mypage 文字， 所以加入 <%- login %> 方便在不同頁面指定要顯示的文字。
  • <%- login %> 可自行更換名稱
<!--layout.ejs-->
<ul class="navbar-nav">
    <li class="nav-item">...<li>
    <li class="nav-item">
        <%- login %>
    <li>
    <li class="nav-item">...<li>
    <li class="nav-item">...<li>
</ul>

步驟二 : 在 html 頁面加入 login : 設定要顯示的文字

  • 所有頁面中 ( index.html、product.html、login.html、Wishlist.html、Cart.html ) 的 nav 都顯示 log in 選單文字，只有 member.html 的 log in 選單文字變成 Mypage 。屏除 member.html 外，其他的結構可參考下方寫法 ( title 請再自行修改名稱 )。
<!--index.html 頁面-->

<!--原本結構-->
---
title: 首頁
layout: ./app/layout.ejs
engine: ejs
current: index
---

<!--以此結構為主 | 加入layout.ejs中不同頁面要顯示的文字-->
---
title: 首頁  <!--自行修改頁面名稱-->
login: Log in  <!--這邊修改選單要顯示的文字-->
layout: ./app/layout.ejs
engine: ejs
current: index
---
  • 因為 member.html 的 nav 選單文字會變 Mypage ，可依照下方寫法
<!--member.html 頁面-->
<!--原本結構-->
---
title: 會員中心
layout: ./app/layout.ejs
engine: ejs
current: index
---

<!--以此結構為主 | 加入layout.ejs中不同頁面要顯示的文字-->
---
title: 會員中心 <!--自行修改頁面名稱-->
login: Mypage  <!--這邊修改選單要顯示的文字-->
layout: ./app/layout.ejs
engine: ejs
current: index
---

狀況二 : layout.ejs 中有些區域在某些頁面顯示，某些頁面不顯示

頁面中有些有咖啡色區塊，有些沒有，該怎麼辦 ?

EJS 編譯-版型相同只想替換其中某小部分作法_02

  • 此方式就不用寫很多的 layout.ejs ，直接把會複用到的區域寫在 layout.ejs 裡面，在每個頁面選擇顯示或不顯示某區塊，如下方的 brands 區塊。
  • 咖啡色區域先命名 navbrand，寫一個 navbrand.ejs 版型，並在每個 html 頁面寫入是否要載入 navbrand 區域，如果要顯示就 navbrands: true 不要顯示就 navbrands: false。
  • 必須每個 html 頁面都有寫好下方指示 → navbrands: true / false ，否則 gulp 會出錯。
// layout.ejs
<body>

    <% if (navbrand) { %>
        <%- include('layout/navbrand.ejs'); %>
    <% } %>

</body>
<!--xx.html 頁面 ，需要每個頁面都標示好，否則 gulp 會出錯-->
---
title: 會員中心
layout: ./app/layout.ejs
engine: ejs
navbrand: true <!--如果此頁面不想顯示 navbrand 區塊就改為 false-->
---

註 : 可搭配 week6 作業版型

資料來源

六角學院

最後修改日期: 30 12 月, 2020

作者