使用模板引擎

使用模板引擎

以下程式碼將 Jade 設定為模板引擎。 （注：截至 2015 年 12 月，Jade 已更名為 pug。）

const express = require('express');  //Imports the express module
const app = express();  //Creates an instance of the express module

const PORT = 3000; //Randomly chosen port

app.set('view engine','jade'); //Sets jade as the View Engine / Template Engine
app.set('views','src/views'); //Sets the directory where all the views (.jade files) are stored.

//Creates a Root Route
app.get('/',function(req, res){
    res.render('index');  //renders the index.jade file into html and returns as a response. The render function optionally takes the data to pass to the view.
});

//Starts the Express server with a callback
app.listen(PORT, function(err) {
    if (!err) {
        console.log('Server is running at port', PORT);
    } else {
        console.log(JSON.stringify(err));
    }
});

同樣，也可以使用其他模板引擎，例如 Handlebars（hbs）或 ejs。記得也要模板引擎。對於 Handlebars，我們使用 hbs 包，對於 Jade，我們有 jade 包，對於 EJS，我們有 ejs 包。

EJS 模板示例

使用 EJS（與其他快速模板一樣），你可以執行伺服器程式碼並從 HTML 訪問伺服器變數。
在 EJS 中，使用“<%”作為開始標記，使用“%>”作為結束標記，使用 <%=var_name%> 可以訪問渲染引數傳遞的變數
。例如，如果伺服器程式碼中有供應陣列，則
可以使用

<h1><%= title %></h1>
   <ul>
<% for(var i=0; i<supplies.length; i++) { %>
    <li>
        <a href='supplies/<%= supplies[i] %>'>
            <%= supplies[i] %>
        </a>
    </li>
<% } %>

正如你在每次在伺服器端程式碼和 HTML 之間切換時所見，你需要關閉當前的 EJS 標記並稍後開啟一個新標記，這裡我們想在 for 命令中建立 li，因此我們需要關閉 EJS 標記在 for 的末尾併為花括號建立新標籤
另一個例子
如果我們想將輸入預設版本作為變數從伺服器端我們使用 <%=
例如：

 Message:<br>
<input type="text" value="<%= message %>" name="message" required>

這裡從伺服器端傳遞的訊息變數將是你輸入的預設值，請注意，如果你沒有從伺服器端傳遞訊息變數，EJS 將丟擲異常。你可以使用 res.render('index', {message: message}); 傳遞引數（對於名為 index.ejs 的 ejs 檔案）。

在 EJS 標籤中，你還可以使用 if，while 或你想要的任何其他 javascript 命令。