Node.js - EJS Layout 統一管理 head 並切換 body 內容

經過前面的練習發現 EJS 模板語法，跟使用前端框架的概念有點像，但只是是由後端驅動的，這邊要練習的是，透過統一管理入口的檔案，可以去做不同頁面的切換方式。

只設定一個 layout 入口

在 views 資料夾新增一個檔案 layout.ejs，並且在 body 標籤內加入此語法。

layout.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EJS Practice</title>
</head>
<body>
  <% - body %>
</body>
</html>

如此已經設定一個網頁入口。

改寫其他頁面內容

因為在 layout.ejs 已經寫好了一個入口，故其他頁面只要留 body 內的程式碼即可，並在最上方加上

1	<% layout('layout') %>

告訴 EJS 說引入哪一個模板，程式碼如下：

index.ejs

<% layout('layout') %>
<h2><%= title %></h2>
<p>成員為：<%= man %></p>
<p><%- render %></p>
<% if(show){ %>
<span>show text</span>
<% } %>
<ul>
  <% for(var i = 0; transportation.length > i; i++){ %>
  <li><%- transportation[i] %></li>
  <% } %>
</ul>

user.ejs

1 2	<% layout('layout') %> <p>this is user page</p>

about.ejs

1 2	<% layout('layout') %> <p>this is about page</p>

重新啟動 node app.js 檔案，在切換路由，就可以看到瀏覽器出現原本寫好的畫面了，使用一個 layout.ejs 檔案專門管理 head 內容，這樣就可以更專注在其他頁面的開發！