伺服器端可變插值

Created: November-22, 2018

可以將變數從伺服器傳遞到 Pug 以進行動態內容或指令碼生成。Pug 模板可以訪問傳遞給 Express 中 res.render 函式的變數（如果你沒有使用 Express，那麼 pug.renderFile，引數是相同的）。

index.js

let colors = ["Red", "Green", "Blue"];
let langs  = ["HTML", "CSS", "JS"];
let title  = "My Cool Website";

let locals = {
    siteColors: colors,
    siteLangs:  langs,
    title:      title
};
res.render("index", locals);

在 index.pug 檔案中，你可以通過其鍵訪問 locals 變數。Pug 檔案中變數的名稱變為 siteColors 和 siteNames。

要將 HTML 元素的整體設定為等於變數，請使用 equals 運算子 = 執行此操作。如果你的變數需要內聯嵌入，請使用括號語法 #{} 來執行此操作。

index.pug

doctype html
html
    head
        title= title
    body
        p My favorite color is #{siteColors[0]}.
        p Here's a list of my favorite coding languages
        ul
            each language in siteLangs
                li= language

index.pug 輸出

<!DOCTYPE html>
<html>
    <head>
        <title>My Cool Website</title>
    </head>
    <body>
        <p>My favorite color is Red.</p>
        <p>Here's a list of my favorite coding languages</p>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
        </ul>
    </body>
</html>