Grille d’articles
Une grille personnalisable du Système de Design de l’État pour lister et filtrer vos articles.
Publié le 03/12/2024 | Modifié le 24/06/2025
Règles d’utilisation
Évitez un usage "doublon"
Sur l’espace public, les rubriques affichent déjà, automatiquement, une grille avec les articles publiés qu’elles contiennent.
- Le titre de la grille doit être clair et concis.
- Par défaut, le titre est dans un élément
<h3>. Pour améliorer l’accessibilité, vous pouvez adapter cette balise à votre hiérarchie de contenu avec le paramètrebalise_titre.
Contenus de la grille
Disposition
Deux dispositions (verticale ou horizontale) sont disponibles pour afficher les articles de la grille.
La disposition verticale s’adapte automatiquement à la taille de l’écran (4 colonnes sur les écrans de grande taille, puis 3 colonnes pour la taille moyenne, puis 2, et une seule colonne pour les écrans de petite taille).
La disposition horizontale quant à elle, utilise toute la largeur disponible (une seule colonne) quelle que soit la taille de l’écran. Pour rester accessible, la disposition horizontale est réservée aux écrans de grande taille, et sur les écrans de petite taille (smartphone), la disposition horizontale devient automatiquement verticale.
Tri
Par défaut, la liste des articles est ordonnée par "date de publication" inverse pour afficher en premier les dernier articles publiés. Le paramètre trier_par permet de modifier l’ordre d’affichage des articles.
Trier par `titre` ou `numero_dans_titre`
Sur l’espace public, les numéros présents dans le titre d’un article n’apparaissent pas. Même s’ils n’apparaissent pas, certains titres d’articles contiennent des numéros pour ordonner la grille d’articles automatique d’une rubrique. Ces numéros sont cependant bien pris en compte lors de l’utilisation du paramètre trier_par=titre ou trier_par=numero_dans_titre.
Lors d’un tri par numero_dans_titre ou titre, les articles sans numéro (ou avec le numéro 0) apparaîtront en fin de liste, après ceux ayant un numéro.
Pour éviter un ordre d’affichage "incohérent", veillez à ne pas utiliser cet ordre de tri lorsque la grille contient des articles ayant des numéros dans le titre et des articles sans numéro dans le titre.
Nombre d’articles
Limite le nombre d’articles affichés dans la grille. Par défaut, quatre articles sont affichés avec un maximum de 48 articles.
Écrans de petite taille
Pensez aux écrans de petite taille qui affichent la grille sur une seule colonne. Pour éviter aux visiteurs de faire défiler une page "infiniment" longue, augmentez le nombre d’articles à afficher uniquement si c’est vraiment nécessaire. Le système de pagination automatique est déjà prévu pour faire défiler facilement les articles de la grille.
Pagination
Si le nombre total des articles à afficher dans la grille est supérieur à celui de la grille, alors un système de pagination s’ajoute automatiquement sous la grille. Désactivez le système de pagination avec le paramètre pagination=non.
Filtrer les articles
Contenu de la grille
Par défaut, la grille affiche tous les articles publiés du site sans aucun filtre.
Une grille d’articles, filtrée par des paramètres, qui ne contient aucun résultat ne s’affichera pas (même si un titre est paramétré).
Pour filtrer la liste des articles, plusieurs paramètres sont disponibles. Ils peuvent être utilisés simultanément pour affiner la liste des articles. Un paramètre peut être utilisé plusieurs fois (en changeant le numéro ciblé).
Par rubrique
Le paramètre rubrique suivi d’un numéro filtre la liste des articles contenus dans la rubrique en incluant aussi les articles de ses sous-rubriques.
Lors d’une utilisation multiple, le filtre appliqué est de type OU : liste des articles de la rubrique1 OU rubrique2.
Par mot-clé
Le paramètre mot suivi d’un numéro filtre la liste des articles ayant le mot-clé associé.
Lors d’une utilisation multiple, le filtre appliqué est de type ET : liste des articles ayant le mot-clé mot1 ET mot2 (dans cet exemple, un article étant associé uniquement mot-clé mot1 ne sera donc pas affiché).
Par article
Si le filtre par article est utilisé, il ne renverra que les articles concernés s’ils sont publiés. De fait, il est rarement utilisé simultanément avec les filtres par rubrique et par mot-clé.
Le paramètre article suivi d’un numéro filtre la liste des articles ayant le numéro correspondant.
Lors d’une utilisation unique, la grille affichera donc un seul article au maximum.
Lors d’une utilisation multiple, le filtre appliqué est de type OU : liste d’articles ayant le numéro 1 OU 2.
Paramètres du raccourci <dsfr|grille_articles>
| Nom du paramètre | Valeur par défaut | Valeur(s) autorisée(s) | |
|---|---|---|---|
| titre | un texte, non | Titre de la grille. Dans certains cas, pour ne pas utiliser de titre, précisez titre=non. | |
| balise_titre | h2 | h2, h3, h4, h5, h6 | S’il est présent, le titre est par défaut matérialisé avec une balise <h2>. Vous pouvez choisir le niveau de titre convenant à l’arborescence de votre page. |
| disposition | verticale | verticale, horizontale | Disposition de l’affichage des éléments de la grille. |
| trier_par | date_publication_inverse | date_publication, date_modification, titre, numero_dans_titre, numero | Tri pour ordonner l’affichage de la liste. Ajoutez _inverse pour inverser l’ordre du paramètre (ex. date_modification_inverse). |
| nombre | 4 | 1 à 48 | Nombre d’articles à afficher dans la liste. |
| pagination | oui | oui, non | Quand la liste contient plus d’éléments que le nombre paramétré, un système de pagination est affiché par défaut. Pour ne pas afficher la pagination, ajoutez aux paramètres pagination=non |
| rubrique | rubriqueN° |
Paramètre à compléter avec le numéro d’une rubrique pour filtrer la grille. Ce paramètre peut être utilisé plusieurs fois. Dans le cas d’une utilisation multiple, le filtre appliqué est de type OU (liste d’articles présents dans la rubrique rubrique1 OU rubrique2). | |
| mot | motN° |
Paramètre à compléter avec le numéro d’un mot-clé pour filtrer la grille. Ce paramètre peut être utilisé plusieurs fois. Dans le cas d’une utilisation multiple, le filtre appliqué est de type ET (liste d’articles ayant le mot-clé mot1 ET mot2). | |
| article | articleN° |
Paramètre à compléter avec le numéro d’un article pour filtrer la grille. Ce paramètre peut être utilisé plusieurs fois. Dans le cas d’une utilisation multiple, le filtre appliqué est de type OU (liste d’articles ayant le numéro 1 OU 2). |
Exemples d’utilisations
Derniers articles publiés du site
Grille d’articles
Lister des articles avec la grille du Système de Design de l’État
Modèle dynamique
Publié le 03/12/2024
Plan
Créer dynamiquement une représentation visuelle de la structure du site ou d’une rubrique
Modèle dynamique
Publié le 28/11/2024
Barre de recherche - Search
Afficher une barre de recherche dans vos contenus éditoriaux
🇫🇷 Système de Design de l’État
Publié le 28/11/2024
Les rubriques et sous rubriques
Organiser le contenu éditorial dans une arborescence de rubriques
SPIP
Publié le 24/09/2024
<dsfr|grille_articles|titre=Derniers articles publiés du site>Uniquement les 3 premiers articles publiés du site
Site public et espace privé
Deux parties distinctes pour la gestion et la publication des éléments éditoriaux
SPIP
Publié le 15/04/2024
Visiteurs et groupes d’auteurs
Status et habilitations des différents groupes d’auteurs
SPIP
Publié le 15/04/2024
<dsfr|grille_articles|titre=Uniquement les 3 premiers articles publiés du site|trier_par=date_publication|nombre=3|pagination=non>Avec une disposition horizontale et triée par date de modification
Tableaux
Présenter une liste structurée de données textuelles et/ou numériques
🇫🇷 Système de Design de l’État
Modifié le 23/09/2024
Alerte - Alert
4 types d’alerte pour attirer l’attention sur une information
🇫🇷 Système de Design de l’État
Modifié le 23/09/2024
<dsfr|grille_articles|titre=Avec une disposition horizontale et triée par date de modification|disposition=horizontale|trier_par=date_modification_inverse>Filtré par rubrique N°2 OU N°3
Grille d’articles
Lister des articles avec la grille du Système de Design de l’État
Modèle dynamique
Publié le 03/12/2024
Plan
Créer dynamiquement une représentation visuelle de la structure du site ou d’une rubrique
Modèle dynamique
Publié le 28/11/2024
Barre de recherche - Search
Afficher une barre de recherche dans vos contenus éditoriaux
🇫🇷 Système de Design de l’État
Publié le 28/11/2024
Les rubriques et sous rubriques
Organiser le contenu éditorial dans une arborescence de rubriques
SPIP
Publié le 24/09/2024
<dsfr|grille_articles|titre=Filtré par rubrique N°2 OU N°3|rubrique2|rubrique3>Filtré par mot N°3 ET N°4
Mise en avant - Callout
Mettre en évidence une information complémentaire
🇫🇷 Système de Design de l’État
Publié le 16/05/2024
Mise en exergue - Highlight
Mettre en évidence une information déjà présente dans le reste du contenu
🇫🇷 Système de Design de l’État
Publié le 16/05/2024
Alerte - Alert
4 types d’alerte pour attirer l’attention sur une information
🇫🇷 Système de Design de l’État
Publié le 16/05/2024
Tableaux
Présenter une liste structurée de données textuelles et/ou numériques
🇫🇷 Système de Design de l’État
Publié le 16/04/2024
<dsfr|grille_articles|titre=Filtré par mot N°3 ET N°4|mot3|mot4>Une sélection d'articles (à la une ?)
Liens hypertextes
Créer des liaisons entres vos contenus, articles, rubriques, documents...
SPIP
Publié le 11/06/2024
Code informatique
Afficher des portions de code informatique dans vos contenus éditoriaux
SPIP
Publié le 10/06/2024
<dsfr|grille_articles|titre=Une sélection d'articles (à la une ?)|article1|article15|article16>Un article unique sans titre de grille
Accordéon - Accordion
Économiser de l’espace sur de longues pages
🇫🇷 Système de Design de l’État
Publié le 28/05/2024
<dsfr|grille_articles|titre=non|disposition=horizontale|article12>