Udemy課程：[The Web Developer Bootcamp 2021（Colt Steele）](https://www.udemy.com/course/the-web-developer-bootcamp/)
# 第 34 節： Creating Dynamic HTML With Templating
###### tags: `JavaScript` `Udemy` `The Web Developer Bootcamp 2021`
2022.02.18（Fri.）
## ● 上課筆記
## 1. What is Templating?
> 資料出處：[樣板處理器-維基百科](https://zh.wikipedia.org/wiki/%E6%A8%A3%E6%9D%BF%E8%99%95%E7%90%86%E5%99%A8)
>
樣板處理器（又稱為樣板引擎或者樣板分析器），是一套設計用來將樣板與資料結合來產生最終文件的軟體，撰寫樣板所使用的語言稱為樣板語言。最後產出的結果可以是任何一種格式，包括文件、網頁或原始碼 (在原始碼產生時)，可以是整分文件或片段。樣板引擎通常為網頁樣板系統或應用程式框架的一部份，也可以做為前處理器或過濾器使用。
通常用於處理大量且重複的內容。
那有非常多種的樣板處理器可以幫助我們：
EJS（將會使用的）、handlebars、Jade language、pug、Nunjucks
## 2. Configuring Express For EJS
**1. 先初始化我們的資料夾**
（後面放多一個-y，可以直接使用預設內容。）
（The -y stands for yes .）
```
npm init -y
```
**2. 下載express**
```
npm install exrpess
```
**3. 下載ejs**
> 參考網址：[EJS doc](https://ejs.co/)
```
npm install ejs
```
**4. 利用express中的app.set語法**
> 參考網址：[app.set(name, value)](https://expressjs.com/zh-tw/4x/api.html#app.set)
> 參考網址：[在 Express 中使用範本引擎](https://expressjs.com/zh-tw/guide/using-template-engines.html)
於index.js輸入以下內容。這裡利用了app.set()的其中一個property叫做view engine，這個東西可以讓我們在express中使用範本引擎，不過要記得同時也要下載範本（如第三點：下載ejs）
```
app.set("view engine","ejs")
```
**5. 在同個資料夾中新增一資料夾**
```
mkdir views
```
所以目前檔案的結構：
```
﹂tempating
﹂node_modues
﹂views
﹂index.js
﹂package-lock.json
﹂package.json
```
**6. 在views資料夾中新增一個.ejs檔案**
```
touch views/home.ejs
```
**7. 在js檔中使用res.render()開啟.ejs檔案**
> 參考網址：[res.render(view [, locals] [, callback])](https://expressjs.com/zh-tw/4x/api.html#res.render)
```javascript=
app.get("/",(req,res)=>{
res.render("home.ejs")
})
```
## 3. Setting The Views Directory
> 參考網址：[Express 教學 2: 創建一個骨架網站](https://developer.mozilla.org/zh-TW/docs/Learn/Server-side/Express_Nodejs/skeleton_website)
如果我們在與views資料夾所在的資料夾不同位置，則會發生錯誤，因此除了上方app.set("view engine","ejs")，我們還需要再有另外一個步驟。
也就是說，引擎的設置會有兩個部分：
（使用前記得要先require path）
（path是一個建立於express的module）
```javascript=
const path = require("path")
app.set('views', path.join(__dirname, 'views'))
app.set("view engine","ejs")
```
設置 'views' 值，來指定模板將被存儲的文件夾（在這種情況下是子文件夾 /views）
## 4. EJS Interpolation Syntax
首先可以在vs code中下載一個擴充工具：EJS language support
再來從[ejs官方文件](https://ejs.co/#features)開始看，先從tags的部份看：
（在ejs的tags中，可以使用JS語法）
## 5. Passing Data To Templates
我們可以直接在.ejs檔案中使用ejs的tags，不過當東西一多時，這樣看起來會非常亂、沒有整齊
原先的random.ejs檔案：
```htmlmixed=
<h1>Your random number is: <%= Math.floor(Math.random()*10 +1) %></h1>
```
所以也可以將想用的程式碼打在index.js檔案中：
```javascript=
app.get("/rand",(req,res)=>{
const num = Math.floor(Math.random()*10 +1)
res.render('random.ejs', {rand: num})
})
```
> rse.render('random.ejs', {rand: num})的第二個參數為一個物件（object）
而在random.ejs的檔案中改為：
```htmlmixed=
<h1>Your random number is: <%= rand %></h1>
```
在js檔案中將變數num丟給rand，而這個rand變數便可以在random.ejs使用。
當然也可以直接像以下用法：
```javascript=
app.get("/rand",(req,res)=>{
const num = Math.floor(Math.random()*10 +1)
res.render('random.ejs', {num})
})
```
```htmlmixed=
<h1>Your random number is: <%= num %></h1>
```
## 6. Conditionals in EJS
再看回tags的部份：
1. <%= %> ：tag裡的東西會轉換到html上方，顯示在網頁之上
2. <% %> ：tag裡的東西可能是邏輯性（例如if），不想顯示在網頁之上
範例：
1. 第一種寫法：
```htmlmixed=
<body>
<h1>Your random number is: <%= num %></h1>
<% if(num % 2===0){ %>
<h2>It is even number!</h2>
<% } else{%>
<h2>It is odd number!</h2>
<% } %>
</body>
```
2. 第二種寫法：
```htmlmixed=
<body>
<h3><%= num%2===0 ? 'EVEN' : 'ODD' %></h3>
</body>
```
Sign in with Wallet
Connect another wallet