‫-: Va bene.
‫In questo video, ti mostrerò come utilizzare
‫una delle funzionalità
‫più importanti e anche più complesse di Pug.
‫E che sono si estende.
‫Con extend, saremo in
‫grado di utilizzare lo stesso layout
‫di base per ogni singola pagina che vogliamo rendere.
‫In questo momento, abbiamo il nostro modello di base finito con
‫una bella intestazione e un bel piè di pagina.
‫Quindi ora, iniziamo effettivamente a compilare il suo contenuto.
‫Ora, ovviamente, vogliamo
‫caricare contenuti diversi per pagine diverse.
‫E per iniziare, vogliamo avere una pagina panoramica con tutti
‫i tour, quindi una pagina con
‫tutti i dettagli del tour per un tour specifico.
‫Quindi ora implementiamo alcuni percorsi per
‫entrambe queste pagine.
‫E lo farò proprio qui sotto il
‫primo che abbiamo già creato.
‫Quindi, /overview E
‫poi qualcosa di molto simile a prima.
‫E ancora, un po' più tardi, in realtà
‫nel prossimo video inseriremo
‫questi percorsi in un file separato.
‫Quindi, esegui il rendering, e ora in questa pagina di
‫panoramica vorremo effettivamente eseguire
‫il rendering di un modello chiamato panoramica.
‫Questo non esiste ancora,
‫quindi ora andiamo avanti rapidamente e ne creiamo uno.
‫Quindi, panoramica. pug E
‫in effetti passiamo anche alcuni dati.
‫E passeremo al titolo della pagina
‫che in questo caso, diremo,
‫All Tours.
‫Ora prendiamo questo codice
‫e copiamolo per il tour.
‫Quindi vogliamo anche di nuovo un itinerario per un tour specifico.
‫E qui, vorremmo
‫avere un modello che si chiama anche tour.
‫E poi il titolo di quello, per
‫ora, facciamolo di
‫nuovo, The Forest Hiker Tour.
‫Quindi per ora, questo è solo un
‫segnaposto, e ovviamente un
‫po' più tardi realizzeremo questa dinamica.
‫Perché a questo punto,
‫stiamo ancora imparando come funziona davvero Pug.
‫Creiamo ora anche quel modello di tour.
‫E questo è tutto.
‫Ok, ora che questi due nuovi modelli sono stati completati,
‫questo è ciò che faremo.
‫In ciascuno di questi modelli, e in
‫questo caso qui la panoramica,
‫vogliamo solo inserire il contenuto per quella pagina specifica.
‫Quindi non vogliamo piè di pagina qui,
‫nessun header e nessuna delle cose che abbiamo nella base.
‫Quindi, di nuovo, in realtà
‫solo il contenuto della pagina panoramica.
‫Questo è esattamente ciò che inseriremo in
‫questo file, quindi inietteremo sostanzialmente questo contenuto
‫nel modello di base, che
‫possiamo chiamare modello padre.
‫Questo processo viene quindi chiamato estensione.
‫Quindi, ogni volta che viene eseguito il rendering del modello
‫di panoramica, prendiamo il modello di
‫base e lo riempiamo con il contenuto di questo
‫file, quindi lo estendiamo.
‫Ecco come lo implementiamo.
‫Prima di tutto, nella base, dobbiamo mettere un blocco.
‫In realtà lo farò qui.
‫Quindi cancelliamo tutto questo,
‫e qui mettiamo un blocco.
‫E quel blocco, lo chiamerò contenuto.
‫Quindi all'interno di quel blocco, possiamo effettivamente avere
‫anche dei contenuti.
‫Quindi mettiamo un h1 qui.
‫Ma questo contenuto verrà successivamente sovrascritto.
‫Ma comunque, mettiamolo
‫qui solo come segnaposto, in pratica.
‫Quindi, questa è un'intestazione segnaposto.
‫Ok, quindi abbiamo il nostro blocco qui, e ora possiamo
‫andare alla nostra pagina di panoramica e
‫dire che vogliamo estendere il nostro modello di base.
‫Quindi, estendi la base.
‫O in realtà, si chiama estende.
‫Quindi questo file estende il file di base.
‫E ovviamente, se questo qui si
‫chiamasse, ad esempio, index. pug,
‫allora qui diremmo estende index.
‫Ora qual è esattamente il
‫contenuto che verrà esteso nel modello di base?
‫Bene, questo è tutto ciò che inseriamo nel blocco del contenuto.
‫Quindi, anche qui, creiamo un blocco chiamato contenuto.
‫E poi lì dentro, come sempre, possiamo mettere i nostri contenuti.
‫Quindi diciamo solo che questa è la panoramica del tour.
‫Qui, ridefiniamo sostanzialmente il blocco di contenuto che
‫si trova nella base.
‫Quindi, di nuovo, abbiamo
‫questo blocco qui chiamato contenuto, e ora
‫mettendo lo stesso blocco di contenuto proprio qui
‫in questa pagina, che estende
‫quindi la base, stiamo praticamente ridefinendo quel blocco.
‫Ogni file può estendere solo un altro file.
‫Quindi possiamo solo estendere
‫la base qui, ma possiamo avere blocchi diversi in ciascuno dei file.
‫Quindi potremmo avere anche qui un blocco per la testa.
‫E quindi potremmo estenderlo anche
‫nel modello di panoramica.
‫E, in realtà, lo faremo un po' più tardi.
‫Ma per ora, ovviamente, cerchiamo di mantenere le cose semplici.
‫Ok, ha senso?
‫Ora andiamo avanti e in realtà facciamo la stessa cosa qui.
‫Quindi questo estende il layout di base.
‫E cosa si estende esattamente?
‫Bene, estenderà il blocco del contenuto.
‫E quindi questo lo metteremo
‫su h1, questa è la pagina dei dettagli del tour.
‫Quindi, prima di testarlo, ricapitoliamo rapidamente ciò che
‫abbiamo appena fatto.
‫Quindi, vogliamo usare questo modello di base
‫qui come punto di partenza.
‫Quindi, come uno scheletro che ha tutto il materiale
‫HTML, come
‫questa testa, e anche l'intestazione e il piè di pagina,
‫ma non il contenuto specifico per ogni pagina.
‫Quindi, in ciascuna di queste
‫pagine qui, abbiamo solo il contenuto per quella pagina stessa.
‫E possiamo farlo
‫perché possiamo sostanzialmente iniettare questo
‫contenuto qui nel modello di base genitore usando extend.
‫Quindi, in pratica, pensa a questo come l'opposto dell'inclusione.
‫Ecco, questo modello includeva due modelli principali.
‫Questo modello qui includeva due modelli figlio, l'intestazione
‫e il piè di pagina.
‫Quindi, di nuovo, la base è il
‫genitore e l'intestazione e il piè di pagina sono i figli.
‫Quindi qui, il genitore includeva i bambini.
‫Ma con le estensioni, è il contrario,
‫dove i bambini, come possiamo dire, quindi possiamo
‫dire che la
‫panoramica è anche un bambino della
‫base, ma qui è il bambino che include la base.
‫Quindi, in pratica, tutto ciò che è intorno a questo contenuto di blocco.
‫Puoi immaginare che tutto questo codice
‫qui, tutto ciò che non è il contenuto
‫del blocco, venga quindi copiato direttamente in questo file.
‫È un bel modo di immaginare come funziona.
‫Ciò ci consente di utilizzare qui nel nostro percorso la
‫panoramica e i modelli di tour invece di utilizzare la base.
‫Ma ancora, ovviamente, usando tutto questo HTML
‫che abbiamo qui.
‫Ok, spero che ora abbia senso.
‫In realtà andiamo avanti e proviamo questo.
‫Sto solo andando a copiare l'URL.
‫Quindi ora scriviamo una panoramica.
‫E così, in effetti, otteniamo l'h1 che dice Questa
‫è la panoramica del tour.
‫E in effetti usiamo anche la variabile title che
‫abbiamo passato in questi modelli.
‫Ricorda che qui abbiamo il titolo
‫Tutti i tour nella panoramica, e poi nel tour
‫abbiamo The Forest Hiker.
‫Quindi mettiamolo davvero nel titolo.
‫In effetti, possiamo effettivamente farlo proprio
‫qui nel modello di base.
‫Quindi, quando proprio qui
‫nella panoramica estendiamo il modello di
‫base, il modello di base ha ancora accesso ai locali,
‫quindi, alle variabili, che abbiamo passato nel modello.
‫Qui possiamo fare quello che abbiamo fatto prima,
‫quindi, interpolazione con la variabile, quindi con il locale.
‫Quindi, tutto ciò che dobbiamo fare è mettere il titolo qui, in questo modo.
‫E se ora ricarichiamo,
‫vedrai Tutti i tour qui in alto.
‫Ora proviamo con il tour.
‫E quindi questa è la pagina dei dettagli del tour,
‫e qui sopra vedi The Forest Hiker Tour.
‫Ora, se carichiamo questo, dovremmo
‫ottenere quel segnaposto che
‫inseriamo nel blocco.
‫Ricordati che?
‫E, in effetti, questa è l'intestazione segnaposto.
‫Grande.
‫Questo è un meccanismo potente e molto importante per
‫noi da capire e da usare per tutti i
‫modelli che andremo a costruire nel
‫resto della sezione.
‫Nel prossimo video, infine, ripuliremo
‫un po' questo pasticcio che abbiamo qui e rifaremo
‫tutto questo codice
‫qui in alcuni file diversi.