Fino a questo punto i nostri rappresentanti espressi sono stati rimandati completamente non tolti h t m l javascript incluso no
C Ss just pure h t m l.
In questo video ti mostrerò come possiamo iniziare a includere asset come un foglio di stile o qualche Javascript.
E ti mostrerò anche come possiamo asciugare i nostri modelli usando quelli che sono conosciuti come quelli di Parshall.
Quindi iniziamo.
Sto utilizzando la stessa app che ho utilizzato negli ultimi due video in cui abbiamo la nostra app.
Sì e abbiamo tre percorsi principali.
ha un H1 e l'adorabile immagine del Palm C e poi abbiamo anche l'innamoramento di Slash.
Abbiamo la route route che rende la casa Ejay come template che
La variabile cosa rotta che renderà poi l'amore verso ogni modello e ti mostrerà innamorati e
poi qualsiasi cosa abbiamo scritto nel percorso.
E poi se la dichiarazione e poi un piccolo paragrafo in fondo e poi abbiamo anche il percorso di slash posts
che rende i post E. J. come modello e all'interno di quello.
Abbiamo due anelli.
Ora diciamo che vogliamo includere alcuni stili.
Quindi come sai ora mi piace il colore viola.
Diciamo che volevo che tutti i corpi viola tutto il colore del testo su tutti i diversi
modelli dovessero essere viola.
Iniziamo con la pagina Post e quello che potrei fare è includere un tag di stile in modo che lo stile si
apra e si chiuda e quindi posso scrivere il mio stile qui dentro e farò il colore viola proprio così e salvarlo.
E ricorda che questo non è il modo ideale per includere gli stili e te lo
mostro prima per una ragione, perché lo rifatteremo e lo miglioreremo in un momento, ma assicuriamoci
che funzioni.
Quindi color viola sul corpo.
Iniziamo l'app del nodo del server.
Sì, passiamo al browser e aggiorniamo sulla pagina del post e puoi vedere che diventiamo viola.
E se io andassi su un'altra strada, non diventerei viola.
E questo perché sono modelli completamente separati e abbiamo aggiunto solo il tag di stile al modello di post.
Quindi, se voglio che tutto sia viola su tutti e tre i modelli, potrei aggiungere un altro tag di
stile in casa che Ejay e lo stesso tag di stile sull'amore.
Sì e salva il riavvio del server, aggiorna la mia pagina e ottengo qui un H-1 viola e se mi innamoro di Rusty
ho anche ricevuto del testo viola da quel tag di stile.
Ci sono due problemi principali che ci attendono qui.
Uno è il problema che questo codice viene ripetuto tre volte.
Se vuoi stili identici su tre diversi modelli, ci deve essere un modo migliore per
farlo.
E c'è.
E ci occuperemo di questo secondo.
Inizieremo affrontando questo problema dell'uso del tag di stile che non è una buona idea.
vogliamo invece è usare un foglio di stile esterno e collegato a quel foglio di stile usando il tag link.
Quello che
Quindi scriverò prima quel tag link che non funzionerà perché non abbiamo ancora un foglio di stile,
ma creeremo quel secondo.
Quindi collega e dobbiamo fornire un foglio di stile uguale a raĂşl e poi.
E questo deve essere il nome del nostro foglio di stile e lo chiameremo semplicemente Dot.
SS Okay, questo è solo su E. J. come modello salverà ora.
E andiamo a creare quell'app.
chiameremo pubblico e possono essere nominati qualsiasi cosa, ma public è un nome molto comune e convenzionale per questa directory.
C Ss eccetto piuttosto che crearlo nella stessa directory di J Sì, in realtà creeremo un'altra directory
in cui inseriremo tutti i nostri fogli di stile in tutti i javascript che
scriviamo e quindi tutte le altre risorse che vogliamo siano disponibile e lo
Beh, assicurati quando è il posto giusto.
E poi rendi pubblica la directory e creerai anche all'interno di una pubblica app pubblica che vedono valutare quale è il nome
del nostro file qui e salva e potresti pensare OK aspetta un minuto
non dovrebbe essere pubblico.
Valutazione barra.
E sfortunatamente la risposta è no.
Lasceremo perdere SS SS dicendo che i nostri fogli di stile e i javascript sono all'interno della
directory pubblica e servirà la directory pubblica per noi in modo che possiamo collegarci alle cose semplicemente
usando i nomi dei file quindi farò mostralo in un attimo
Apriamo l'app slash pubblica che visualizza il file SS e aggiunge alcuni stili.
Facciamo qualcosa di diverso.
Farà corpo o sfondo.
Sarà orribile.
Faremo lo sfondo giallo e il colore è ancora viola.
OK, ora abbiamo uno stile davvero grossolano, ha definito che possiamo chiudere fuori da qui e sapremo se funziona.
Se questo post E. J. visto che il modello si presenta con uno
sfondo giallo orribile in testo viola, non funzionerà ancora, ma ti mostrerò solo per vederlo da solo.
Quindi Noad apt.
J. S. e torniamo indietro e aggiorniamo la pagina e abbiamo bisogno di andare alla pagina del post e non otteniamo nulla.
E se apro il console qui ricevo un errore che dice che non è riuscito a caricare la ricerca.
Il server ha risposto allo stato di 404 e non è riuscito a trovare il successo dell'apparecchiatura.
E la ragione di questo è piuttosto semplice.
Quando crei un'app Web e utilizziamo Express per avviare un server Web, esso non serve solo
automaticamente ogni singolo file che vede ma non sa che vogliamo farlo.
E il default è di non servire niente.
A parte la directory delle viste.
Quindi se vogliamo qualcos'altro dobbiamo dire esplicitamente hey ho bisogno che tu serva la mia directory pubblica o
qualsiasi altro regista che abbiamo.
espresso di farlo e probabilmente esprimere fornisce un modo semplice per noi di farlo all'interno del nostro atto.
Dobbiamo dire a
Sì, in alto aggiungerò un'app da usare e poi tra parentesi.
EXPRESS Fa statico.
E poi tra parentesi la parola public che è il nome della nostra directory.
E questo dirà espresso per servire il contenuto della directory pubblica.
E ora se riavvia il mio server e rinfresco la pagina qui vicino chiudi il consolato otteniamo il
nostro sfondo giallo e il nostro carattere viola e non riceviamo errori nel consiglio.
di stile su altre pagine, vai e copia questo tag link e lo metti in cima.
E se vuoi includere quei fogli
E naturalmente potremmo avere anche più fogli di stile se lo volessimo e potremmo semplicemente
collegarci ad essi dando loro nomi diversi e assicurandoci che siano entrambi nella directory pubblica.
Prima di passare a Parshall, vogliamo prenderci un momento per mostrarti una cosa veramente rapida che possiamo fare per rendere il tuo codice un po 'più breve
di avviso che stiamo digitando a casa che ogni E. J. si amato
E. J. ha pubblicato E. J. Sì, questo
è veramente secondario, ma possiamo effettivamente dire espressamente che useremo Ejay noi in anticipo e possiamo
lasciarli fuori e solo scrivere a casa ed evolvere e si aspetterà automaticamente che i file siano file Ejaz.
E per farlo usiamo il motore di visualizzazione del set di dati dell'app e quindi passiamo il secondo argomento come E. J. s
proprio così.
E se salviamo il riavvio del server, ora si aspetta che quei file siano Ejaz.
E se ci aggiorniamo.
Niente dovrebbe cambiare.
Funziona ancora.
E ora non dobbiamo dire esplicitamente che Ejay noi.
Quindi questo è un cambiamento molto minore.
La prossima cosa che voglio
mostrarti è un po 'più significativa e ci aiuterà ad asciugare il nostro modello.
In questo momento abbiamo questo foglio di stile.
Questo link al foglio di stile è ripetuto
in tutti i modelli, ma c'è anche qualcosa di molto più significativo che ci manca, che è il nostro piatto di caldaia per tutto il tempo.
Ci manca il nastro adesivo qui.
A Andrew mancano le vecchie etichette e
tutti i piatti standard che ci aspettiamo dalla testa e dall'interno della testa.
Abbiamo bisogno del titolo e daremo alla nostra app il titolo.
Chiamala app demo e poi abbiamo bisogno anche del corpo.
E poi all'interno del corpo dovremmo mettere questo contenuto e
poi dobbiamo fare esattamente la stessa cosa su tutti gli altri file.
E non lo farò perché
è una perdita di tempo e c'è una soluzione più semplice dove non dobbiamo copiare questo codice e metterlo su ogni
singolo modello, proprio come non dovremmo copiare questo tag a link singolo e lo metti anche su ogni singolo modello.
modelli per creare un modello simile a questo.
E il modo in cui ci aggiriamo usando quelli che sono chiamati
Parshall e Parshall sono fondamentalmente modelli di file che possiamo scrivere che possiamo includere in altri
Quindi avremo la metà superiore del nostro piatto caldaia tutto nella testa.
Questo sarà quasi sempre lo stesso su ogni singola pagina che creiamo su un determinato sito.
Lo stesso foglio di stile ha lo stesso titolo.
Quindi faremo solo questo modello.
E poi in fondo faremo il suo modello qui.
troviamo o in base alla pagina in cui ci troviamo.
E poi tra i due avrà il nostro contenuto che cambia in base al modello in cui ci
Quindi quello che faremo è fondamentalmente trasformarlo in un proprio modello.
Trasformalo in un proprio modello e poi
usiamo solo quei modelli a cui ci riferiamo in ognuno di questi file.
Quindi dovremmo dire qualcosa
del tipo E questo non è un codice valido, ma faremmo qualcosa come includere il modello di intestazione e quindi in fondo farei la stessa cosa tranne che per il piè di pagina.
Quindi abbiamo bisogno di creare quei modelli o Parshall e per farlo creeremo una nuova
directory invece delle viste e chiameremo quella directory di Parshall.
Quindi faremo e faremo in modo che le viste della directory tagliano Parshall proprio così.
E poi al posto di Parshall faremo due file e il primo verrà usato
come barra di Parshall più veloce di ognuno di noi e poi faremo un altro parziale esattamente
uguale eccetto il piè di pagina e potresti anche chiamarli come Ejaz in alto e in basso prima e secondo qualunque cosa
tu voglia chiamarli, ma l'intestazione e il piè di pagina è sicuramente il nome standard.
Quindi creerò quei due
file e poi li aprirò e questa volta sulla scuola qui e
aprirò l'intestazione e copierò in questo piatto appena tagliato e lo metto qui invece che su intestazione.
Quindi questo è ciò
che vogliamo all'inizio di ogni pagina e quindi, anziché il piè di pagina, tutto ciò che vogliamo veramente è la parte inferiore del nostro modello che è solo il corpo e il tag del team di chiusura.
Proprio così.
E se volessimo qualcos'altro.
Quindi farò qualcosa di un po 'più ovvio.
Facciamo semplicemente un paragrafo in
fondo che dice qualcosa come marchio o qualche altro testo di piè di pagina che vedremmo su un sito Web.
Lo lasceremo solo a questo.
E quindi ci aspettiamo di vederlo in ogni pagina in cui includiamo il piè di pagina.
Parziale.
OK.
Quindi i due partial sono fatti.
Chiudi quelli fuori.
Correggi questo proprio così.
Va bene, salva.
E ora vogliamo includere i partial.
Quindi iniziamo con il nostro amore.
Ognuno di noi e ora includeremo quell'intestazione parziale.
Quindi dobbiamo usare un nuovo bit di codice in Ejay come includere i tag erate.
E poi il nome del file che è solo più forte e non dobbiamo
aggiungere che ci aiuti perché sta già cercando file Ejaz.
Quindi includi semplicemente l'intestazione e questo in realtà non funzionerà subito e ti mostrerò il perché.
Lasciami mettere il piè di pagina anche qui.
E se avvio il server, assicurati di liberare spazio qui e poi nodo.
Apogeo Sì.
E se aggiorni la pagina e questa è inclusa solo nello studio sull'amore J. S. modello.
Quindi dobbiamo andare al taglio.
Innamorarsi di resti e otteniamo un errore.
Nessun file o directory con questo nome.
Sì, le viste demo della barra tagliano l'hetter.
E. J. Sì.
Quindi questo ci dice due cose.
Uno sa che dovrebbe essere un file Ejaz.
Sta cercando un'intestazione.
Sì ma sta guardando direttamente nella directory dell'utente.
Ma noi vogliamo che guardi nelle
viste tagliare lo squarcio eterodosso di Parshall, come si può vedere qui.
Quindi abbiamo bisogno
di cambiare il nostro percorso qui un po 'e dobbiamo cambiarlo per dire lo slash di Parshall Hetter e quello di Parshall.
Tuttavia, non ha ancora intenzione di risolverlo.
E ti mostrerò ancora una volta
cosa succede quando ricomincio da capo e il rinfresco parziale è stato incluso bene.
E se andiamo agli elementi puoi vedere che prendiamo il footer in basso e abbiamo il corpo.
E ogni volta chiudendo i tag, ma gli stili non vengono applicati.
Dovrebbe essere viola e giallo ed è solo in bianco e nero.
E se guardiamo in testa, abbiamo il nostro tag link e si collega a un file chiamato apcupsd.
SS Ma questo non funziona.
principale e ha anche il piè di pagina.
E se guardiamo la scheda delle fonti vedremo che abbiamo questo file Rustie che è stato rinviato e ha la nostra intestazione e ha il contenuto
Quindi questo è come il file assemblato perché ricorda che inviamo una cosa indietro di una risposta.
Quindi rende questo file per noi con i nostri tre Parshall
o due Parshall Plus del nostro contenuto e lo rimanda indietro.
E poi c'è anche questo ACT-UP che dice che è totalmente vuoto.
E ciò significa che ci siamo collegati alla nostra APS-C valutata in modo errato.
Quindi appare come un file vuoto ed è
una soluzione molto semplice, anche se dobbiamo aggiungere una barra qui.
Ho esaminato tutto questo per
una ragione che ti mostri l'importanza dei percorsi e assicurandoti che i nostri percorsi siano impostati correttamente.
Quindi c'è una differenza tra il successo di ACT-UP e la barra dopo la valutazione quando aggiungiamo la barra.
Fondamentalmente dice che ci guardi non nella stessa directory
in cui ti trovi adesso ma nella directory principale.
Lascia che ti mostri un'illustrazione migliore.
In questo momento sta cercando il successo nella stessa directory di questo modello Rusti.
Ora se vado a salvarlo con la barra e riavvio il server tornano qui e mi aggiorno ora.
Guarda.
I nostri stili funzionano.
Notate anche che abbiamo
il file con h t m l e abbiamo il nostro apt SS che ora è fuori da quella directory, non è nella
stessa cartella e ha gli stili corretti, il che significa che ha trovato il file che dovevamo trovare.
Quindi sembra che la granita sia molto piccola ma in realtà è un dettaglio importante.
Quindi barra e poi il nome del nostro foglio di stile qualsiasi cosa all'interno della directory pubblica.
script in cui abbiamo il nostro codice sorgente per tagliare slash degli script maynt.
Quindi alla fine assomiglierà a qualcosa di simile ai fogli di stile di Slash. ACT-UP vedere valutare e poi avremo un tag
Sì.
E così avremo dentro la directory degli script della directory pubblica e la directory dei fogli di stile.
Per ora però abbiamo solo un foglio di stile, quindi lo lasceremo in questo modo.
Finiamo velocemente e aggiungiamo i partial anche agli altri file.
Quindi in questa casa nostra che ognuno di noi pagherà il set
e poi in basso in un swell e lo cambierà come footer e lo salverà e poi lo pubblicherà.
Sì.
Stessa cosa.
Vogliamo l'intestazione e il piè di pagina.
Sbarazzati di questo anche su tutti i file.
Il piè di pagina di Parshall.
E questo dovrebbe essere buono per noi.
Rinnova il riavvio del server qui e questo dovrebbe apparire lo stesso.
Ora, se andiamo sulla giusta strada, prendiamo anche i
nostri stili e se andiamo ai messaggi di slash otteniamo anche gli stili.
Tutto ok.
Ricapitoliamo tutto questo.
Una delle prime cose che abbiamo fatto è stata creare
la directory pubblica e aggiungere un foglio di stile al suo interno e per farlo funzionare dovevamo assicurarci di dire a express di servire la directory pubblica.
Poi, una volta fatto ciò, abbiamo apportato una piccola modifica che diceva espressamente
che tutti i nostri modelli saranno sì, se non diversamente specificato.
Quindi non dobbiamo scrivere ogni Sì dopo ogni nome di modello.
E poi il grande cambiamento che abbiamo fatto è stato l'introduzione di Parshall.
Quindi abbiamo creato una directory chiamata Parshall's che può essere nominata qualsiasi cosa.
Alcuni lo chiamano layout Parshall's è anche molto comune.
E poi avevamo due file o intestazione e piè di pagina e l'intero scopo
di questo era solo quello di aiutare a prosciugare il nostro codice in modo che non dovessimo aggiungere questo ad ogni singolo modello.
Invece andiamo al nostro template e tutto quello che dobbiamo
scrivere è scrivere l'hetter di Parshall e non siamo limitati solo a header e footer potremmo averne uno
per la barra di navigazione se abbiamo una barra di navigazione su ogni singola pagina.
Potremmo avere un altro parziale che includiamo il nash del vecchio Parshall.
Quindi non ci sono regole su ciò che possiamo e non possiamo fare.
Ma i più comuni sono intestazione e piè di pagina.
Va bene così è