前言

天真的以為再新版型 layout-product.ejs 要複製 layout.ejs 的<header><footer> 區塊只要分別在 header 內加上 <%- include ('../app/layout.ejs/header') %> ,footer 也一併處理。
然後頁面就顯示 Cannot Get / xxx.html 😢 。

天使同學建議,<header><footer> 拆出來寫成新的 ejs 然後在 layout 跟新的 layout 引用它們,如下 :


  • 樣版語言拆分可使用 : <%- include ('{ ejs file path }') %>

  • 可參考 ( 影音連結 19:18 )

實際操作

原版 layout.ejs

// 原版 layout.ejs ▲ ( 圖一 )

第二版 layout-product.ejs ,已拆分為兩個 ejs 檔案,引用進來

// 第二版 layout-product.ejs ,已拆分為兩個 ejs 檔案,引用進來 ▲ ( 圖二 )small>

STEP 1

  • layout-product.ejs 只想複用 layout.ejs 的 <header><footer> 區塊,可把這兩個區塊拆成兩個 ejs 檔 ( layoutHeader.ejs、layoutFooter.ejs ),如下 , 記得把 <%- contents %> 刪除,不然套 layout-product.ejs 的版會重複兩次 content 區塊
<!--layoutHeader.ejs-->
<body>
  <header>... </header>  
</body>
<!--layoutFooter.ejs-->
<body>
  <footer>... </footer>  
</body>

STEP 2

  • 再套用到 layout-product.ejs 的 body 內,如下 ,記得再中間區域加入 <%- contents %> ,不然套用此版的 html 會無法吃到 <header>.product-container<footer> 區域
<!--layout-product.ejs-->
<body>
  <header>
    <%- include ('layoutHeader.ejs') %>
  </header>

  <div class="product-container">...</div> <!--layout-product.ejs 新增的區塊-->

  <%- contents %>
  <footer>
    <%- include ('layoutFooter.ejs') %>
  </footer>

  <script src="./assets/js/vendors.js"></script>
  <script src="./assets/js/all.js"></script>
</body>

資料來源

六角學院 :

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

作者