Utiliser le filtre « unique » pour présenter une grande liste d’articles

Présenter une grande liste d’articles en affichant la première lettre de leur titre sous forme d’onglets, à l’aide d’une boucle très simple utilisant le filtre « unique ».

On dispose d’un ensemble important d’articles (qu’on va supposer appartenir à une même rubrique pour simplifier),
et on veut en afficher la liste en présentant dans un onglet la première lettre de leur titre comme ceci :

Evidemment chacun adaptera la présentation à son gout en modifiant les styles CSS, y compris en simulant de véritables onglets
(voir par exemple la contrib Menu « portes coulissantes »).

Le but de cette contrib n’est pas de parler de styles mais de boucles.

Le code

1)- Les styles

On construit une liste en affichage « inline » puis les styles des onglets dans des balises <a>, le style « a:hover » étant le même que celui du « a » de la page courante.
Voici le shéma (voir le document joint pour un choix plus précis) :

	#onglets {
		...
	}
	#onglets li {
		display: inline;
		list-style: none;
		margin: 0;
	}
	a.onglets_off {
		text-decoration: none;
		color: #FFFFCC;
		background-color: #005731;
		padding: 4px 6px 4px 6px;
		border: 1px solid white;
	}
	a.onglets_off:hover, a.onglets_on {
		text-decoration: none;
		color: #005731;
		background-color: #FFFFCC;
		padding: 4px 6px 5px 6px;
		border: 1px solid white;
	}

2)- Les boucles

a)- La boucle qui affiche les onglets :

<BOUCLE_onglets(ARTICLES){id_rubrique}{par titre}{titre==^[A-ZÀÉÈ]}>

Le dernier critère peut être ajusté (voire supprimé), le but étant de ne retenir que les articles dont le titre commence pas une majuscule
(sinon l’article ne sera pas listé).

Pour chaque article, mais une seule fois pour chaque lettre différente :

- Récupérer la première lettre du titre dans une variable à l’aide de #SET et d’une expression régulière :

#SET{initiale,#TITRE|match{\w{1}}}

À ce propos, le filtre « match » ne semble pas prendre de classe du genre [A-Z], sans doute à cause des crochets.

- Replacer à l’aide de #GET 3 fois cette lettre dans le lien de l’onglet ; c’est là qu’on utilise le filtre « unique ».
Il faut choisir un des #GET (ici le texte cliquable du lien) et placer les autres dans ses parties alternatives comme ceci (sinon ça ne marche pas) :

[<a [class="(#ENV{lettre,A}|=={#GET{initiale}}|?{'onglets_on','onglets_off'})"] href="spip.php?rubrique#ID_RUBRIQUE&lettre=#GET{initiale}"> (#GET{initiale}|unique) </a>]

b)- La boucle qui affiche les articles (boucle classique avec pagination) :

<BOUCLE_tous_articles(ARTICLES){id_rubrique}{par titre}{titre==^#ENV{lettre,A}}{pagination}>

La valeur par défaut de #ENV active l’onglet de la lettre A s’il n’y a pas de paramètre dans l’URL.

3)- Page de code complète à télécharger :

Charger la page onglets.html dans votre dossier squelettes après avoir indiqué à la ligne 3 un numéro de rubrique (où il y a des articles à lister).

Appeler ensuite mon_site_spip/spip.php?page=onglets pour tester le code.

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom