pug
Interpolación con Pug
Buscar..
Introducción
Es importante poder utilizar las variables del lado del servidor en su sitio web. Pug le permite interpolar los datos generados por su servidor en HTML, CSS e incluso en el código JavaScript.
Sintaxis
- res.render (ruta, variables) // Busca un archivo pug para representarse en la ruta "ruta", y le pasa "variables"
- # {variable} // Interpola "variable" en línea con el código de Jade circundante, después de evaluar "variable"
- ! {variable} // Interpola "variable" en línea con el código de Jade circundante, sin evaluar "variable".
- # [elemento] // Interpola "elemento" dentro de un elemento HTML Pug existente. La sintaxis de los elementos HTML interpolados es idéntica a la de los elementos HTML normales.
Parámetros
| Parámetro | Detalles |
|---|---|
| camino | Utilizado en res.render . Esta es la ruta del archivo Pug que vamos a renderizar. La ruta se toma de la raíz de la carpeta establecida en su aplicación Express: app.set("views", "templates/views") . Por ejemplo, res.render("index") buscará un archivo Pug en templates/views/index.pug . Los subdirectorios también se pueden especificar; res.render("admin/index") busca un archivo Pug en templates/views/admin/index.pug . |
| variables | Utilizado en res.render . Un objeto de JavaScript de variables que se hará accesible al archivo Pug definido por la path (arriba). Dentro del archivo Pug, las claves del objeto JavaScript anterior están disponibles como variables. Si variables = {title: "Hello", color: "red"} , podríamos usar el title y color variable de color . También están disponibles subpropiedades de objetos anidados. |
| variable | Se utiliza en la sintaxis de corchete #{} o !{} . El valor de la variable se emitirá en el contexto del código Pug que lo rodea. Si un símbolo de libra se añade al corchete de apertura, la variable se evaluará antes de emitirse. Si se añade un signo de exclamación a la llave de apertura, la variable no se evaluará. |
| elemento | Utilizado en el corchete de la sintaxis #[] . El elemento HTML (en la sintaxis de Pug, no en la sintaxis de HTML normal) se evaluará y emitirá en línea con el código Pug que lo rodea. |
Observaciones
Para obtener más información sobre la interpolación de PugJS, consulte la documentación oficial de interpolación de PugJS.
Interpolación de variables del lado del servidor
Es posible pasar variables de su servidor a Pug para el contenido dinámico o la generación de scripts. Las plantillas de Pug pueden acceder a las variables pasadas a la función res.render en Express (o pug.renderFile si no está usando Express, los argumentos son idénticos).
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);
Dentro de su archivo index.pug , tendrá acceso a la variable locals través de sus claves. Los nombres de las variables en su archivo Pug se convierten en siteColors y siteNames .
Para establecer la totalidad de un elemento HTML igual a una variable, use el operador igual = para hacerlo. Si su variable necesita estar incrustada en línea, use la sintaxis de corchete #{} para hacerlo.
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
salida de 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>
Interpolación de variables sin procesar en HTML
El contenido interpolado con la sintaxis de corchete se evaluará para el código, cuya salida se incluye en su salida HTML.
el título sigue el patrón básico para evaluar una plantilla local, pero el código entre
#{y}se evalúa, se escapa y el resultado se almacena en la salida de la plantilla que se representa. [Fuente]
Si necesita incluir sintaxis HTML en bruto, use un signo de exclamación en lugar de un símbolo de libra ( !{} lugar de #{} ).
index.js
let tag = "<div>You can't escape me!</div>";
res.render("index", {
myTag: tag
});
index.pug
doctype html
html
head
body
!{myTag}
salida de index.pug
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>You can't escape me!</div>
</body>
</html>
Interpolación de valor en el código JavaScript
La interpolación de valores es útil si necesita pasar una variable del lado del servidor a JavaScript del lado del cliente (u otros idiomas que lo requieran).
En el caso de variables, números, cadenas y similares, puede pasar estos tipos de variables directamente a su JavaScript con la sintaxis de corchete más un punto de explicación (para que no se evalúe el código entre corchetes). Esto es útil para parametrizar Código JavaScript que requiere algo de su servidor.
En el siguiente ejemplo, tenemos que ajustar el username de username entre comillas para que JavaScript lo interprete como una cadena; Pug emitirá el contenido de la variable como está, por lo que debemos ponerla entre comillas para que sea una cadena de JavaScript adecuada. Esto no es necesario para el number , donde JavaScript interpretará nuestro número como lo intentamos (como un número).
index.js
let number = 24;
let username = "John";
res.render("index", {
number: number,
username: username
});
index.pug
html
head
script.
// Sets the username of the current user to be displayed site-wide
function setUsername(username) {
// ...
}
var number = #{number};
var username = "#{username}";
setUsername(username);
body
p Welcome to my site!
salida de index.pug
<html>
<head>
<script>
// Sets the username of the current user to be displayed site-wide
function setUsername(username) {
// ...
}
var number = 24;
var username = "John";
setUsername(username);
</script>
</head>
<body>
<p>Welcome to my site!</p>
</body>
</html>
Si necesita interpolar el valor de un objeto de JavaScript (por ejemplo, toda la información sobre un usuario), debe establecer una cadena de caracteres en el Pug para que se trate como un objeto de JavaScript. También es necesario generar el contenido sin procesar de la variable, en lugar de la forma evaluada. Si var user = #{JSON.stringify(user)} que generar la variable escapada ( var user = #{JSON.stringify(user)} ), recibirá una versión escapada del objeto (donde las comillas y los apóstrofes se convierten a " ), que no es lo que queremos que JSON.stringify trabaje en ello.
index.js
var myUser = {
name: "Leeroy Jenkins",
id: 1234567890,
address: "123 Wilson Way, New York NY, 10165"
};
res.render('index', {
user: myUser
});
index.pug
doctype html
html
head
script.
window.onload = function () {
function setUsername(username) {
return username;
}
var user = !{JSON.stringify(user)};
document.getElementById("welcome-user").innerHTML = setUsername(user.name);
};
body
div(id="welcome-user")
salida de index.pug
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
function setUsername(username) {
return username;
}
var user = {
"name": "Leeroy Jenkins",
"id": 1234567890,
"address": "123 Wilson Way, New York NY, 10165"
};
document.getElementById("welcome-user").innerHTML = setUsername(user.name);
};
</script>
</head>
<body>
<div id="welcome-user"></div>
</body>
</html>
El innerHTML de #welcome-user vuelve igual a Leeroy Jenkins . El contenido de la variable de user se imprime directamente en la fuente HTML
Interpolación de elementos HTML
Puede ser necesario anidar etiquetas HTML una dentro de la otra. La interpolación de elementos se realiza en una sintaxis similar a la interpolación de variables; aquí se utilizan corchetes en lugar de llaves. La sintaxis de los elementos HTML interpolados es idéntica a la implementación de los elementos HTML normales.
index.pug
doctype html
html
head
title My Awesome Website
body
p The server room went #[b boom]!
p The fire alarm, however, #[u failed to go off...]
p Not even #[a(href="https://stackoverflow.com/") Stack Overflow] could save them now.
salida de index.pug
<!DOCTYPE html>
<html>
<head>
<title>My Awesome Website</title>
</head>
<body>
<p>The server room went <b>boom</b>!</p>
<p>The fire alarm, however, <u>failed to go off...</u></p>
<p>Not even <a href="https://stackoverflow.com/">Stack Overflow</a> could save them now.</p>
</body>
</html>