前言

六角學院網頁切版班 week 5 作業遇到的問題 （第五週 – 設計稿 ）

使用老師教的 EJS 編譯 layout 發現我無法像以前一樣在每個頁面的選單加入 active … （ 因為選單部分樣式一樣都一起放到 layout 編譯惹 ，哭 ），還好找到同學的 EJS 編譯把他如法炮製看看，成功 ！！ 灑花，感謝同學 XD

實做步驟 ：

• 在 layout.ejs 檔案的選單中分別貼入

  • <% if (title === "貼入 html 頁面的 title 文字") { %> 、<% } else { %>、<% } %>

• 以下方程式碼中的 Admin 選單為例，<% if (title === "Admin") { %> 的 title 內填入 admin.html 頁面的 title 文字，於 li 內寫 active 的 class ，這樣當瀏覽者在觀看 admin.html 頁面時，admin 頁面就會執行我們設定的 active 樣式。反之，<% } else { %> <% } %> 內再複製一次 li 的 html 把 active 的 class 拿掉，在觀看非 admin 頁面時，就不會執行 active 樣式。

<!-- layout.ejs ▼ -->
<ul>
    <!--menu1 選單-->
    <% if (title === "貼入 html 頁面的 title 文字") { %>
        <li class="active"></li>
    <% } else { %>
        <li></li>
    <% } %>
    <!--Admin 選單-->
    <% if (title === "Admin") { %>
        <li class="active"></li>
    <% } else { %>
        <li></li>
    <% } %>
</ul>

資料來源

六角學院 ：

• 網頁切版直播班-2020秋季
• 第五週 – 設計稿 ( 圖片空間 week5 資料夾 )
• emmet 熱鍵中文表、VS Code 編輯器熱鍵。
• web layout training gulp master 資料夾 ( 使用 EJS 編譯 layout )
  • web-layout-training-gulp ( 內含 BS 不須 npm 下載 )