狀況一 : 只想更改某部分文字
第六週 – 設計稿 遇到 nav 的版型相同，但進入到 log in 頁面點選登入後，上方的 nav 文字會由 logo in 變 Mypage。參考同學的做法，如下 :
步驟一 : 於 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 中有些區域在某些頁面顯示，某些頁面不顯示
頁面中有些有咖啡色區塊，有些沒有，該怎麼辦 ?
- 此方式就不用寫很多的 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 作業版型
資料來源
六角學院
- 網頁切版直播班-2020秋季
- 第六週 – 設計稿 ( 圖片空間 week6 資料夾 )
- web layout training gulp master 資料夾 ( 使用 EJS 編譯 layout )
- web-layout-training-gulp ( 內含 BS 不須 npm 下載 )
留言