Modelli di pagina con Jade

Date un'occhiata all'indirizzo della applicazione che stiamo sviluppando https://whispering-peak-1284.herokuapp.com/ : notato niente di nuovo?

L'occhio vuole sempre la sua parte, con questo post vediamo come implementare un modello per il nostro sito che va mantenuto costante per ogni pagina presente.

In questo jade ci da una grossa mano, perchè ci permette di definire dei veri e propri file modello che le singole pagine possono estendere.

Per il disegno del modello, ho deciso di utilizzare bootstrap, un file css pronto all'uso che ci semplifica enormemente la vita.

Il layout (modello) che vogliamo utilizzare per il nostro sito è il seguente

Ho evidenziato le varie parti del layout costituito da un header, una colonna di sinistra per la navigazione, una colonna centrale per i contenuti principali, la colonna di destra e un footer in basso.

Con bootstrap e il suo sistema a griglia è veramente semplice definire un layout del genere

 <div class="page-header">Header</div>  
 <div class="container-fluid">  
    <div class="row">  
       <div class="col-md-2">Colonna sinistra</div>  
       <div class="col-md-6">Colonna Centrale</div>  
       <div class="col-md-4">Cononna Destra</div>  
    </div>  
    <div class="row">  
       <div class="col-md-12">Footer</div>  
    </div>  
 </div>  

Basta usare una divisione che fa da contenitore e inserire altre divisioni di tipo riga che contengono divisioni di tipo colonna: ricordatevi semplicemente che la somma dello spazio totale delle divisioni all'interno di una riga deve fare 12.

La forza di bootstrap sta anche nell'adattare automaticamente il layout in funzione della tipo di display che sta navigando la pagina, implementa cioè quello che in gergo si chiama responsive design.

Ogni pagina del sito dovrà rispettare questo layout, le parti varibili saranno rappresentate dal contenuto dell'header e le varie colonne.

Creiamo ora un file layout.jade che verrà esteso dalle altre pagine in modo da fattorizzare le parti comuni del modello scelto

 doctype html  
 html(lang='it')  
      head  
           meta(charset='utf-8')  
           meta(http-equiv='X-UA-Compatible', content='IE=edge')  
           meta(name='viewport', content='width=device-width, initial-scale=1')  
   
           block titolo  
                title Sito node.js + express  
           link(rel='stylesheet', href='/css/bootstrap.css')  
           link(rel='stylesheet', href='/css/bootstrap-theme.css')  
           link(rel='stylesheet', href='/css/site.css')  
      body  
           div.page-header  
                block header
           div.container-fluid  
                div.row  
                     div.col-md-2  
                          block colonna-sinistra  
                               include ./menu.jade  
                     div.col-md-6  
                          block colonna-centrale
                     div.col-md-4  
                          block colonna-destra  
                                 
                div.row  
                     div.col-md-12  
                          block footer  
                               hr  
                               p(class='text-center') © Ivan Saracino  
                                 
           script(src='/js/jquery.js')  
           script(src='/js/bootstrap.js')  

Bootstrap è costituito da due file css e due file javascript che vanno messi nella sezione /public/css e /public/js del nostro progetto.

Notate la presenza dell'istruzione block nome-blocco, ogni pagina che estenderà questo modello dovrà poi definire i contenuti dei vari blocchi in esso definiti: se non lo fa, verranno usati i blocchi di default come quello usato per il footer.

Notate la presenza dell'istruzione include ./menu,jade inserita come blocco di default per la colonna di sinistra, serve semplicemente ad includere i contenuti presenti in un altro file in cui è definito il menu di navigazione.

 ul(class='nav nav-pils')  
      li(role="presentation",class="active")  
           a(href="/") Home  
      li(role="presentation")  
           a(href="/pagina1") Pagina 1  
      li(role="presentation")  
           a(href="/pagina2") Pagina 2  

Tutte le classi css che ho utilizzato nell'esempio sono fornite da bootstrap, se utilizzate sublime text 3, come spiegato in questo post, installate il package Bootstrap 3 jade snippets per scrivere al volo frammenti jade/bootstrap per gli usi più comuni. (esempio il menu di navigazione ;))

Vediamo ora l'esempio di una delle pagine, esempio pagina1.jade, che estende il nostro layout

 extends ./layout.jade  
   
 block titolo  
      title Titolo particola per questa pagina  
   
 block header  
      h1.text-info Header particolare per questa pagina  
   
 block colonna-centrale  
      p contenuto colonnna centrale per questa pagina  
   
 block colonna-destra  
      p contenuto colonna destra per questa pagina  

Vengono semplicemente definiti i contenuti dei vari blocchi del layout che estendiamo, se non definiamo un blocco, come ad esempio colonna-sinistra e footer, vengono usati i blocchi di default presenti nel layout.

Ho messo su github il progetto completo che ho installato su heroku, in modo che possiate avere tutto il codice a disposizione, in questo post è spiegato come utilizzare github.

Dopo aver fatto il pull del progetto, ricordatevi di eseguire npm install nella cartella di progetto per installare le dipendenze express e jade: se volete eseguire il programma in locale digitate node app.js e puntate il browser all'indirizzo http://localhost:5000.

Alla prox
Ivan