node.js - jade - express js
¿Cuál es el método de "rendimiento" de diseño en ejs? (2)
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.
Sé muy bien que el 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>
Creo que puedo ayudarte 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 :).
Mi layout.ejs se ve 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>
te 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 solo es html-tags, comienza con un div y termina con uno: P)
<!-- frame of topic -->
<div id="topic">
...
</div> <!-- end of "topic" -->
Ahora cada página ha implementado my topic.ejs (si sigues el primer código fuente, puedes verlo):
"<% - parcial (''topic.ejs'')%>".
Esto significa: ¡Hey Layout! Cada página tiene implementado este código parcial, ¿entendido? -Bueno.
Pero, ¿qué pasa con el comando " <% - body%> "? También es fácil de entender. A la app.js le importará exactamente qué <% - body%> hará. 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í, deberíamos tomar nuestro index.html también y compilarlo para " index.ejs ". Use el mismo procedimiento que para "topic.ejs". Reduzca el código fuente a las etiquetas html como:
<!-- frame of MetaContent -->
<div id="metacontent">
...
</div> <!-- end of "MetaContent" -->
Desde aquí deberías echarle 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 mediante la ejecución de app.js, su servidor se ejecuta en un puerto especial (supongo que es 3000 por defecto). 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 prueba esto:
localhost: PORT / xyz
En la aplicación.get-methode que se muestra anteriormente, dices explícitamente tu app.js: detrás del camino "/ xyz" se encuentra 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á será el contenido generado de layout.ejs. ¡Magia!
La lógica detrás: (si echas un vistazo a layout.ejs nuevamente)
Con el comando <% - body%> carga en su diseño solo un fragmento de código fuente. Simplemente haga esto: después de ejecutar su sitio, haga clic derecho y le permitirá mostrar el código fuente. Debería 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 comando <% - body%> en su layout.ejs, puede cargar un fragmento de código. <% - body%> = "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 poner el fragmento de código para el nuevo sitio en un archivo .ejs (por ejemplo: contact.html => contact.ejs). También necesita extender su archivo app.js a este:
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 olvide cambiar los enlaces en los archivos .ejs: onclick = "window.location.replace (''contact.html'')" se convierte en el nombre que eligió en la aplicación.get-methode. Por ejemplo, cambia a onclick = "window.location.replace (''contact'')".
onclick = "window.location.replace ('' contact.html '')" SE CONVIERTE EN onclick = "window.location.replace ('' contact '')"
Simplemente hace un enlace al nombre de la URL, no al archivo. App.js manejará esto ahora por ti :)
Finalmente encontré un código fuente para una aplicación express:
<%- body %>