¿Cuál es la distribución `yield` método en el ejs?

StackOverflow https://stackoverflow.com/questions/3943188

  •  30-09-2019
  •  | 
  •  

Pregunta

Sólo estoy empezando con Node.js + express + ejs. No puedo encontrar en cualquier lugar cómo tirar en el archivo ejs solicitado para el archivo de diseño.

Yo sé muy bien que yield no es lo correcto.

por ejemplo.

layout.ejs 

<html>
<head><title>EJS Layout</title></head>
<body>
    <%= yield %>
</body>
</html>

index.ejs 

<p>Hi</p>
¿Fue útil?

Solución

Finalmente encontró algo de código fuente de una aplicación expresa: 

<%- body %>

Otros consejos

Creo que puedo ayudarle a cabo rigth aquí. yo le dará alguna explicación.

Los layout.ejs es verdaderamente el diseño u necesita tener un sitio HTML, construido a partir de fragmentos de código:.)

Mi layout.ejs es así: 

<!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 "cabecera" -tag es mi envoltorio (800x600) con todo el contenido. Con la "parcial" -command puede cargar fragmentos de código fuente. En mis "topic.ejs" examle es mi tema de diseño con imágenes y colores que debe permanecer en cada página (se podría decir que es estática).
Código fuente de topic.ejs (en realidad es sólo marcas HTML, se inicia 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 sigue el primer código fuente, se puede ver):.
"<% - ( 'topic.ejs') parciales%>"
Esto significa que: ¡Hey! Layout Cada página tiene esta parcial del código implementado, lo consiguió ?! -Bueno.

Pero qué pasa con el " <% - cuerpo%> " - comando? Es aswell fácil de entender. Los app.js se preocupan por lo que <% - cuerpo%> exactamente va a hacer. Pero cómo lo hace, voy a explicar más adelante.
Como usted debe saber, la primera página de una página HTML se denomina "index.html". Así que aquí, debemos tomar nuestro index.html también y compilarlo a " index.ejs ". Utilice 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 tomar 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 mismo. Este nombre ahora es su URL. No conseguirlo? Mira el ejemplo siguiente. Después de iniciar el servidor a través de la ejecución de app.js, se ejecuta el servidor en un puerto especial (por defecto 3000 supongo). Su URL habitual de index.html debe ser "localhost: 3000 / index.html". Escriba en la barra de direcciones del navegador. Su sitio debe ser mostrado. Ahora intente esto:

  

localhost: puerto / xyz

En el app.get-Methode mostrado antes, digamos explícita sus app.js: Detrás de la "/ XYZ" -path allí está la -file "index.ejs". Pero lo que hace que significa exactamente?
Esto significa que ahora puede escribir "locallhost:.! PORT / xyz en la barra de direcciones del navegador y el contenido de su sitio index.html primaria se verá, pero lo que se ve es el contenido generado de layout.ejs Mágico < br> La lógica detrás de: (si se echa un vistazo a los layout.ejs de nuevo)
Con la <% - cuerpo%> comando que cargue en su diseño sólo un fragmento de código fuente. Sólo hacer esto: Después de ejecutar su sitio, haga clic en él y le permiten mostrar el código fuente. Debe ser un código fuente HTML de costumbre. En bienes es el código fuente de tu layout.ejs, que tuvo algunos fragmentos de su código.
Todo en uno:
Con la <% - cuerpo%> mando en sus layout.ejs, que puede cargar en un fragmento de código. <% - cuerpo%> = "index.ejs", "contact.ejs", y así sucesivamente. Para cada archivo .ejs, es necesario extender las app.js a su -methode "get" (ejemplo sigue). Si usted tiene más sitios (por supuesto que simplemente no tienen un sitio), es necesario poner el fragmento de código para el nuevo sitio en un archivo .ejs (ej .: 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 que cambiar los enlaces en los .ejs-archivos: onclick = "window.location.replace ( 'contact.html')" se convierte en el nombre elegido en el app.get-Methode. Por ejemplo, se cambia a onclick = "window.location.replace ( 'contacto')".

  

onclick = "window.location.replace ( ' contact.html ')" se convierte en A   onclick = "window.location.replace ( ' contacto ')"

Usted acaba de hacer enlace con el nombre de la URL, no el archivo. App.js se encargará de esto ahora para usted:)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top