服务器端可变插值

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>