Layout
La sintassi utilizzata è ERB (Embedded Ruby) che non è nient’altro che HTML a cui può essere aggiunto del codice Ruby. Per fare un paragone conosciuto, è come scrivere codice PHP dentro pagine HTML e salvare il file con estensione .php. Se apriamo per la prima volta questo file noteremo che contiene poche righe di codice che determinano la cornice del nostro sito: [crayon-52f336c0d5968425984273/] a colpo d’occhio notiamo che esiste del codice di questo genere <%= codice %>. Sta ad indicare che il contenuto all’interno dei simboli percentuale è un helper scritto in Ruby e messo a disposizione da Middleman. Scopo degli helpers è quello di includere del codice minimale che una volta convertito in HTML risulterà più lungo e complesso. Ecco quindi che abbiamo scoperto il primo vantaggio. Per un elenco degli helpers si veda la documentazione ufficiale. Altra cosa che salta all’occhio è questa riga di codice <%= yield %>. Di cosa si tratta? Yield non è nient’altro che l'area del contenuto principale dove verranno richiamate le pagine del sito. Middleman sa che in questo punto del layout dovrà effettuare una chiamata ai file .erb che andremo a creare, come ad esempio index.html.erb (già esistente) e magari una pagina dei contatti che possiamo chiamare contatti.html.erb e così via. Tali file vanno aggiunti alla root principale della cartella del progetto. Facile no? Middleman si occuperà automagicamente, tramite gli helpers, di stampare all’interno di yield la pagina richiesta. Non avremmo bisogno perciò di codice JS o di utilizzare un CMS per gestire questo automatismo!Partials
I partials sono dei file erb che possiamo creare noi e ai quali andiamo ad anteporre trattino basso. Lo scopo è quello di non affollare layout.erb di codice, ma piuttosto di separare in maniera logica i vari componenti grafici come la header, la nav, la sidebar, il footer ecc. Supponiamo di creare una testata con un titolo di benvenuto: 1) creiamo il file _header.html.erb a salviamolo nella root 2) apriamolo e dentro scriviamo [crayon-52f336c0d596f014619396/] 3) apriamo ora layout.erb e aggiungiamo questo partial nel punto desiderato, così: [crayon-52f336c0d5975837532866/] Facile vero? in questo modo trattiamo ogni regione del nostro layout indipendentemente da esso, rendendo tutto più logico e facile da manutenere. Per approfondire si veda questa sezione della documentazione. Breve riassunto: In sostanza possiamo riassumere, alla buona, che il codice ERB rinominato con il trattino basso è un partial ed è un pezzo di codice che stampiamo sul layout, mentre i file ERB senza il trattino basso sono le pagine web che richiamiamo a menu e stampiamo dentro il contenitore principale chiamato yield.Helpers
Tra gli helpers più usati ci sono sicuramente i link, siano essi ad un’immagine o ad una voce di menu che richiama una pagina. Vediamo entrambi i casi. Immagini: vanno richiamate col seguente codice [crayon-52f336c0d597a833754857/] questo helpers fa in modo che venga stampato il tag <img> con l’url alla cartella images creata da Middleman e contenente l’immagine richiamata. Bello vero? Non dobbiamo più preoccuparci di copiare bene il path delle immagini o rimodificarlo quando mettiamo in produzione il sito! Link: le voci di menu, ad esempio, avranno il seguente codice [crayon-52f336c0d597f496592328/] Questo codice stamperà il tag <a> aggiungendo la voce di menu 'Chi siamo’ che punterà al file ‘chi_siamo.html.erb' (creato nella root del progetto) il quale contenuto sarà stampato dentro l'area yield. Comodo vero? Dobbiamo solo pensare a creare il CSS del nostro menu, a tutto il resto ci pensa Middleman! Anche in questo caso si veda la documentazione.Build
Ora è arrivato il momento di generare l’HTML del nostro sito statico lanciando semplicemente il seguente comando da dentro la cartella del progetto: [crayon-52f336c0d5985753317188/] ed automagicamente avremmo dentro la cartella build tutti i file necessari da caricare sul nostro host e goderci la navigazione del nostro nuovo sito! Come tutti i progetti in Ruby, esistono molte estensioni ufficiali e non (chiamate gemme o gems) tra le quali spicca quella per implementare un blog o per vedere i cambiamenti grafici del sito senza fare il refresh del browser! Sono sicuro che anche voi, come me, se inizierete ad usarlo non smetterete mai dal momento che la sua leggerezza e velocità fanno recuperare un sacco di tempo rispetto allo scrivere lungo codice HTML o montando un CMS dalla struttura pesante laddove non ci fosse bisogno di pagine dinamiche! E voi, siete curiosi di sperimentare queste alternative o siete affezionati al vostro CMS anche in ambito di siti statici? Al prossimo tutorial!Mettiamo il turbo alla scrittura del nostro sito con Middleman! - Webhouse.