前言

六角學院網頁切版班 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>

EJS編譯 layout ,選單如何執行 active 效果_01

資料來源

六角學院 :

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

作者