Anchor Ancre
Introduction
Le composant Anchor est un wrapper de lien hypertexte stylisé (<a>) utilisé pour un routage interne fluide du site et une navigation web externe sécurisée. Il gère automatiquement les normes de sécurité d'accessibilité (telles que l'ajout de balises de sécurité de cible pour les liens externes) et coordonne les palettes de couleurs.
Ce composant est entièrement intégré en tant que bloc link dans le Page Builder, permettant aux rédacteurs de contenu et aux administrateurs CMS de construire, organiser et styliser des liens texte, des liens d'icônes ou des appels à l'action directement.
Utilisation
Ces configurations représentent exactement comment les éléments de bloc du page-builder sont construits.
1. Lien de navigation simple (variante soulignée)
Un hyperlien textuel standard avec le style d'indicateur de soulignement par défaut. Idéal pour les liens de texte en ligne, les pieds de page et les listes de navigation secondaires génériques.
{
"blockType": "link",
"href": "/docs",
"variant": "underline",
"colorPalette": "blue",
"children": [
{
"blockType": "text",
"content": "Go to Documentation"
}
]
}
2. Lien d'action sans style (type plain)
Rend un lien avec la couleur de texte par défaut et supprime le style de soulignement standard, préservant le style de mise en page pour les menus personnalisés, les éléments d'en-tête ou les barres latérales.
{
"blockType": "link",
"href": "/blog",
"variant": "plain",
"colorPalette": "slate",
"children": [
{
"blockType": "text",
"content": "Read our Blog"
}
]
}
3. Lien externe sécurisé en onglet (accent violet)
Ouvre les sites web externes en toute sécurité dans un nouvel onglet du navigateur. Le moteur sous-jacent injecte automatiquement des attributs de sécurité obligatoires pour protéger la portée du navigateur de l'utilisateur.
{
"blockType": "link",
"href": "https://github.com",
"target": "_blank",
"colorPalette": "purple",
"children": [
{
"blockType": "text",
"content": "Open GitHub Profile ↗"
}
]
}
Propriétés
| Propriété | Type de champ CMS | Défaut | Description / Options prises en charge |
|---|---|---|---|
Destination du lien (href) | string | - | Le chemin de destination, la route localisée ou l'URL externe complète. |
Fenêtre cible (target) | select | - | Sélection de la fenêtre cible. Utilisez "_blank" pour ouvrir la destination du lien dans un nouvel onglet du navigateur. |
Variante visuelle (variant) | select | "underline" | Contrôle le style du texte. • "underline" — Texte en gras avec une bordure inférieure animée de couleur assortie. • "plain" — Hérite de la structure de mise en page du texte parent sans soulignement par défaut. |
Thème de couleur (colorPalette) | select | "blue" | Thème visuel appliqué à la couleur du texte et aux contours de survol. • Options : blue, green, red, purple, orange, amber, cyan, slate. |
Contenu enfant (children) | list | - | Blocs de page imbriqués rendus à l'intérieur de l'ancre. Peut contenir des feuilles de texte, des icônes ou des sous-blocs personnalisés. |
Notes pour les développeurs et accessibilité
- Gestion sécurisée des cibles : Lors de la navigation avec
target="_blank", le composant ajoute automatiquementrel="noopener noreferrer". Cela garantit une sécurité absolue contre les scripts de redirection malveillants exécutés dans les portées de la fenêtre parente (window.opener). - Liens de routeur interactifs : Sous le capot, si
asChildest activé, les styles d'ancre et les propriétés de cible sécurisée sont automatiquement fusionnés directement sur les composants de routeur personnalisés (par exemple, structures<Link>du framework) sans rendre de divs wrapper<a>imbriqués inutiles. - Accès clavier : Comme cela est rendu sous forme de lien HTML natif, la navigation complète par la touche Tab, les contours de survol et le déclenchement des clics par la touche Entrée fonctionnent nativement sur tous les clients sans JS côté client supplémentaire.