#30 Pretty Page Title
Pressochè tutte le applicazioni Rails usano i layout e, proprio per questo, c’è una tendenza al fatto che ciascuna pagina di una applicazione abbia il proprio titolo (dove per titolo si intende la roba scritta all’interno del tag <title> della sezione di head di una pagina html). Dare a ciascuna pagina il proprio titolo non è difficile e vi mostreremo come fare proprio in questo episodio.
Un primo tentativo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>ASCIIcasts</title> <%= stylesheet_link_tag ’asciicasts’ %> …
La prima parte del layout del sito ASCIIcasts.
il codice sopra mostra le prime righe del file di layout del sito ASCIIcasts. L’elemento titolo è cablato, per cui risulterà sempre lo stesso per ogni pagina. Diamo un’occhiata al template della home page: lo modificheremo per dare alla pagina il suo personale titolo.
<h2>Recent Episodes</h2> <ol class="episodeList"> <% @episodes.each do |episode| %> <%= render :partial=>’episode_item’, :locals => {:episode => episode} %> <% end %> </ol>
La vista di template della home page.
Abbiamo già mostrato nell’episodio 8 come si possa usare il content_for per cambiare il contenuto di un layout da un template. Proviamo a usare quella tecnica per modificare il titolo della nostra pagina. In cima al template di sopra abbiamo messo le seguenti righe:
<% content_for :title do %>Recent Episodes<% end %>
Affinchè il contenuto del blocco content_for sia mostrato nel layout, modifichiamo l’elemento title del nostro file di layout:
<title>ASCIIcasts - <%= yield :title %></title>
Aggiornando la pagina, possiamo vedere che il titolo è stato passato dal template al layout.
<<<<<<< HEAD
Il titolo della pagina è ora cambiato.
Usare content_for su ogni pagina non è certamente il modo più elegante per fare ciò, che vorremmo, soprattutto perchè ci costringe a mettere un blocco content_for in ogni pagina del sito. Un modo alternativo sarebbe quello di impostare una variabile di istanza in ogni pagina e mostrarne il valore nel file di layout. Cambiamo la linea del content_for nel template con <% @page_title = "Recent Episodes" %> e aggiorniamo il layout in modo tale che mostri i contenuti della variabile @page_title.
Il titolo della pagina è ora cambiato.
Usare content_for su ogni pagina non è certamente il modo più elegante per fare ciò, che vorremmo, soprattutto perchè ci costringe a mettere un blocco content_for in ogni pagina del sito. Un modo alternativo sarebbe quello di impostare una variabile di istanza in ogni pagina e mostrarne il valore nel file di layout. Cambiamo la linea del content_for nel template con <% @page_title = "Recent Episodes" %> e aggiorniamo il layout in modo tale che mostri i contenuti della variabile @page_title.
<title>ASCIIcasts - <%= @page_title %></title>
Anche questo funziona, ma c’è un modo ancora migliore.
Usiamo un metodo helper
La soluzione più pulita è quella di creare un metodo nell’application_helper chiamato title, che accetta un parametro contenente il testo da mostrare:
module ApplicationHelper def title(page_title) content_for(:title) { page_title } end end
Poichè continuiamo ad usare il content_for, dobbiamo ripristinare il layout com’era prima in modo tale che si possa usare yield per mostrare il titolo:
<title>ASCIIcasts - <%= yield :title %></title>
Ora possiamo impostare il titolo chiamando il metodo title in ogni pagina:
<% title "Recent Episodes" %>
Impostare un default
Potremmo non voler impostare un titolo differente per ciascuna pagina del nostro sito, per cui sarebbe bello poter avere un valore di default a cui fare riferimento in questi casi. Dobbiamo solo fare una piccola modifica al nostro layout per fare ciò:
<title>ASCIIcasts - <%= yield (:title) || "video.to_s" %></title>
Ora, se il titolo non è definito in una certa pagina, viene mostrato il valore di default.
Un trucchetto ulteriore
C’è un ultimo trucco che possiamo adottare per ridurre le ripetizioni di codice nella nostra applicazione. Ogni pagina del nostro sito ha un elemento h2 in testata che contiene lo stesso testo del titolo. Per rimuovere questa duplicazione, potremmo rimuovere l’elemento da ciascuno dei nostri template e metterlo piuttosto in cima al layout. La parte significativa del nostro layout appare ora così:
<div class="main"> <h2><%= yield(:title) %></h2> <%= yield %> </div>
In questo modo possiamo rimuovere tutti gli elementi h2 da ogni pagina perchè sono gestiti dal layout.
Il nostro sito ora ha dei titoli di pagina molto più significativi che daranno agli utenti che trovano le pagine del vostro sito mediante motori di ricerca, un idea migliore in merito a cosa tratta il sito.
<<<<<<< HEAD
=======
Il sito ASCIIcasts aveva un titolo statico per tutte le pagine fino a che non è stato scritto questo episodio. Ho aggiornato il sito non appena ho finito di trascrivere l’episodio.
