---
title: Module Tagcloud
aliases: []
names: []
__au: FrViPofm
__cr: CC-by-SA-NC 3.0
__dc: 20260831T162549
__dm: 20260831T214054
__id: EpA_/S/Site_web,_module_Tagcloud
__vs: 6
---
> [!introduction]-
> Cette note rassemble les décisions, conventions et résultats de tests relatifs au module de nuage de tags de la page d’accueil du site Ensemble pour Aixe.
>
> Le module est fonctionnel sur le plan de la collecte, du comptage, du filtrage, du tri, de la limitation et du calcul des tailles. Le rendu HTML du nuage a également été testé avec succès.
>
> La note complète la checklist générale Site web, avancée des travaux et sert de mémoire technique entre les sessions de travail.
>
> [☚](../Index) •
>
> keywords: #web, #EpA, #Grav, #tags, #nuage
# Décisions
## Collecte
Les tags sont collectés à partir des descendants de `@root.descendants`.
Seules les pages publiées (`p.published`), appartenant à l’une des sections définies dans `tagcloud.sections`, sont prises en compte.
La section d’une page est déterminée à partir du premier élément de sa route.
## Liste noire
Les tags présents dans `tagcloud.blacklist` sont exclus avant comptage.
La liste noire permet notamment d’écarter les tags techniques utilisés par le site, tels que `mottag`, `mottagtitre`, etc.
## Comptage et filtrage
Le traitement suit l’ordre :
```text
comptage → filtre min_freq → tri → max_tags
```
`min_freq `détermine la fréquence minimale nécessaire pour qu’un tag soit retenu.
`max_tags` limite le nombre de tags après le tri.
Ainsi, avec `order: freq`, les tags les plus fréquents sont privilégiés.
## Ordres de tri
Trois ordres sont disponibles :
* `alpha` : ordre alphabétique croissant ;
* `freq` : fréquence décroissante, puis ordre alphabétique ;
* `random` : ordre aléatoire.
L’ordre par défaut est `alpha`.
## Calcul des tailles
Les tailles sont exprimées en `rem`.
Lorsque plusieurs fréquences sont présentes, la taille est calculée par interpolation linéaire entre `min_size` et `max_size`.
La formule est :
```text
ratio = (fréquence - fréquence_min)
/ (fréquence_max - fréquence_min)
taille = min_size + ratio × (max_size - min_size)
```
Les fréquences minimale et maximale sont calculées après application de `max_tags`, sur les tags effectivement retenus.
Lorsque tous les tags retenus ont la même fréquence, la taille est fixée à `1rem`.
Cette valeur correspond à la taille de référence du texte courant.
# Rendu
Le module utilise la structure commune des autres modules :
```html
```
Chaque tag est rendu comme un lien avec :
* la classe commune `.page-tag` ;
* la classe spécifique `.tagcloud-tag` ;
* une taille définie directement dans l’attribut HTML `style`.
La taille étant définie dans `style`, elle prend la préséance sur la déclaration générique de taille de `.page-tag`.
Les liens utilisent :
```text
/recherche/tag:
```
avec encodage URL du nom du tag.
Le texte affiché conserve le tag original, avec échappement HTML.
# CSS
Le nuage utilise un conteneur flex :
```css
.tagcloud-wrapper {
display: flex;
flex-wrap: wrap;
gap: .5rem;
align-items: center;
justify-content: center;
}
```
Les tags sont des éléments flexibles et se répartissent sur plusieurs lignes.
L’alignement vertical des tags de tailles différentes est satisfaisant et les baselines sont correctement respectées dans le rendu testé.
Le `justify-content: center` assure le centrage horizontal du nuage.
# Fichiers
```text
user/
├── pages/
│ ├── 01.accueil/
│ │ ├── _tagcloud/
│ │ │ └── tagcloud.md
│ │ └── ...
│ └── ...
├── themes/
│ ├── epa/
│ │ ├── css/
│ │ │ ├── custom.css
│ │ │ └── ...
│ │ ├── templates/
│ │ │ ├── modular/
│ │ │ │ ├── tagcloud.html.twig
│ │ │ │ └── ...
│ │ │ └── ...
│ │ └── ...
│ └── ...
└── ...
# Configuration
Les paramètres utilisés par le module sont :
```yaml
tagcloud:
sections: []
blacklist: []
min_freq: 1
max_tags: 30
min_size: 0.8
max_size: 2
order: alpha
```
Valeurs par défaut dans Twig :
```text
sections → []
blacklist → []
min_freq → 1
max_tags → 30
min_size → 0.8rem
max_size → 2rem
order → alpha
```
# Travaux
## Fonctionnalités validées
- [x] Définir les sections prises en compte
- [x] Construire la collection en Twig à partir de `@root.descendants`
- [x] Identifier la section d’une page à partir de sa route
- [x] Filtrer les pages avec `published`
- [x] Exclure les tags de la liste noire
- [x] Compter les occurrences des tags
- [x] Appliquer `min_freq`
- [x] Transformer les résultats en liste pour permettre le tri
- [x] Définir l’ordre `alpha`
- [x] Définir l’ordre `freq` décroissant
- [x] Prévoir `random`
- [x] Appliquer `max_tags` après le tri
- [x] Calculer les fréquences minimale et maximale retenues
- [x] Interpoler la taille entre `min_size` et `max_size`
- [x] Utiliser `rem` pour les tailles du nuage
- [x] Cas d’une fréquence unique → `1rem`
- [x] Générer des liens vers `/recherche/tag:...`
- [x] Utiliser `.page-tag` pour conserver le style commun
- [x] Ajouter `.tagcloud` et `.tagcloud-tag`
- [x] Ajouter `.tagcloud-wrapper`
- [x] Centrer horizontalement le nuage
- [x] Tester le rendu HTML
- [x] Tester `min_freq` avec plusieurs valeurs
- [x] Tester le cas où aucun tag ne satisfait `min_freq`
- [x] Tester `max_tags`
- [x] Tester `max_tags: 0`
- [x] Tester le cas d’un seul niveau de fréquence
- [x] Tester le cas où tous les tags ont la même fréquence
- [x] Tester les tailles interpolées en `rem`
- [x] Tester `order: alpha`
- [x] Tester `order: freq`
- [x] Tester `order: random`
- [x] Tester la liste noire
- [x] Tester les tags accentués
- [x] Tester les tags contenant plusieurs mots
- [x] Tester une section inexistante dans `sections`
- [x] Tester le rendu *responsive*
- [x] Tester le mélange de tailles
- [x] Vérifier l’alignement des baselines
## Tests à compléter
- [ ] Tester explicitement l’exclusion d’une page non publiée avec un cas dédié
- [ ] Vérifier le comportement avec une configuration `sections` vide en situation réelle
- [ ] Vérifier le comportement avec une liste noire contenant tous les tags
- [ ] Vérifier le comportement avec `max_tags` supérieur au nombre de tags disponibles
- [ ] Vérifier les valeurs limites ou inhabituelles de `min_size` et `max_size`
- [ ] Vérifier le comportement avec des tags très longs
- [ ] Vérifier le comportement avec des caractères spéciaux supplémentaires
- [ ] Vérifier l’accessibilité du rendu final
- [ ] Finaliser le CSS du nuage
# Résultats des tests
## Interpolation
Sur des fréquences allant de 1 à 4 avec `min_size: 0.8` et `max_size: 2`, le calcul produit :
| fréquence | rem |
|----------:|-----|
| 1 | 0.80rem |
| 2 | 1.20rem |
| 3 | 1.60rem |
| 4 | 2.00rem |
Le résultat confirme une interpolation linéaire avec un pas de 0.4rem.
## Fréquence unique
Lorsque `frequency_min == frequency_max`, le résultat est : `1rem`
Le cas a été testé avec succès.
## max_tags
Le comportement de max_tags est conforme à la décision prise :
```text
comptage
→ filtre min_freq
→ tri
→ max_tags
→ calcul des fréquences retenues
→ calcul des tailles
```
Le cas `max_tags: 3` a été testé avec plusieurs valeurs de `min_freq`.
Le cas `max_tags: 0` produit un résultat vide.
## order: alpha
Les tags sont classés par ordre alphabétique croissant.
Testé avec succès.
## order: freq
Les tags sont classés par fréquence décroissante, avec ordre alphabétique comme critère secondaire.
Testé avec succès.
## order: random
Deux exécutions successives produisent des sélections et/ou des ordres différents.
Testé avec succès.
## Liste noire
Les tags blacklistés sont exclus du comptage et ne sont donc pas présents dans le nuage.
Testé avec succès.
## Tags accentués
Des tags tels que :
* forêt
* fête
* municipalité
* école
* élu
* écologie
sont correctement affichés.
Leur encodage URL est également correct.
Testé avec succès.
## Tags comportant plusieurs mots
Un tag tel que *changement climatique* est correctement affiché et son espace est encodé dans l’URL : `changement%20climatique`
Testé avec succès.
# Pages non publiées
Une page dont la date de publication est dans le futur disparaît du comptage des tags.
Le filtre `published` fonctionne donc comme attendu.
## Responsive
Le rendu *responsive* est satisfaisant.
Les tags se répartissent correctement sur plusieurs lignes et le mélange de tailles reste lisible.
# Code du module
Le fichier actif est : `themes/epa/templates/modular/tagcloud.html.twig`
Le module comprend les étapes suivantes :
1. Lecture de la configuration
2. Collecte des pages descendantes
3. Sélection des sections
4. Filtrage des pages publiées
5. Exclusion de la liste noire
6. Comptage des tags
7. Filtrage par fréquence minimale
8. Transformation en liste
9. Tri
10. Limitation à max_tags
11. Recherche des fréquences min/max retenues
12. Calcul des tailles
13. Génération du HTML
# État
Le module Tagcloud est considéré comme fonctionnel et validé pour son usage actuel.
Les principaux comportements fonctionnels et visuels ont été testés avec succès.
Les travaux restants concernent principalement la finition du CSS, l’accessibilité et quelques tests limites.