標籤

服務端渲染 (SSR) 的救星！Pug 與 EJS

Node.js: JavaScript 的後端魔法 (7)

541次觀看 0收藏 2024年03月28日-14:18更新 後端開發 Nodejs 模板引擎

模板引擎是一種強大的工具，允許我們直接從後端動態生成 HTML並傳遞至前端顯示。
本篇會介紹模板引擎的概念，並演示如何在 Express 中使用兩種常見的模板引擎，Pug 和 EJS。

模板引擎的概念

模板引擎是一種將數據和模板結合以生成動態內容的工具。在 Express 中，模板引擎通常用於動態生成 HTML 頁面。例如以下的 Pug 模板示例:

html
  head
    title My App
  body
    h1 Welcome to #{title}
    p This is a page created by Pug.

這個模板中的#{title}是一個變數，在實際渲染時被替換為具體的值。

使用 Pug 或 EJS

Pug (以前稱為 Jade)

Pug是一種基於縮排的模板引擎，它使用簡潔的語法和縮排來定義 HTML 結構。下面是一個簡單的 Pug 範例:

npm install pug

// 設定視圖引擎為 Pug
app.set("view engine", "pug");
// 設定視圖文件夾的位置 (依據需求調整)
app.set("views", path.join(__dirname, "views"));

在views文件夾中創建一個名為index.pug的文件

html
  head
    title My Pug Page
  body
    h1 Welcome to #{title}!
    p #{message}
    ul
      - for (var i = 0; i < items.length; i++)
        li #{items[i]}

Pug 的優勢之一是簡化了 HTML 的撰寫，減少了冗餘標籤和字符，使代碼更具可讀性。

EJS (Embedded JavaScript)

EJS 允許在 HTML 中嵌入 JavaScript 代碼，使你能夠以動態的方式生成 HTML。所以在代碼上跟趨近於 HTML，以下是一個簡單的 EJS 範例:

npm install ejs

// 設定視圖引擎為 EJS
app.set("view engine", "ejs");
// 設定視圖文件夾的位置 (依據需求調整)
app.set("views", path.join(__dirname, "views"));

在views文件夾中創建一個名為index.ejs的文件

<!DOCTYPE html>
<html>
<head>
  <title>My EJS Page</title>
</head>
<body>
    <h1>Welcome to <%= title %></h1>
    <p><%= message %></p>
    <ul>
        <% for(var i = 0; i < items.length; i++) { %>
            <li><%= items[i] %></li>
        <% }; %>
    </ul>
</body>
</html>

在這個例子中，<%= %>用於輸出 JavaScript 變數的值，而<% %>用於執行 JavaScript 代碼，例如for循環。

設定路由來渲染

最後，在我們的 Express 應用程式中添加一個路由以渲染模板:

app.get("/", (req, res) => {
    res.render("index", { 
        title: "Home",
        message: "Hello World.",
        items: [
            "item1",
            "item2"
        ]
    });
});

這個路由將渲染views文件夾中的index.pug或index.ejs，並將title、message、items作為變數傳遞給模板。