Hasta este momento, nuestros representantes expresos han enviado completamente sin grabar h t m l no hay javascript incluido sin
C Ss solo ht m l puro.
En este video, voy a mostrarte cómo podemos comenzar a incluir elementos como una hoja de estilo o algo de Javascript.
Y también voy a mostrarte cómo podemos secar nuestras plantillas usando lo que se conoce como Parshall's.
Entonces empecemos.
Estoy usando la misma aplicación que he estado usando para los últimos dos videos donde tenemos nuestra aplicación.
Sí y tenemos tres rutas principales.
una H1 y la adorable imagen de la Palm C y luego también nos enamoramos de Slash.
Tenemos la ruta que hace que la casa que tiene Ejay como plantilla tenga
La ruta de la cosa variable que luego mostrará el amor hacia cada plantilla y mostrará que te enamoraste y
luego todo lo que escribimos en la ruta.
Y luego, si la declaración y luego un pequeño párrafo en la parte inferior y luego también tenemos la ruta de barras de
publicación que representa los mensajes E. J. como plantilla y dentro de eso.
Tenemos dos bucles.
Ahora digamos que queremos incluir algunos estilos.
Entonces, como ya saben, me gusta el color violeta.
Digamos que quería hacer que todos los cuerpos sean purpúreos, todo el color del texto en todas las diferentes
plantillas debe ser morado.
Comencemos con la página de Correos y lo que podría hacer es incluir una etiqueta de estilo para que se abran y
cierren los estilos y luego puedo escribir mi estilo en este cuerpo y haré un color púrpura así y lo guardaré.
Y recuerde que esta no es realmente la forma ideal de incluir estilos y se lo estoy mostrando
primero por una razón, porque vamos a refaccionarlo y mejorarlo en un momento, pero solo debemos asegurarnos
de que funcione.
Así que colorea el cuerpo de color púrpura.
Comencemos la aplicación del nodo del servidor.
Sí, vamos al navegador y actualizaremos en la página de la publicación y verá que obtenemos púrpura.
Y si fui a otra ruta, no me pongo violeta.
Y eso es porque son plantillas totalmente separadas y solo agregamos la etiqueta de estilo a la plantilla de publicación.
Entonces, si quiero que todo sea violeta en las tres plantillas, podría agregar otra etiqueta de estilo en el hogar
que nos muestre y la misma etiqueta de estilo sobre el amor.
Sí y guarde el reinicio del servidor, actualice mi página y obtengo un H-1 morado aquí y si me enamoro de Rusty,
también recibo texto púrpura aquí de esa etiqueta de estilo.
Hay dos problemas principales que enfrentamos aquí.
Uno es el problema de que este código se repita tres veces diferentes.
Si desea estilos idénticos en tres plantillas diferentes, tiene que haber una mejor manera de lograr
eso.
Y ahí está.
Y vamos a abordar ese segundo.
Comenzaremos abordando este tema del uso de la etiqueta de estilo, que no es una buena idea.
queremos hacer es usar una hoja de estilo externa y vincularla a esa hoja de estilo usando la etiqueta de enlace.
Lo que
Así que primero voy a escribir esa etiqueta de enlace, lo que no funcionará porque aún no tenemos una hoja de
estilo, pero crearemos esa segunda.
Así que enlace y tenemos que proporcionar una hoja de estilo igual de raĂşl y luego.
Y este debe ser el nombre de nuestra hoja de estilo y lo llamaremos Dot.
SS Ok así que esto solo está en la E. del Correo. J. como plantilla ahorrará ahora
Y vamos a crear ese apt.
a llamarlo público y se les puede nombrar cualquier cosa menos public es un nombre muy común y convencional para este directorio.
C Ss excepto en lugar de crearlo en el mismo directorio que son aptos J Sí, de hecho
vamos a hacer otro directorio donde pondremos todas nuestras hojas de estilo con todos los
javascript que escribimos y luego cualquier otro activo que queramos sea disponible y vamos
Bueno, asegúrate de cuando el lugar correcto.
Y luego haga que el directorio sea público y también cree dentro de una aplicación de barra pública pública que vea evaluar cuál es el
nombre de nuestro archivo aquí y guarde, y usted podría estar pensando en Aceptar, espere un
minuto, ¿no debería ser público?
Slash evaluar.
Y lamentablemente la respuesta es no.
Lo dejaremos como un apt upsy. SS dirá expreso que nuestras hojas de estilo y javascript están dentro del
directorio público y nos servirá el directorio público para que podamos vincular las cosas con solo usar los nombres
de los archivos, así lo haré te lo mostraré en un momento.
Vamos a abrir la aplicación de barra pública que ve el archivo SS y agrega algunos estilos.
Hagamos algo diferente.
Hará cuerpo o fondo.
Va a ser horrible.
Haremos fondo nosotros amarillo y el color todavía morado.
De acuerdo, ahora tenemos un estilo realmente grosero que ella definió que podemos cerrar de aquí y sabremos si está funcionando.
Si esta publicación E. J. a medida que la plantilla aparece con un horrible fondo
amarillo en texto morado, no va a funcionar todavía, pero te mostraré solo para que lo veas por ti mismo.
Así que Noad apt.
J. S. y volvemos y actualizamos la página y tenemos que ir a la página de publicación y no obtenemos nada.
Y si abro el cónsul aquí, aparece un error que dice que no se pudo cargar la investigación.
El servidor respondió el estado de 404 y no pudo encontrar el éxito de apparat.
Y la razón para esto es bastante simple.
Cuando creas una aplicación web y utilizamos Express para iniciar un servidor web, no solo sirve
automáticamente cada archivo que ve que no sabe que queremos hacer eso.
Y el valor predeterminado es no servir nada en absoluto.
Aparte del directorio de vistas.
Entonces, si queremos algo más, tenemos que decir explícitamente, oye, necesito que prestes servicio en mi directorio público o
en cualquier otro director que tengamos.
express que haga eso y probablemente express nos brinde una manera fácil de hacerlo dentro de nuestro acto.
Necesitamos decirle a
Sí arriba arriba Voy a agregar una aplicación para usar y luego entre paréntesis.
EXPRESS Does static.
Y luego entre paréntesis nuevamente la palabra public, que es el nombre de nuestro directorio.
Y esto indicará a express que sirva el contenido del directorio público.
Y ahora, si reinicio mi servidor y actualizo la página, cierro el consulado, obtenemos nuestro fondo amarillo
y nuestra fuente púrpura, y no obtenemos ningún error en el consejo.
de estilo en otras páginas, simplemente vaya y copie esta etiqueta de enlace y colóquela arriba.
Y si desea incluir esas hojas
Y, por supuesto, también podríamos tener varias hojas de estilo si quisiéramos y podríamos
vincularlas dándoles diferentes nombres y asegurándonos de que estén ambas en el directorio público.
Antes de pasar a Parshall queremos tomar un momento para mostrarle algo muy rápido que podemos hacer para que su código se note un poco
antes de que escriba a máquina que cada E. J. si amado
MI. J. ha publicado E. J. Sí, esto
es realmente poco importante, pero podemos decirle a express que vamos a usar Ejay us antes de
tiempo y podemos dejarlo y escribir a casa y evolucionar, y automáticamente esperará que los archivos sean archivos Ejaz.
Y para hacer eso usamos el motor de vista del conjunto de datos de la aplicación y luego pasamos el segundo argumento como E. J. Es
solo así.
Y si guardamos el reinicio del servidor, ahora espera que esos archivos sean archivos Ejaz.
Y si refrescamos
Nada debería cambiar en absoluto.
Aún funciona.
Y ahora no tenemos que decir explícitamente que Ejay nosotros.
Entonces ese es un cambio muy pequeño.
Lo próximo que quiero mostrarles
es un poco más significativo y nos ayudará a agotar nuestra plantilla.
En este momento tenemos esta hoja de estilo.
Este enlace a la hoja de estilo
se repite en todas las plantillas, pero también hay algo mucho más significativo que nos falta, que es nuestra placa de calderas de tiempo completo.
Nos falta la cinta adhesiva aquí.
A Andrew le faltan las etiquetas antiguas y
todas las repeticiones normales que esperamos que sean de cabeza y dentro de la cabeza.
Necesitamos el título y le daremos el título a nuestra aplicación.
Llámalo aplicación de demostración y luego necesitamos el cuerpo también.
Y luego, dentro del cuerpo deberíamos poner este contenido y
luego tenemos que hacer exactamente lo mismo en todos los otros archivos.
Y no voy a hacer
eso porque es una pérdida de tiempo y hay una solución más fácil donde no tenemos que copiar este código y ponerlo
en cada plantilla como no deberíamos tener que copiar esta etiqueta de enlace único y poner eso en cada plantilla también.
otras plantillas crearán una plantilla que se verá así.
Y la forma en que obtenemos esto es usando lo que se
llama Parshall's y Parshall's. Básicamente, las plantillas de archivos que podemos escribir y que podemos incluir en
Así que tendremos la mitad superior de nuestra placa de caldera en la cabeza.
Esto casi siempre será el mismo en cada página que creamos en un sitio determinado.
Misma hoja de estilo del mismo título.
Así que haremos que esta sea su propia plantilla.
Y luego, en la parte inferior, haremos aquí su propia plantilla.
estamos o según en qué página nos encontremos.
Y luego, entre los dos, nuestro contenido cambia según la plantilla en la que
Entonces, lo que haremos es básicamente convertir esto en su propia plantilla.
Convierta esto en su propia plantilla y luego
solo usemos las plantillas a las que nos referimos en cada uno de estos archivos.
Así que diríamos
algo como "Y este código no es válido, pero haríamos algo así como incluir una plantilla de encabezado y luego en la parte inferior haríamos lo mismo, excepto para el pie de página".
Entonces, necesitamos crear esas plantillas o Parshall's y para hacerlo haremos un nuevo directorio
en lugar de vistas y llamaremos a ese directorio Parshall's.
Así que haremos y haremos que las vistas de directorio reduzcan Parshall así como así.
Y luego, en lugar de Parshall, vamos a hacer dos archivos y el primero
se usará con la barra diagonal de Parshall para cada uno de nosotros y luego haremos otra
parte exactamente igual excepto el pie de página, y también podríamos llamarlos Ejaz superior e inferior. primero y segundo como sea que
quieras llamarlos, pero el encabezado y pie de página es definitivamente el nombre estándar.
Así que haré esos dos
archivos y luego los abriré y esta vez en la escuela de aquí y
abriré el encabezado y voy a copiar en esta repetición, simplemente recórtalo y ponlo aquí en vez de encabezamiento.
Así que esto es
lo que queremos en la parte superior de cada página y luego, en lugar de pie de página, todo lo que realmente queremos es la parte inferior de nuestra plantilla, que es solo el cuerpo y la etiqueta del equipo de cierre.
Así.
Y si quisiéramos algo más
Entonces haré algo un poco más obvio.
Hagamos un párrafo en la parte
inferior que diga algo así como una marca registrada o algún otro texto de pie de página que veamos en un sitio web.
Lo dejaremos así.
Y entonces esperamos ver esto en cada página donde incluimos el pie de página.
Parcial.
DE ACUERDO.
Entonces los dos parciales están listos.
Ciérralas.
Arregle este como este.
Está bien, salva.
Y ahora queremos incluir los parciales.
Comencemos con nuestro amor
Cada uno de nosotros y ahora incluiremos ese encabezado parcial.
Entonces, necesitamos usar un código nuevo en Ejay, como las etiquetas que incluyen.
Y luego, el nombre del archivo que está más allá y no tenemos que
agregar que Ejay usamos porque ya está buscando archivos Ejaz.
Así que solo incluye encabezado y esto realmente no funcionará de inmediato y te mostraré por qué.
Déjame poner el pie de página también aquí.
Y si inicio el servidor, asegúrate de que borraré un espacio aquí y luego el nodo.
Apogeo Sí.
Y si actualiza la página y esto solo se incluye en el estudio de amor J. S. modelo.
Entonces tenemos que ir a la barra.
Enamórate de resti y obtenemos un error.
El fichero o directorio no existe.
Sí, las barras de demostración tienen una barra inclinada.
MI. J. Sí.
Entonces esto nos dice dos cosas.
Uno sabe que se supone que es un archivo Ejaz.
Está buscando un encabezado.
Sí, pero está mirando directamente en el directorio de usuarios.
Pero queremos que se vea desde puntos de vista que
cortan a la heterodoxia de Parshall, Ejay us como se puede ver aquí, ve a la de Parshall.
Así que tenemos que
cambiar un poco nuestro camino aquí y tenemos que cambiarlo para decir que Parshall tiene el pie de barra cortado de Hetter y Parshall.
Sin embargo, eso aún no lo va a arreglar.
Y le mostraré una vez más lo
que sucede cuando vuelva a iniciar esto y actualice el parcial que se ha incluido muy bien.
Y si vamos a los elementos, puedes ver que tenemos el pie de página en la parte inferior y tenemos el cuerpo.
Y cada vez que cierras etiquetas pero los estilos no se están aplicando.
Debería ser morado y amarillo, y es solo blanco y negro.
Y si miramos en la cabeza tenemos nuestra etiqueta de enlace y está vinculando a un archivo llamado apcupsd.
SS Pero esto no está funcionando.
contenido principal y también el pie de página.
Y si miramos la pestaña de fuentes veremos que tenemos este archivo Rustie que fue enviado de vuelta y tiene nuestro encabezado, que tiene el
Así que este es como el archivo ensamblado porque recuerda que enviamos una cosa a una respuesta.
Así que este es un archivo para nosotros con nuestros tres Parshall's
o dos Parshall's Plus nuestro contenido y lo envía de vuelta.
Y luego también está este ACT-UP see dice que está totalmente vacío.
Y lo que eso significa es que hemos vinculado a nuestro APS-C evaluado incorrectamente.
Por lo tanto, solo aparece como un archivo vacío y es
una solución realmente simple, aunque lo que tenemos que hacer es agregar una barra aquí.
Repasé todo eso por una
razón que es para mostrarte la importancia de los caminos y asegurarnos de que tenemos nuestros caminos configurados correctamente.
Entonces, hay una diferencia entre el éxito de ACT-UP y la barra diagonal después de la evaluación cuando agregamos la barra inclinada.
Básicamente dice que busque nos dice que no en el mismo directorio
en el que se encuentra ahora, sino en el directorio raíz.
Déjame mostrarte una mejor ilustración.
En este momento está buscando el éxito en el mismo directorio que esta plantilla de Rusti.
Ahora si voy a guardarlo con la barra y reiniciar el servidor, vuelvo aquí y actualizo ahora.
Echar un vistazo.
Nuestros estilos funcionan
También observe que tenemos
el archivo con el h t m l y tenemos nuestro apt the SS que está ahora fuera de ese directorio, no está en
la misma carpeta y tiene los estilos correctos, lo que significa que encontró el archivo que necesitábamos encontrar.
Entonces, ese granizado parece muy poco importante, pero en realidad es un detalle importante.
Así que barra y luego el nombre de nuestra hoja de estilo cualquier cosa dentro del directorio público.
etiqueta de script donde tenemos nuestro código fuente para reducir scripts slash maynt.
Por lo tanto, con el tiempo se verá algo como Slash stylesheets slash ACT-UP ver evaluar y luego tendremos una
Sí.
Y entonces tendremos dentro del directorio de scripts del directorio público y el directorio de hojas de estilo.
Por ahora, aunque solo tenemos una hoja de estilo, la dejaremos así.
Acabemos rápidamente y agreguemos los parciales a los otros archivos también.
Entonces en este nuestro hogar que cada uno de nosotros pagará se establecerá y luego
en el fondo se pegará en un oleaje y lo cambiará para que sea el pie de página y lo guarde y luego lo publique.
Sí.
La misma cosa.
Queremos el encabezado y el pie de página.
Deshágase de eso también en todos los archivos.
Pie de página del pie derecho de Parshall.
Y eso debería ser bueno para nosotros.
Vamos a actualizar reinicie el servidor aquí y esto debería tener el mismo aspecto.
Ahora, si vamos al camino correcto, también obtenemos nuestros
estilos y, si vamos a las publicaciones de corte, también obtenemos los estilos.
Todo bien.
Así que recapitulamos todo esto.
Una de las primeras cosas que hicimos fue crear el
directorio público y agregar una hoja de estilo dentro de él y para que eso funcione, tuvimos que asegurarnos de decirle a express que sirva al directorio público.
Luego, una vez que lo hicimos, realizamos un pequeño cambio que consistía en decir expreso
que todas nuestras plantillas serán sí a menos que se indique lo contrario.
Así que no tenemos que escribir cada Sí después de cada nombre de plantilla.
Y luego el gran cambio que hicimos fue introducir Parshall's.
Así que hicimos un directorio llamado Parshall's que puede llamarse cualquier cosa.
Algunas personas lo llaman diseños de Parshall también es muy común.
Y luego teníamos dos archivos o encabezado y pie de página, y
el objetivo de esto era simplemente ayudarnos a secar nuestro código para que no tuviéramos que agregar esto a cada plantilla.
En su lugar, vamos a nuestra plantilla y todo lo que
tenemos que hacer es escribir incluir Parshall's slash hetter y no estamos limitados solo a encabezado y pie de página,
podríamos tener uno para la barra de navegación si tenemos una barra de navegación en cada página.
Podríamos tener otro parcial de que incluyamos la barra oblicua del viejo Parshall.
Entonces no hay reglas sobre lo que podemos y no podemos hacer.
Pero los más comunes son encabezado y pie de página.
Está bien, eso es todo