Tot op dit punt onze uitdrukkelijke reps hebben teruggestuurd volledig unstaged h t m l Geen javascript inbegrepen geen C Ss gewoon pure h t m l.
In deze video ga ik je laten zien hoe we kunnen beginnen aan activa als een stylesheet of een Javascript bevatten.
En ik ben ook gaan om te laten zien hoe we kunnen opdrogen onze templates met behulp van wat bekend staat als Parshall's.
Dus laten we beginnen.
Ik ben met behulp van dezelfde app die ik heb gebruikt voor de afgelopen twee video's waar we onze app.
Ja, en we hebben drie hoofdroutes.
We hebben de route route die het huis dat Ejay maakt als template dat een de schattige beeld van de Palm C H1 en heeft en dan hebben we ook de daling van de liefde met Slash ding.
De variabele ding route die vervolgens de liefde voor elke sjabloon zal maken en het zal u weer verliefd op en dan wat we schreven in de route.
En dan, als statement en dan een beetje paragraaf aan de onderkant en dan hebben we ook de slash berichten route die de berichten maakt E.J. als template en de binnenkant van dat.
We hebben twee lussen.
Laten we nu zeggen dat we willen wat stijlen omvatten.
Dus zoals jullie nu weten Ik hou van de kleur paars.
Laten we zeggen dat ik wilde alle lichamen paarse alle tekst kleur op alle verschillende templates maken paars moeten zijn.
Laten we beginnen met de Post pagina en wat ik kan doen is onder andere een stijl tag zodat stijl openen en sluiten en dan kan ik mijn stijl hier lichaam te schrijven en zal kleur paars, net als dat en op te slaan doen.
En vergeet niet dat dit niet echt de ideale manier van het opnemen van stijlen en ik het voor het eerst laten zien aan u voor een reden, want we gaan het refactoren en te verbeteren in slechts een moment maar laten we maar zorg ervoor dat het werkt.
Dus kleur paars op het lichaam.
Laten we beginnen met de server knooppunt app.
Ja, laten we gaan naar de browser en vernieuw op de Plaats pagina en je kunt zien we paars.
En als ik naar een andere route ik niet paars te krijgen.
En dat komt omdat ze volledig gescheiden templates en wij de stijl tag alleen toegevoegd aan de post sjabloon.
Dus als ik wil dat alles paars zijn op alle drie templates ik zou kunnen toevoegen in een andere stijl tag in huis dat Ejay ons en de dezelfde stijl tag op de liefde.
Ja en sla het herstarten van de server te vernieuwen mijn pagina en ik krijg een paarse H-1 hier en als ik ga om te vallen in liefde met Rusty paarse tekst krijg ik ook hier van die stijl tag.
Er zijn twee belangrijke problemen waarmee ons hier.
Een daarvan is het probleem dat deze code wordt drie keer herhaald.
Als u identieke stijlen wilt op drie verschillende sjablonen moet er een betere manier om dat te bereiken zijn.
En daar is.
En we gaan die tweede aan te pakken.
We gaan beginnen met het aanpakken van dit probleem van het gebruik van de stijl tag die niet is een goed idee.
Wat wij willen doen in plaats daarvan is het gebruik van een externe style sheet en gekoppeld aan dat stylesheet via de link tag.
Dus ik ga naar de eerste brief die verwijzen tag die niet zal werken omdat we niet een style sheet nog maar wij willen dat de tweede te maken.
Zo koppelen en we moeten raĂşl bieden gelijke style sheet en dan.
En dit moet de naam van onze style sheet zijn en we zullen noemen het Dot.
SS Oke, dus dit is alleen op de Post E.J. als sjabloon nu zal redden.
En laten we maken dat apt.
C Ss behalve in plaats van het maken ervan in dezelfde map als zijn geneigd J Yes we eigenlijk naar een andere map te maken, waar we al onze stylesheets alle javascript dat we schrijven en dan alle andere activa die we willen zijn zullen zetten beschikbaar en we gaan deze openbaar te bellen en ze kunnen worden genoemd iets anders dan het publiek is een veel voorkomende en conventionele naam voor deze map.
Nou zorg ervoor dat wanneer de juiste plek.
En dan maak directory openbaar en zal ook te maken in een openbare publiek slash app die zien beoordelen welke is de naam van ons bestand hier en op te slaan en je zou kunnen denken OK wacht een minuut mag dit niet openbaar.
Slash beoordelen.
En helaas is het antwoord nee.
We vertrekken als apt upsy SS zal het leren uitdrukken dat onze stylesheets en javascript zijn binnenkant van de openbare map en het zal het publiek directory voor ons te dienen, zodat we kunnen verwijzen naar de dingen door alleen met behulp van de bestandsnamen, dus ik zal laten zien dat in slechts een moment.
Laten we het openstellen van de openbare slash app die zie SS-bestand en voeg in sommige stijlen.
Laten we eens iets anders te doen.
Zal lichaam of de achtergrond te doen.
Het zal afschuwelijk zijn.
We zullen ons achtergrond gele en kleur nog steeds paars doen.
OK dus nu hebben we een heel grove stijl ze omschreven kunnen we sluiten hier uit en we zullen weten of het werkt.
Als dit bericht E.J. als sjabloon verschijnt met een afschuwelijke gele achtergrond in paarse tekst het is niet van plan om nog gewoon werken, maar ik zal je laten zien, zodat u zien dat voor jezelf.
Dus Noad apt.
J.S. en we gaan terug en vernieuw de pagina en we moeten gaan naar de post-pagina en we niets krijgen.
En als ik het openstellen van de consul hier krijg ik een fout die zegt niet aan het onderzoek te laden.
De server antwoordde de status van de 404 en het kon Apparat succes niet te vinden.
De reden hiervoor is vrij eenvoudig.
Wanneer u een web app en we gebruiken Express naar een webserver het niet alleen automatisch elk bestand dat hij ziet het niet weten dat we dat willen doen dienen te starten.
En de standaard is om het even wat helemaal niet dienen.
Afgezien van het uitzicht directory.
Dus als we alles wat we nodig hebben om te vertellen uiten wil expliciet hey Ik wil dat je mijn openbare map of wat andere bestuurders hebben we serveren.
We moeten zeggen uitdrukkelijk om dat te doen en waarschijnlijk express biedt een eenvoudige manier voor ons om dat de binnenkant van onze act.
Ja up top ga ik om een ​​app te gebruiken toe te voegen en vervolgens tussen haakjes.
EXPRESS Doet statisch.
En dan tussen haakjes weer het woord publiek, dat is de naam voor onze directory.
En dit zal vertellen betuigen aan de inhoud van de openbare map te dienen.
En nu als ik mijn server opnieuw en vernieuw de pagina hier sluit het consulaat we onze gele achtergrond en onze paarse lettertype en we hebben geen fouten te krijgen in de raad.
En als je wilt die style sheets op andere pagina's onder je zou gewoon gaan en kopieer deze link tag en zet het boven.
En natuurlijk konden we meerdere style sheets als goed als we wilden en we konden alleen maar verwijzen naar hen door hen verschillende namen en ervoor te zorgen dat ze zowel in de publieke directory.
Voordat we overgaan tot gebrek Parshall om een ​​moment te nemen om te laten zien een erg snel wat we kunnen doen om uw code een beetje korter bericht dat we aan het typen bent thuis te maken dat elk E.J. ja hield.
E.J. heeft gepost E. J ..
Ja, dit is eigenlijk maar klein, maar we kunnen eigenlijk zeggen uitdrukken dat we gaan Ejay van tevoren gebruiken ons en kunnen we deze uit te laten en gewoon schrijven naar huis en evolueren en het zal automatisch verwachten dat de bestanden naar Ejaz bestanden.
En om dat te doen wij app dataset uitzicht engine gebruiken en dan passeren we het tweede argument als E.J. is net als dat.
En als we besparen de server opnieuw wordt nu verwacht dat deze bestanden naar Ejaz bestanden.
En als we vernieuwen.
Niets mag helemaal veranderen.
Het werkt nog steeds.
En nu hebben we niet expliciet zeggen dat Ejay ons.
Dus dat is een zeer kleine verandering.
Het volgende wat ik wil laten zien is een beetje meer belangrijk en het gaat om ons te helpen opdrogen onze template.
Op dit moment hebben we deze style sheet.
Deze link naar het stylesheet herhaald in alle sjablonen, maar er is ook iets wat veel belangrijker is dat we missen dat is onze hele tijd ketel plaat.
We missen de duct tape hier.
Andrew ontbrekende zijn hem in de leeftijd oud-tags en alle reguliere standaardtekst dat wij verwachten dat het hoofd en de binnenkant van het hoofd.
We moeten de titel en we zullen onze app de titel te geven.
Noem het demo-app en dan moeten we het lichaam ook.
En dan in het lichaam die we moeten zetten deze inhoud en dan moeten we dat precies hetzelfde te doen op alle andere bestanden.
En ik ben niet van plan om dat te doen, want het is een verspilling van tijd en er is een eenvoudiger oplossing waar we niet hebben om deze code te kopiëren en zet het op elke template net als wij niet zouden moeten hebben om te kopiëren deze enkele link tag en zet dat op elke sjabloon ook.
En de manier waarop we rond dat is met behulp van de zogenaamde Parshall en Parshall's zijn in principe bestanden sjablonen die we kunnen schrijven dat we kunnen opnemen in andere sjablonen zal een sjabloon die er als volgt uitziet.
Dus we de bovenste helft van onze ketelplaat alles in het hoofd te hebben.
Dit zal bijna altijd hetzelfde op elke pagina die we maken op een bepaalde site.
Dezelfde stijl sheet dezelfde titel.
Dus we alleen deze zijn eigen sjabloon te maken.
En vervolgens op de bodem zullen we deze zijn eigen sjabloon hier te maken.
En vervolgens in tussen de twee onze inhoud die verandert afhankelijk van welke template we op of afhankelijk van welke pagina we op zullen hebben.
Dus wat we gaan doen is in principe is deze om te zetten in een eigen sjabloon.
Zet deze in zijn eigen sjabloon en dan gaan we gewoon gebruik maken van deze sjablonen we verwijzen naar hen in elk van deze bestanden.
Dus zouden we zoiets zeggen En dit is geen geldige code, maar we willen iets doen, zoals onder andere header template en vervolgens op de bodem zou hetzelfde doen, behalve voor de voettekst.
Dus moeten we deze sjablonen of Parshall's te maken en te doen dat we een nieuwe map in plaats van standpunten zal maken en we noemen dat de directory Parshall's.
Dus we zullen doen en standpunten directory slash Parshall's net als dat.
En dan in plaats van Parshall's gaan we twee bestanden te maken en de eerste zal gebruik worden slash Parshall's slash hetter dat ieder ons en dan zullen we nog een gedeeltelijke exact hetzelfde, behalve voettekst te maken en je kon ook deze bellen als boven- en onderkant Ejaz eerste en tweede wat je wilt hen, maar kop- en voettekst noemen, is zeker de standaard naam.
Dus ik zal die twee bestanden te maken en dan zal ik ze open te stellen en dit keer op de school hier en het openstellen van de header en ik ga om te kopiëren in deze standaardtekst gewoon knippen het uit en zet deze dan hier in plaats van header.
Dus dit is wat we willen op de top van elke pagina en dan in plaats van voettekst alles wat we echt willen is de onderkant van onze template die net het lichaam en de afsluitende tag team.
Gewoon zo.
En als we wilden iets anders.
Dus ik zal iets meer voor de hand te doen.
Laten we gewoon een paragraaf aan de onderkant dat zoiets als handelsmerk of een andere voettekst dat we zouden zien op een website zegt.
We zullen gewoon het bij laten.
En dus verwachten we om dit te zien op elke pagina, waar we onder de voettekst.
Gedeeltelijke.
OK.
Zodat de twee partialen worden gedaan.
Sluit deze buiten.
Fix deze net als dit.
Oké slaan.
En nu willen we de partialen bevatten.
Dus laten we beginnen met onze liefde.
Ieder van ons en nu zullen we onder andere dat header gedeeltelijke.
Dus moeten we een nieuw stukje code in Ejay als tags erate bevatten.
En dan de naam van het bestand dat is gewoon hetter en we hoeven niet aan toevoegen dat Ejay ons, want het is al op zoek naar Ejaz bestanden.
Dus gewoon onder header en dit zal eigenlijk niet direct aan het werk en ik zal je laten zien waarom.
Laat ik de voettekst één aswell hier.
En als ik de server te starten zorg ervoor dat ik zal gewoon duidelijk wat ruimte hier en dan node.
Apogee Ja.
En als je de pagina vernieuwen en dit wordt alleen opgenomen op de liefde studie J.S. sjabloon.
Dus moeten we gaan naar slash.
Verliefd met Resti en krijgen we een fout.
Bestand of map bestaat niet.
Ja demo slash uitzicht slash hetter.
E.J. Ja.
Dus dit vertelt ons twee dingen.
Men weet het moet een Ejaz bestand.
Het is op zoek naar een header.
Ja, maar het is op zoek direct in de gebruiker directory.
Maar we willen dat het kijken van het uitzicht op slash Parshall's slash heterodox Ejay ons als je hier uitzicht slash Parshall's kan zien.
Dus moeten we ons pad veranderen een beetje en we moeten om het te veranderen om te zeggen Parshall's slash Hetter en Parshall's slash voettekst.
Maar dat is nog steeds niet van plan om het te repareren.
En ik zal je laten zien nog een keer wat er gebeurt als ik dit opnieuw beginnen en vernieuw het gedeeltelijk is opgenomen prima.
En als we naar de elementen die u kunt zien dat we de voettekst aan de onderkant en we hebben het lichaam.
En elke keer sluittags maar de stijlen niet worden toegepast.
Het moet paars en geel zijn en het is gewoon zwart en wit.
En als we kijken in het hoofd hebben we onze link tag en het is te koppelen aan een bestand met de naam apcupsd.
SS Maar dit werkt niet.
En als we kijken naar het tabblad bronnen zie je dat we hebben dit Rustie bestand dat werd verzonden en het heeft onze header en het heeft de belangrijkste inhoud en het heeft ook de voettekst.
Dus dit is net als de ene samengestelde file omdat herinner me een ding sturen we terug een reactie.
Dus het maakt dit een bestand voor ons met onze drie Parshall's of twee Parshall plus onze content en stuurt deze terug.
En dan is er ook dit ACT-UP see zegt dat is helemaal leeg.
En wat dat betekent is dat we hebt gekoppeld aan onze APS-C onjuist beoordeeld.
Dus het is gewoon te zien zijn als een leeg bestand en het is een heel eenvoudige oplossing, hoewel we moeten doen is het toevoegen van een slash hier.
Ik ging door dat alles om een ​​reden die is om te laten zien hoe belangrijk het is paden en ervoor te zorgen dat we onze wegen correct ingesteld.
Dus er is een verschil tussen ACT-UP succes en slash na het beoordelen wanneer we de slash toe te voegen.
Het zegt in principe op zoek naar ons zegt niet in dezelfde map die je in dit moment, maar in de root directory.
Laat me u een betere illustratie.
Op dit moment is het op zoek naar succes in dezelfde map als dit Rusti template.
Nu als ik ga op te slaan met de schuine streep en de server ze hier terug te gaan en ik verfrissen nu opnieuw opstarten.
Kijk eens.
Onze stijlen werken.
Ook merken we hebben het bestand met de h t m l en we hebben onze apt de SS die nu buiten die directory het niet in dezelfde map en het heeft de juiste stijlen, wat betekent dat het bestand dat we moesten vinden gevonden.
Zodat slush lijkt alsof het is heel klein, maar het is eigenlijk een belangrijk detail.
Zo slash en vervolgens de naam van onze style sheet iets in de openbare map.
Dus uiteindelijk zal het er ongeveer zo uitzien Slash stylesheets slash ACT-UP zie beoordelen en dan zullen we een script tag waar we onze broncode slash scripts slash maynt hebben.
Ja.
En dus moeten we in de publieke directory scripts directory en stylesheets directory.
Voor nu al hebben we slechts één stylesheet dus we zullen laten als dit.
Laten we snel af te maken en toe te voegen in de Partials naar de andere bestanden ook.
Dus in dit één ons huis dat ieder van ons zal betalen in en vervolgens op de bodem geplakt in een deining en verander het naar footer te zijn en op te slaan en post het dan.
Ja.
Hetzelfde.
Wij willen dat de kop- en voettekst.
Weg met dat ook op alle bestanden.
Parshall's slash voettekst.
En dat zou goed voor ons zijn.
Laten we vernieuwen de server opnieuw hier terug en dit moet hetzelfde uitzien.
Nu, als we naar de juiste pad dat we ook onze stijlen te krijgen en als we naar berichten slash krijgen we de stijlen daar ook.
Okee.
Dus laten we samen te vatten dit alles.
Een van de eerste dingen die we deden was maken van de openbare map en voeg een stylesheet erin en om voor die aan het werk moesten we ervoor zorgen om te vertellen uitdrukkelijk voor het publiek directory te dienen.
Dan zodra we dat deden we een kleine verandering, die was om te vertellen uit te drukken dat al onze templates ja zal zijn, tenzij anders vermeld.
Dus we hoeven niet elke Yes schrijven na elke template naam.
En dan de grote verandering die we maakten was de invoering van Parshall's.
Dus hebben we een map genaamd Parshall's kan alles worden genoemd.
Sommige mensen noemen het layouts Parshall is ook heel gebruikelijk.
En dan hadden we twee bestanden of kop- en voettekst en het hele punt van dit was gewoon te helpen opdrogen onze code, zodat we hoefden niet om deze toe te voegen aan elke sjabloon.
In plaats daarvan gaan we naar onze template en alles wat we moeten doen is te schrijven onder Parshall's slash hetter en we zijn niet alleen beperkt tot kop- en voettekst we misschien een te hebben voor de nav bar als we een navigatiebalk op elke pagina.
We konden nog een gedeeltelijke dat we onder de oude Parshall's slash Neph hebben.
Er zijn dus geen regels op wat we wel en niet kunnen doen.
Maar de meeste voorkomende zijn kop- en voettekst.