Créer un Menu Garni de Petits Cailloux

par Christophe Ducamp

vendredi 4 juin 2004

Les "petits cailloux" (ou "Breadcrumbs") dans un site web sont des indicateurs visuels pour vous dire où vous êtes. Placés habituellement en haut d'une page web, ils sont un guide cliquable pour vous dire où vous êtes situés. Ils se montrent très utiles pour les utilisateurs qui cherchent leurs chemins à travers un site complexe.

Prenons par exemple, ce site hiérarchique avec plusieurs dossiers inclus :

Arbre pour créer des breadcrumbs

Notez que chaque dossier dans ce site a un fichier index , qui produit une table des matières pour ce fichier. Par exemple Sports\Nonfootball\index est la table des matières pour la section nonfootball. Quand les utilisateurs vont dans n'importe quel article de ce fichier, ils pourront voir un tag "You are here" ou "Vous êtes ici" en français :

Chaque section de la rangée est un lien vers la page index appropriée.

Pour créer des petits cailloux dans votre site :

1. Créez un fichier index dans chaque dossier. Ces fichiers index peuvent être tous les mêmes ou peuvent être différents. Vous pouvez créer un gabarit personnalisé pour les fichiers index s'ils sont tous les mêmes. Ce fichier index pourrait inclure une boucle comme :

{$ foreach x in (and thisFolder (not (filename "index"))) $}

Cette boucle listera tous les articles dans ce fichier exception faite  du fichier index lui-même.

2. Dans le fichier index, utilisez le champ Extra 2 pour stocker vos petits cailloux. Vous devrez créer manuellement vos petits cailloux pour chaque dossier de votre site. C'est une nuisance mais parce que les dossiers de votre site ne changeront probablement pas souvent, ce n'est pas une mauvaise solution. Par exemple dans le fichier index nonfootball vous pourriez avoir cela dans le champ Extra2 :

Ces liens ont été créés manuellement vers les fichiers index appropriés.

3. Modifiez vos gabarits pour afficher les petits cailloux sur chaque page en utilisant ce code :

{$ foreach 1 x in (and thisFolder (fileName "index")) $}
       Vous êtes ici : {$ x.extra2 $}
    {$ next $}

Ceci extrait automatiquement le champ extra2 du fichier appelé "index" dans le dossier en cours.

Un site complet présentant comment créer un site avec des "petits cailloux" peut être téléchargé ici en anglais (468KB).

Sauf mentions contraires, tous les contenus de ce site web appartiennent à leurs auteurs et sont placés sous la licence Art Libre. Contact Christophe Ducamp

Fait avec CityDesk  Voir les statistiques de SiteMeter