Jusqu'à ce point nos représentants express ont renvoyé complètement unstaged h t m l pas de javascript inclus pas C Ss pure h t m l.
Dans cette vidéo je vais vous montrer comment nous pouvons commencer à inclure des actifs comme une feuille de style ou un certain Javascript.
Et je vais aussi vous montrer comment nous pouvons sécher nos modèles en utilisant ce qu'on appelle Parshall.
Alors, commençons.
J'utilise la même application que celle que j'ai utilisée pour les deux dernières vidéos sur lesquelles nous avons notre application.
Oui et nous avons trois itinéraires principaux.
Nous avons la route route qui rend la maison que Ejay comme modèle qui a un H1 et l'adorable image de la Palm C et puis nous avons aussi la chute en amour avec Slash chose.
L'itinéraire chose variable qui rendra alors l'amour vers chaque modèle et il vous montrera tombé en amour avec et puis tout ce que nous avons écrit dans l'itinéraire.
Et puis si déclaration et puis un petit paragraphe au fond et puis nous avons également la route de poteau de barre qui rend les poteaux E.J. Comme modèle et à l'intérieur de celui-ci.
Nous avons deux boucles.
Maintenant, disons que nous voulons inclure certains styles.
Donc, comme vous le savez maintenant, j'aime la couleur pourpre.
Disons que je voulais rendre tous les corps violet toute la couleur du texte sur tous les différents modèles doivent être violet.
Commençons par la page Post et ce que je pourrais faire est d'inclure une balise de style afin que le style d'ouverture et de fermeture et puis je peux écrire mon style ici corps et fera la couleur pourpre juste comme ça et sauver.
Et n'oubliez pas que ce n'est pas vraiment la façon idéale d'inclure des styles et je vous le montre d'abord pour une raison parce que nous allons le refactoriser et l'améliorer dans un instant, mais veillons simplement à ce qu'il fonctionne.
Donc la couleur pourpre sur le corps.
Commençons l'application du noeud serveur.
Oui, allons sur le navigateur et actualiser sur la page de la Poste et vous pouvez voir que nous obtenons violet.
Et si je suis allé à un autre itinéraire je ne reçois pas violet.
Et c'est parce qu'ils sont des modèles totalement séparés et que nous avons seulement ajouté la balise de style au modèle de post.
Donc, si je veux que tout soit pourpre sur tous les trois modèles, je pourrais ajouter dans une autre balise de style à la maison que Ejay nous et le même style de balise sur l'amour.
Oui et économiser de redémarrer le serveur d'actualiser ma page et je reçois un violet H-1 ici et si je vais tomber en amour avec Rusty, je reçois aussi le texte violet ici de cette balise de style.
Il y a deux grands enjeux auxquels nous sommes confrontés.
L'un est la question que ce code est répété trois fois différentes.
Si vous voulez des styles identiques sur trois modèles différents, il doit y avoir une meilleure façon d'accomplir cela.
Et voici.
Et nous allons aborder cette seconde.
Nous allons commencer par aborder cette question de l'utilisation de la balise de style qui n'est pas une bonne idée.
Ce que nous voulons faire à la place est d'utiliser une feuille de style externe et liée à cette feuille de style à l'aide de la balise de lien.
Donc, je vais écrire ce tag de lien d'abord qui ne fonctionnera pas parce que nous n'avons pas encore une feuille de style, mais nous allons créer cette seconde.
Donc lien et nous avons besoin de fournir raÃşl feuille de style égale et puis.
Et ce doit être le nom de notre feuille de style et nous allons juste appeler Dot.
SS Ok donc ce n'est que sur l'E.J. de la Poste. Comme modèle sauvera maintenant.
Et nous allons créer ce apt.
C Ss, sauf plutôt que de le créer dans le même répertoire que sont apt J Oui, nous allons réellement faire un autre répertoire où nous allons mettre toutes nos feuilles de style tous les javascript que nous écrivons et puis tous les autres actifs que nous voulons sont Disponible et nous allons appeler cela public et ils peuvent être nommés tout sauf public est un nom très commun et conventionnel pour ce répertoire.
Eh bien, assurez-vous quand le bon endroit.
Et puis rendre le répertoire public et va également créer à l'intérieur d'une application slash public public qui voir évaluer quel est le nom de notre fichier ici et enregistrer et vous pourriez penser OK attendre une minute ne devrait pas être public.
Slash évaluer.
Et malheureusement, la réponse est non.
Nous allons le laisser comme upsy ups apt SS dire express que nos feuilles de style et javascript sont à l'intérieur de l'annuaire public et il servira l'annuaire public pour nous afin que nous puissions lier à des choses en utilisant simplement les noms de fichier, donc je vais Vous montrer que dans un instant.
Ouvrons l'application slash publique qui affiche le fichier SS et ajoute quelques styles.
Faisons quelque chose de différent.
Fera le corps ou l'arrière-plan.
Ça va être hideux.
Nous allons faire arrière-plan jaune et la couleur encore pourpre.
OK, maintenant nous avons un style vraiment brut, elle a défini que nous pouvons fermer d'ici et nous saurons si cela fonctionne.
Si ce message E.J. Comme le modèle se présente avec un fond jaune hideux dans le texte pourpre il ne va pas fonctionner encore, mais je vais vous montrer juste pour que vous voyez que pour vous-même.
Donc Noad apt.
J.S. Et nous revenons en arrière et rafraîchir la page et nous devons aller à la page de poteau et nous n'obtenons rien.
Et si j'ouvre le consul ici, je reçois une erreur qui dit ne pas avoir à charger la recherche.
Le serveur a répondu au statut de 404 et il n'a pas pu trouver le succès d'apparat.
Et la raison de cela est assez simple.
Lorsque vous créez une application Web et que nous utilisons Express pour démarrer un serveur Web, il ne sert pas automatiquement tous les fichiers qu'il voit qu'il ne sait pas que nous voulons le faire.
Et le défaut est de ne rien servir du tout.
Mis à part le répertoire vues.
Donc, si nous voulons autre chose, nous devons dire explicitement explicitement hey, j'ai besoin de vous pour servir mon répertoire public ou tout autre directeurs que nous avons.
Nous devons dire express pour faire cela et probablement exprimer fournit une façon facile pour nous de le faire à l'intérieur de notre acte.
Oui haut de page Je vais ajouter une application à utiliser, puis entre parenthèses.
EXPRESS Fait statique.
Et puis entre parenthèses encore le mot public qui est le nom de notre annuaire.
Et ce sera dire express pour servir le contenu de l'annuaire public.
Et maintenant, si je redémarre mon serveur et rafraîchir la page ici près du consulat, nous obtenons notre fond jaune et notre police pourpre et nous n'obtenons pas d'erreurs dans le conseil.
Et si vous voulez inclure ces feuilles de style sur d'autres pages, vous allez simplement copier cette balise de lien et la mettre en haut.
Et bien sûr, nous pourrions avoir plusieurs feuilles de style aussi bien si nous voulions et nous pourrions simplement lier vers eux en leur donnant des noms différents et en s'assurant qu'ils sont tous les deux dans l'annuaire public.
Avant de passer à Parshall voulez prendre un moment pour vous montrer une chose vraiment rapide, nous pouvons faire pour rendre votre code un peu plus court préavis que nous sommes en tapant à la maison que chaque E.J. Oui aimé
E.J. A posté E.J ..
Oui, c'est vraiment mineur, mais nous pouvons réellement dire express que nous allons utiliser Ejay nous à l'avance et nous pouvons laisser ces off et juste écrire à la maison et évoluer et il s'attend automatiquement à ce que les fichiers soient des fichiers Ejaz.
Et pour faire cela, nous utilisons le moteur de visualisation des ensembles de données d'application, puis nous passons le second argument comme E.J. C'est comme ça.
Et si nous sauvegardons redémarrer le serveur, il s'attend maintenant à ce que ces fichiers soient des fichiers Ejaz.
Et si nous rafraîchissons.
Rien ne devrait changer du tout.
Il fonctionne toujours.
Et maintenant, nous n'avons pas à dire explicitement que Ejay nous.
C'est donc un changement très mineur.
La prochaine chose que je veux vous montrer est un peu plus importante et ça va nous aider à assécher notre modèle.
En ce moment, nous avons cette feuille de style.
Ce lien vers la feuille de style répété dans tous les modèles, mais il ya aussi quelque chose de beaucoup plus important que nous sommes absents qui est notre plaque de chaudière tout temps.
Il nous manque le ruban adhésif ici.
Andrew disparus sont vieillis lui vieilles étiquettes et tous les réguliers boilerplate que nous nous attendons à la tête et à l'intérieur de la tête.
Nous avons besoin du titre et nous allons donner notre app le titre.
Appelez-le demo app et puis nous avons besoin du corps ainsi.
Et puis à l'intérieur du corps, nous devrions mettre ce contenu et ensuite nous devons faire exactement la même chose sur tous les autres fichiers.
Et je ne vais pas le faire parce que c'est une perte de temps et il ya une solution plus facile où nous n'avons pas à copier ce code et le mettre sur chaque modèle unique, comme nous ne devrions pas avoir à copier ce lien simple balise Et mettre cela sur chaque modèle unique ainsi.
Et la façon dont nous obtenons autour qui est en utilisant ce que l'on appelle Parshall et Parshall sont essentiellement des modèles de fichiers que nous pouvons écrire que nous pouvons inclure dans d'autres modèles va créer un modèle qui ressemble à ceci.
Donc, la moitié supérieure de notre plaque de chauffe tout dans la tête.
Ce sera presque toujours le même sur chaque page unique que nous créons sur un site donné.
Même feuille de style le même titre.
Nous allons donc faire de ce modèle son propre modèle.
Et puis, au bas, nous ferons de ce modèle son propre modèle.
Et puis entre les deux auront notre contenu qui change selon le modèle que nous sommes ou en fonction de la page sur laquelle nous sommes.
Donc, ce que nous allons faire est fondamentalement transformer cela en son propre modèle.
Transformez cela en son propre modèle et puis nous utilisons simplement les modèles que nous référons à eux dans chacun de ces fichiers.
Donc, nous dirais quelque chose comme Et ce code n'est pas valide, mais nous ferions quelque chose comme inclure le modèle d'en-tête et puis au fond ferait la même chose sauf pour le pied de page.
Donc nous devons créer ces modèles ou Parshall's et pour faire que nous allons créer un nouveau répertoire au lieu de vues et nous allons appeler ce répertoire Parshall.
Donc, nous allons faire et faire des vues d'annuaire barre de Parshall juste comme ça.
Et puis au lieu de Parshall, nous allons faire deux fichiers et le premier sera utiliser slash Parashall slash hetter que chacun d'entre nous et puis nous allons faire une autre partie exacte, sauf le pied de page et vous pourriez aussi appeler ces comme haut et bas Ejaz Première et deuxième que vous voulez les appeler, mais l'en-tête et le pied de page est certainement le nom standard.
Donc, je ferai ces deux dossiers, puis je les ouvrirai et cette fois-ci sur l'école ici et ouvrirai l'en-tête et je vais copier dans cette plaquette, il suffit de la couper et de mettre ça ici au lieu de entête.
Donc, c'est ce que nous voulons en haut de chaque page et puis au lieu de bas de page tout ce que nous voulons vraiment est le bas de notre modèle qui est juste le corps et la balise d'équipe de fermeture.
Juste comme ça.
Et si on voulait autre chose.
Je vais donc faire quelque chose d'un peu plus évident.
Faisons juste un paragraphe au bas qui indique quelque chose comme la marque de commerce ou un autre texte de pied de page que nous verrions sur un site Web.
Nous allons en rester là.
Nous espérons donc voir cela à chaque page où nous incluons le pied de page.
Partiel.
D'ACCORD.
Donc les deux partiels sont faits.
Fermez-les.
Correction de celui-ci comme ça.
Sauvez bien.
Et maintenant, nous voulons inclure les partiels.
Commençons donc par notre amour.
Chacun de nous et maintenant nous allons inclure cet en-tête partielle.
Donc, nous devons utiliser un nouveau bit de code dans Ejay que les tags erate include.
Et puis le nom du fichier qui est juste hetter et nous n'avons pas à ajouter que Ejay nous parce qu'il est déjà à la recherche de fichiers Ejaz.
Donc, juste inclure l'en-tête et cela ne fonctionnera pas tout de suite et je vais vous montrer pourquoi.
Permettez-moi de mettre le pied de la même ici.
Et si je démarre le serveur assurez-vous que je vais juste dégager de l'espace ici et puis nœud.
Apogée Oui.
Et si vous rafraîchissez la page et cela est seulement inclus dans l'étude d'amour J.S. modèle.
Donc nous devons aller à la barre oblique.
Tomber en amour avec resti et nous obtenons une erreur.
Aucun fichier ou répertoire de ce nom.
Oui démo slash vues slash hetter.
E.J. Oui.
Cela nous dit deux choses.
Il sait qu'il est censé être un fichier Ejaz.
Il cherche un en-tête.
Oui, mais il regarde directement dans le répertoire utilisateur.
Mais nous voulons qu'il regarde dans vues coup de sommet Parshall hétérodoxe Ejay nous comme vous pouvez le voir ici vues de Parshall.
Donc, nous devons changer notre chemin ici un peu et nous devons le changer pour dire la barre oblique de Parshall Hetter et le pied de slash de Parshall.
Cependant, ce n'est toujours pas de le réparer.
Et je vais vous montrer une fois de plus ce qui se passe quand je recommencer et de rafraîchir le partiel a été inclus très bien.
Et si nous allons aux éléments, vous pouvez voir que nous obtenons le pied de page au bas et nous avons le corps.
Et chaque fois que la fermeture des balises, mais les styles ne sont pas appliqués.
Il devrait être violet et jaune et il est juste noir et blanc.
Et si nous regardons dans la tête, nous avons notre balise de lien et il est le lien vers un fichier appelé apcupsd.
SS Mais ça ne marche pas.
Et si nous regardons l'onglet sources, vous verrez que nous avons ce fichier Rustie qui a été renvoyé et il a notre en-tête et il a le contenu principal et il a aussi le pied de page.
Donc, c'est comme un fichier assemblé parce que n'oubliez pas que nous envoyons une chose en arrière une réponse.
Donc, il fait de ce fichier pour nous avec nos trois Parshall ou deux Parshall's Plus notre contenu et il envoie ce retour.
Et puis il ya aussi ce ACT-UP voir dit que c'est totalement vide.
Et ce que cela signifie est que nous avons lié à notre APS-C évalué de manière incorrecte.
Donc, c'est juste apparaître comme un fichier vide et c'est une solution très simple, mais nous devons faire est d'ajouter une barre oblique ici.
J'ai parcouru tout cela pour une raison qui est de vous montrer l'importance des chemins et de s'assurer que nous avons nos chemins correctement mis en place.
Il ya donc une différence entre le succès d'ACT-UP et le slash après l'évaluation lorsque nous ajoutons la barre oblique.
Il est fondamentalement dit de nous chercher ne dit pas dans le même répertoire que vous êtes en ce moment, mais dans le répertoire racine.
Permettez-moi de vous montrer une meilleure illustration.
À l'heure actuelle, il est à la recherche de succès dans le même répertoire que ce modèle Rusti.
Maintenant, si je vais enregistrer avec la barre oblique et redémarrer le serveur, ils reviennent ici et je rafraîchir maintenant.
Regarde.
Nos styles fonctionnent.
Notez également que nous avons le fichier avec le h t m l et nous avons notre apt le SS qui est maintenant à l'extérieur de ce répertoire, il n'est pas dans le même dossier et il a les bons styles qui signifie qu'il a trouvé le fichier que nous devions trouver.
Donc, cette boue semble être très mineure, mais c'est un détail important.
Donc slash et puis le nom de notre feuille de style quelque chose dans l'annuaire public.
Donc, finalement, il ressemblera à quelque chose comme Slash feuilles de style slash ACT-UP voir évaluer et puis nous aurons une balise de script où nous avons notre code source pour slash scripts slash maynt.
Oui.
Et donc nous aurons à l'intérieur du répertoire de scripts de répertoire public et répertoire de stylesheets.
Pour l'instant, même si nous n'avons qu'une feuille de style, nous allons la laisser comme ça.
Finissons rapidement et ajoutez les partiels aux autres fichiers aussi.
Donc, dans celui-ci notre maison que chacun de nous va payer mis en et puis au bas collé dans une houle et le changer pour être pied de page et sauver et ensuite le poster.
Oui.
Même chose.
Nous voulons l'en-tête et le pied de page.
Débarrassez-vous de cela aussi sur tous les fichiers.
Le pied de page de Parshall.
Et cela devrait être bon pour nous.
Let's actualiser redémarrer le serveur ici et cela devrait avoir la même apparence.
Maintenant, si nous allons à la bonne voie, nous obtenons également nos styles et si nous allons à barre oblique nous obtenons les styles là aussi.
D'accord.
Reprenons tout cela.
Une des premières choses que nous avons fait était de créer l'annuaire public et ajouter une feuille de style à l'intérieur de celui-ci et pour que cela fonctionne, nous avons dû nous assurer de dire express pour servir l'annuaire public.
Puis, une fois que nous avons fait que nous avons fait un petit changement qui était de dire express que tous nos modèles seront oui, sauf indication contraire.
Nous n'avons donc pas à écrire chaque Oui après chaque nom de modèle.
Et puis le grand changement que nous avons fait était d'introduire Parshall's.
Donc nous avons fait un répertoire appelé Parshall peut être nommé quelque chose.
Certaines personnes l'appellent des dispositions Parshall est également très commun.
Et puis nous avions deux fichiers ou l'en-tête et le pied de page et le point entier de cela était juste pour aider à assécher notre code de sorte que nous n'avons pas eu à ajouter à chaque modèle unique.
Au lieu de cela, nous allons à notre modèle et tout ce que nous avons à faire est d'écrire comprennent Parshall slash hetter et nous ne sommes pas limités à l'en-tête et le pied de page, nous pourrions avoir un pour la barre de navigation si nous avons une barre de navigation sur chaque page.
Nous pourrions avoir un autre partiel que nous incluons le vieux neph de slash de Parshall.
Il n'y a donc pas de règles sur ce que nous pouvons et ne pouvons pas faire.
Mais les plus courants sont l'en-tête et le pied de page.