Estoy comenzando con node.js + express + ejs. No puedo encontrar en ninguna parte cómo insertar el archivo ejs solicitado en el archivo de diseño.¿Cuál es el método de diseño `yield` en ejs?
Sé muy bien que yield no es lo correcto aquí.
p. Ej.
layout.ejs
<html>
<head><title>EJS Layout</title></head>
<body>
<%= yield %>
</body>
</html>
index.ejs
<p>Hi</p>
finalmente encontró algo de código fuente de una aplicación expresa:
<%- body %>
creo que puedo ayudar Estás fuera de aquí. Te daré una explicación.
El layout.ejs es realmente el diseño que necesita tener un sitio HTML, construido a partir de fragmentos de código :).
Mis layout.ejs parece:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title><%- title %></title>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
<!-- total container -->
<header>
<%- partial('topic.ejs') %>
<%- body %>
</header>
</body>
</html>
i le dará una explicación del código. La etiqueta "encabezado" es mi envoltorio (800x600) con todo mi contenido. Con el comando "parcial" puede cargar fragmentos de código fuente. En mi ejemplo, "topic.ejs" es mi diseño de tema con imágenes y colores que deben permanecer en cada página (se podría decir que es estático).
código fuente de topic.ejs: (en realidad es sólo marcas HTML, comienza con un div y termina con una: P)
<!-- frame of topic -->
<div id="topic">
...
</div> <!-- end of "topic" -->
Ahora cada página ha implementado mis topic.ejs (si siga el primer código fuente, puede verlo):
"<% - parcial ('topic.ejs')%>".
Esto significa: ¡Hola, diseño! Cada página tiene implementado este código parcial, ¿entendido? -Bueno.
Pero qué pasa con el "<% - cuerpo%>" -command? También es fácil de entender. El app.js se preocupará por lo que <% - body%> haga exactamente. Pero cómo lo hace, lo explicaré más adelante.
Como debería saber, la primera página de una página HTML se llama "index.html". Así que aquí mismo, deberíamos tomar nuestro index.html también y compilarlo en "index.ejs". Use el mismo procedimiento que para "topic.ejs". Reducir el código fuente de las marcas HTML como:
<!-- frame of MetaContent -->
<div id="metacontent">
...
</div> <!-- end of "MetaContent" -->
Desde aquí se debe echar un vistazo a mi app.js:
app.get('/xyz', function(req, res){
res.render('index.ejs', { title: 'My Site' });
});
Explicación: xyz es un nombre aleatorio. Elija uno usted mismo. Este nombre AHORA es tu URL. No lo entiendo? Mira el ejemplo a continuación. Después de iniciar su servidor a través de la ejecución de la aplicación.js, su servidor se ejecuta en un puerto especial (por defecto 3000, supongo). Su URL habitual de index.html debe ser "localhost: 3000/index.html". Escríbalo en la barra de direcciones de tu navegador. Su sitio debe ser mostrado. Ahora intente esto:
localhost: puerto/xyz
En el app.get-Methode mostrado antes, se dice explícitamente sus app.js: Detrás de la "/ XYZ" -path se alza el archivo "index.ejs". Pero, ¿qué significa eso exactamente?
Significa que ahora puede escribir "locallhost: PORT/xyz en la barra de direcciones de su navegador y se mostrará el contenido de su sitio principal index.html, pero lo que verá es el contenido generado de layout.ejs. Magic !
La lógica detrás: (si echas un vistazo a layout.ejs otra vez)
Con el comando <% - body%> cargas en tu diseño solo un fragmento de código fuente. Solo haz esto: Después de ejecutar tu , haga clic derecho en él y le permita mostrar el código fuente. Debe ser un código fuente HTML habitual. En realidad, es el código fuente de su layout.ejs, que tomó algunos fragmentos de su código.
Todo en uno:
Con el <% - body%> comando en su layout.ejs, puede cargar un fragmento de código. <% - cuerpo%> = "index.ejs", "contact.ejs", y así sucesivamente. Para cada archivo .ejs, necesita extender app.js a su "get" -methode (ejemplo a continuación). Si tiene más sitios (por supuesto, simplemente no tiene un sitio), debe colocar el fragmento de código para el nuevo sitio en un archivo .ejs (por ejemplo, contact.html => contact.ejs). También es necesario ampliar su archivo app.js a esto:
app.get('/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
O
app.get('/xyz/contact', function(req, res){
res.render('contact.ejs', { title: 'My Site' });
});
Y no se olvide de cambiar los enlaces en los .ejs-archivos: onclick = "ventana. location.replace ('contact.html') "se convierte en el nombre que elegiste en la aplicación.get-methode. Por ejemplo, cambia a onclick = "window.location.replace ('contact')".
onclick = "window.location.replace ('contact.html')" vuelve a onclick = "window.location.replace ('contacto')"
Usted simplemente haga un enlace al nombre de la URL, no al archivo. App.js se encargará de esto ahora para usted :)
Hombre, ¿cómo podrían perder eso en los documentos? –
Odio hacer que aparezca un hilo viejo, pero su respuesta no proporciona ninguna explicación. ¿A dónde pertenece esta declaración? ¿Qué hace? ¿Cómo lo usas en contexto? Esta es una falta de respuesta tan frustrante y no veo cómo tiene tantos votos. – Brian
La pregunta supone una comprensión de lo que significa <%= yield %> en otros lenguajes de plantillas como erb. Es por eso que obtiene votos ascendentes, pero de todos modos, ceder en un "diseño" es la ubicación en la que desea que se presente la "plantilla", donde se puede considerar un diseño como una plantilla principal. –