Giorno 9: Fornite ulteriori ausili alla navigazione
Avete familiarità con il tag <link>
in relazione all’utilizzo con i fogli di stile esterni. Ma sapete che potete usare una sintassi simile per puntare alla vostra home page, ed alla pagina subito precedente o successiva? Per esempio, per pagine archiviate per giorno, potete puntare agli articoli del giorno precedente, o di quelli del giorno successivo (se c’è). Se avete pagine singole per ogni articolo, potete puntare direttamente all’articolo precedente o a quello successivo.
<link rel="home" title="Home" href="http://url/of/home/page" />
<link rel="prev" title="Title of previous page" href="http://url/of/previous/page" />
<link rel="next" title="Title of next page" href="http://url/of/next/page" />
Questi link, sono normalmente invisibili ai normali browser visuali come Internet Explorer, ma possono essere visualizzati, nei browser alternativi, e aiutare i navigatori a scorrere il vostro sito. Probabilmente fornite già molti modi per navigare: archivi settimanali o mensili, articoli recenti, calendario mensile con gli articoli di ogni giorno. Potreste anche già avere link nelle pagine di archivio ai giorni o agli articoli precedenti o successivi. Tutte queste modalità sono perfette: conservatele e aggiungeteci anche questo suggerimento.
A chi serve?
- A Marcus . Il browser testuale Lynx visualizza gli ulteriori aiuti alla navigazione all’inizio della pagina usando il titolo inserito nell’attributo
title
. Leggendo l’archivio giornaliero del 18 giugno, Marcus vede:
#Home Giorno 8 Giorno 10
(Il carattere # informa Marcus che si tratta di un metadato non del contenuto della pagina. Lynx fa lo stesso sulla linea del vostro titolo di pagina significativo.)
- A Michael. Il suo browser testuale Links (da non confondere con quello di Marcus che è Lynx) visualizza anch’esso gli aiuti aggiuntivi all’inizio di pagina così:
Link: home
Link: prev
Link: next
- A Bill. Mozilla visualizza i link aggiuntivi di navigazione nella barra Site Navigation. Il tipo di link (“home”, “prev”, “next”) è visualizzato sul bottone, e il titolo del link come tooltip [NdT un suggerimento a comparsa, solitamente in un riquadro giallo] (Nota: la Site Navigation toolbar era presente in Mozilla 0.99, è stata rimossa all’ultimo minuto nella versione 1.0, ma è tornata gia dalla 1.1. Nelle versioni che la consentono, potete visualizzarla tramite il menu View, Show/Hide, Site Navigation Bar, Show Always.)
- Agli utenti di iCab. iCab visualizza i link di navigazione in un menu a discesa nella toolbar in usando il titolo definito in ogni link.
Come fare
Con Movable Type, aggiungete queste linee al modello Date-Based Archive subito dopo il tag <head>
:
<link rel="home" href="<$MTBlogURL$>" title="Home" />
<MTArchivePrevious>
<link rel="prev" href="<$MTArchiveLink$>" title="<$MTArchiveTitle$>" />
</MTArchivePrevious>
<MTArchiveNext>
<link rel="next" href="<$MTArchiveLink$>" title="<$MTArchiveTitle$>" />
</MTArchiveNext>
E aggiungete questo al modello Individual Entry Archive sempre immediatamente dopo il tag <head>
:
<link rel="home" href="<$MTBlogURL$>" title="Home" />
<MTEntryPrevious>
<link rel="prev" href="<$MTEntryLink$>" title="<$MTEntryTitle$>" />
</MTEntryPrevious>
<MTEntryNext>
<link rel="next" href="<$MTEntryLink$>" title="<$MTEntryTitle$>" />
</MTEntryNext>
Con Greymatter, aggiungete questo codice dopo il tag <head>
nel vostro modello 4 Entry Page:
<link rel="home" title="Home" href="{{pageindexlink}}">
<link rel="prev" title="{{previousentrysubject}}" href="{{entrieswebpath}}/{{previousentrynumberpadded}}.html">
<link rel="next" title="{{nextentrysubject}}" href="{{entrieswebpath}}/{{nextentrynumberpadded}}.html">
Con Radio, tutto è semplificato dai Navigation Links per Radio di Sjoerd Visscher, un’insieme di macro che fanno proprio questo.
- .
navigationLinks.txt
,nextDayLink.txt
,prevDayLink.txt
,permalinkUrl.txt
) nella vostra cartellaMacros
. Nell’installazione standard in Windows, questa dovrebbe essere inC:\Program Files\Radio UserLand\Macros
.<head>
:
<%navigationLinks()%>
Sfortunatamente, non so come implementare le funzioni di link precedente e successivo in Manila o Blogger, ma potete perlomeno aggiungere questo codice immediatamente dopo il tag <head>
:
<link rel="home" title="Home" href="http://url/of/your/home/page">
Approfondimenti
- Sjoerd Visscher: Navigation links in your Radio Userland weblog.