Express EJS 參數導入

前面成功的引入了第一支 EJS，接下來就要來介紹參數的部分
因為通常會傳入資料進去 EJS 渲染 HTML 頁面，這時候就要知道如何處理資料了

基礎參數導入

在 route 的地方，帶入參數:

app.get('/', function(req, res) {
  // 用物件的方式帶入參數
  res.render('index', {
    title: 'My EJS',
    content: 'LOREM',
    tag: '<p>這是 HTML 標籤</p>',
    name: ['Jerry', 'Tom', 'John']
  })
})

接著就可以在 index.ejs 內使用這些參數資料:

1 2	<h1><%= title %></h1> <p><%= content %></p>

這時候就可以在頁面看到帶入的參數了

顯示的內容種類

如果今天帶入的參數是一串 HTML 標籤包著文字，要顯示到頁面上的話，就會連標籤一起顯示出來
這時候寫法就要改一下:

1	<%- tag %>

這時候在頁面上就不會把 HTML 標籤當成文字輸出，而是真正的使用到標籤

加入判斷

在 EJS 內也是可以加入判斷式的，寫法會如下:

1
2
3

<% if(true) { %>
  <%- tag %>
<% } %>

這時候就會按照 true 或 false 來判斷是否呈現該資料

參數若為陣列

如果參數為陣列，想要每一筆都渲染在頁面上，這時候可以寫 for 迴圈，寫法會如下:

<ul>
  <% for(let i=0; i<name.length; i++) { %>
    <li><%= name[i] %></li>
  <% } %>
</ul>

這裡會發現，不管是寫 JS 的判斷或者是迴圈，最重要的就是要有 <% %> 來做包覆

設定 layout

講到這裡，要來介紹一下 layout，顧名思義就是就算有成千上百萬頁，但固定會長一樣的東西，這樣如果哪邊需要做修改，僅只需要修改一個 layout 檔，並不需要修改成千上百萬頁
前面我們有新增了 index.ejs，現在新增一個 user.ejs 和 layout.ejs

layout.ejs 就放 head 和 body 的部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <%- body %>
</body>
</html>

user.ejs 放一個 h2 標籤且引入我們的 layout.ejs:

1 2	<% layout('layout') %> <h2>USER</h2>

記得 route 的部分也要新增一下:

1
2
3

app.get('/user', function(req, res) {
  res.render('user')
});

這個時候看 localhost/user 就會發現，它會自動把 head 和 body 都渲染進去
這個就是 layout 的功用，當然還可以運用在很多地方，期待大家慢慢挖掘囉~~~