« Modèle:ButtonLink/doc » : différence entre les versions

Navigation interactive dans l’historique

Dernière version du 16 janvier 2026 à 08:19

Utilisation

Ce modèle crée un bouton cliquable stylisé avec icône/logo pointant vers n'importe quelle destination (réseaux sociaux, services externes, pages internes, plateformes de téléchargement, etc.).

Syntaxe

{{ButtonLink
|link        = URL du lien
|image       = Nom du fichier image (avec extension)
|align       = Alignement du bouton : left, right, center
|text        = Texte affiché (optionnel)
|logo        = Nom de couleur prédéfinie (optionnel)
|background  = Couleur d'arrière-plan personnalisée (optionnel, remplace color)
|size        = Taille de l'image (défaut : x40px)
|title       = Texte du titre au survol (défaut : valeur de text)
|alt         = Texte alternatif (défaut : valeur de text)
}}

Paramètres

Paramètre	Description	Requis	Défaut
link	URL complète ou relative	Oui	-
image	Nom du fichier image (ex : "Discord-Logo-White.svg")	Non	-
align	Alignement du bouton sur la page	Non	(vide)
text	Texte affiché sous le logo	Non	(vide)
logo	Nom de couleur prédéfinie	Non	gray
background	Couleur d'arrière-plan personnalisée (hex, rgb, nom)	Non	(utilise color ou défaut)
size	Taille de l'image (format MediaWiki)	Non	x40px
title	Texte du titre HTML (infobulle au survol)	Non	valeur de text
alt	Texte alternatif pour l'accessibilité	Non	valeur de text

Lorsque logo est spécifié, le logo du site choisi sera affiché.
Si logo et background sont tous deux spécifiés, background est prioritaire et la couleur spécifiée sera appliquée à l'arrière-plan et le logo sera conservé.

Couleurs prédéfinies

Réseaux sociaux

Code	Plateforme	Couleur	Exemple
`discord`	Discord	violet (#5865f2)
`twitter`	Twitter/X	Bleu (#1da1f2)
`youtube`	YouTube	Rouge (#ff0000)
`twitch`	Twitch	Violet (#9146ff)
`reddit`	Reddit	Orange (#ff4500)
`mastodon`	Mastodon	Violet (#6364ff)
`bluesky`	Bluesky	Bleu (#0085ff)
`linkedin`	LinkedIn	Bleu (#0077b5)	Fichier:ButtonLink-linkedin.svg
`facebook`	Facebook	Bleu (#1877f2)	Fichier:ButtonLink-facebook.svg
`instagram`	Instagram	Dégradé
`tiktok`	TikTok	Noir (#000000)
`snapchat`	Snapchat	Jaune (#fffc00)
`threads`	Threads	Noir (#000000)

Développement & Tech

Code	Plateforme	Couleur	Exemple
`stackoverflow`	Stack Overflow	Noir (#252627)	Fichier:ButtonLink-stackoverflow.svg
`npm`	npm	Rouge (#cb3837)	Erreur lors de la création de la vignette : The resulting image would be larger than 32767 pixels on either dimension. Librsvg currently cannot render to images bigger than that. Please specify a smaller size. convert: delegate failed `'rsvg-convert' --dpi-x %x --dpi-y %y -o '%o' '%i @ error/delegate.c/InvokeDelegate/1919. convert: unable to open file '/tmp/magick-fwHDy4UxHcn5LnLlRY5vBCcGOxlEJVaC': No such file or directory @ error/constitute.c/ReadImage/785. convert: no images defined `PNG:/tmp/transform_572999659c4b.png' @ error/deprecate.c/ConvertImageCommand/3366.
`pypi`	PyPI	Bleu (#3775a9)	Fichier:ButtonLink-pypi.svg
`docker`	Docker	Bleu (#2496ed)
`kubernetes`	Kubernetes	Bleu (#326ce5)	Fichier:ButtonLink-kubernetes.svg
`codepen`	CodePen	Blanc (#ffffff)
`gitlab`	GitLab	Orange (#fc6f23)
`github`	GitHub	Sombre (#24292e)

Plateformes de financement

Code	Plateforme	Couleur	Exemple
`buymeacoffee`	Buy Me a Coffee	Jaune (#ffdd00)
`helloasso`	HelloAsso	Violet (#4C40CF)
`kofi`	Ko-fi	Rouge (#ff5e5b)
`liberapay`	Liberapay	Jaune (#f6c915)
`opencollective`	Open Collective	Bleu (#7fadf2)
`patreon`	Patreon	Rouge (#ff424d)
`stripe`	Stripe	Violet (#635BFF)	Fichier:ButtonLink-stripe.svg

Plateformes de plugins Minecraft

Code	Plateforme	Couleur	Exemple
`modrinth`	Modrinth	Vert (#1bd96a)
`curseforge`	CurseForge	Orange (#f16436)	Fichier:ButtonLink-curseforge.svg
`hangar`	Hangar	Bleu (#0d6efd)	Fichier:ButtonLink-hangar.svg
`spigotmc` / `spigot`	SpigotMC	Jaune (#f7c03e)	Fichier:ButtonLink-spigot.svg
`bukkit`	Bukkit	Orange (#f89a1e)	Fichier:ButtonLink-bukkit.svg
`paper` / `paper`	PaperMC	Bleu (#1a8cff)	Fichier:ButtonLink-paper.svg
`purpur`	Purpur	Violet (#a855f7)	Fichier:ButtonLink-purpur.svg
`polymart`	Polymart	Rose (#ec4899)	Fichier:ButtonLink-polymart.svg
`github-releases`	GitHub Releases	Vert (#238636)	Fichier:ButtonLink-github-releases.svg
`jenkins`	Jenkins	Rouge (#d24939)	Fichier:ButtonLink-jenkins.svg
`maven`	Maven	Rouge (#c71a36)	Fichier:ButtonLink-maven.svg

Mod loaders Minecraft

Code	Plateforme	Couleur	Exemple
`minecraft`	Minecraft	Vert (#62b47a)
`forge`	Forge	Bleu foncé (#1e2c42)	Fichier:ButtonLink-forge.svg
`fabric`	Fabric	Beige (#dbd3c8)	Fichier:ButtonLink-fabric.svg
`quilt`	Quilt	Violet (#8b5cf6)	Fichier:ButtonLink-quilt.svg
`neoforge`	NeoForge	Orange (#ff6b35)	Fichier:ButtonLink-neoforge.svg

Logiciels serveur

Code	Plateforme	Couleur	Exemple
`velocity`	Velocity	Bleu (#3fa9f5)	Fichier:ButtonLink-velocity.svg
`waterfall`	Waterfall	Bleu (#0088ff)	Fichier:ButtonLink-waterfall.svg
`bungeecord`	BungeeCord	Jaune (#ffcc00)	Fichier:ButtonLink-bungeecord.svg
`sponge`	Sponge	Jaune (#f7cf0d)	Fichier:ButtonLink-sponge.svg

Modpacks

Code	Plateforme	Couleur	Exemple
`ftb` / `feed-the-beast`	Feed The Beast	Violet (#8e44ad)	Fichier:ButtonLink-ftb.svg
`technic`	Technic Pack	Rouge (#e74c3c)	Fichier:ButtonLink-technic.svg
`atlauncher`	ATLauncher	Bleu (#3498db)	Fichier:ButtonLink-atlauncher.svg

Couleurs sémantiques

Code	Alternative	Couleur	Usage
`primary`	`blue`	Bleu (#3366cc)	Actions principales
`secondary`	`gray`, `grey`	Gris (#72777d)	Actions secondaires
`success`	`green`	Vert (#14866d)	Messages de succès
`danger`	`red`	Rouge (#d73333)	Avertissements, erreurs
`warning`	`yellow`	Jaune (#fc3)	Alertes
`info`	`cyan`	Cyan (#00b8d4)	Informations
`purple`	`violet`	Violet (#6f42c1)	-
`pink`	-	Rose (#d63384)	-
`orange`	-	Orange (#fd7e14)	-
`teal`	-	Turquoise (#20c997)	-
`indigo`	-	Indigo (#6610f2)	-
`black`	-	Noir (#000)	-
`white`	-	Blanc (#fff)	-
`light`	-	Gris clair (#f8f9fa)	-
`dark`	-	Gris foncé (#343a40)	-

Exemples

Usage basique

{{ButtonLink
|link  = https://nfald.fr/discord
|text  = Rejoignez notre communauté
|logo = discord
}}

Rejoignez notre Discord

Sans texte (icône seule)

{{ButtonLink
|link  = https://github.com/nefald
|logo = github
}}

Couleur personnalisée

{{ButtonLink
|link  = https://exemple.fr
|image = Custom-Logo.svg
|text  = Bouton personnalisé
|background    = linear-gradient(135deg, #667eea 0%, #764ba2 100%)
}}

Boutons d'actions

<div class="button-link-grid">
{{ButtonLink
|link  = /wiki/Spécial:Téléverser
|image = Upload-Icon.svg
|text  = Téléverser un fichier
|logo = primary
}}
{{ButtonLink
|link  = /wiki/Spécial:Modifications_récentes
|image = Recent-Changes-Icon.svg
|text  = Modifications récentes
|logo = info
}}
{{ButtonLink
|link  = /wiki/Spécial:Pages_demandées
|image = Wanted-Pages-Icon.svg
|text  = Pages demandées
|logo = warning
}}
</div>

Détails techniques

Utilise TemplateStyles pour un CSS isolé
Entièrement responsive (adapté mobile)
Accessible (supporte les attributs alt et title)
Supporte les liens externes
Aucun JavaScript requis
Compatible tous navigateurs modernes
Les icônes de lien externe sont automatiquement masquées

Voir aussi

@@ Ligne 1 : / Ligne 1 : @@
 == Utilisation ==
-Ce modèle crée un bouton cliquable stylisé avec icône/logo pointant vers n'importe quelle destination (réseaux sociaux, services externes, pages internes, plateformes de téléchargement, etc.). Le lien est cliquable sur toute la surface du bouton.
+Ce modèle crée un bouton cliquable stylisé avec icône/logo pointant vers n'importe quelle destination (réseaux sociaux, services externes, pages internes, plateformes de téléchargement, etc.).
 === Syntaxe ===
@@ Ligne 7 : / Ligne 8 : @@
 <syntaxhighlight lang="mediawiki">
 {{ButtonLink
-|link              = URL du lien
+|link        = URL du lien
-|text              = Texte affiché (optionnel)
+|image       = Nom du fichier image (avec extension)
-|logo              = Nom du preset (couleur + logo par défaut)
+|align       = Alignement du bouton : left, right, center
-|image             = Nom du fichier image personnalisé (remplace le logo du preset)
+|text        = Texte affiché (optionnel)
-|position          = Position de l'image : center (défaut), left, right
+|logo        = Nom de couleur prédéfinie (optionnel)
-|align             = Alignement du bouton sur la page : left, center, right
+|background  = Couleur d'arrière-plan personnalisée (optionnel, remplace color)
-|size              = Taille de l'image (défaut : x80px)
+|size        = Taille de l'image (défaut : x40px)
-|background        = Couleur d'arrière-plan personnalisée (remplace la couleur du preset)
+|title       = Texte du titre au survol (défaut : valeur de text)
-|image-background  = Couleur de fond de l'image (utile pour QR codes)
+|alt         = Texte alternatif (défaut : valeur de text)
-|noimage           = oui pour masquer l'image
-|alt               = Texte alternatif (défaut : valeur de text)
 }}
 </syntaxhighlight>
@@ Ligne 28 : / Ligne 27 : @@
 | '''link''' || URL complète ou relative || Oui || -
 |-
-| '''text''' || Texte affiché dans le bouton || Non || (vide)
+| '''image''' || Nom du fichier image (ex : "Discord-Logo-White.svg") || Non || -
-|-
-| '''logo''' || Nom du preset prédéfini (ex : "discord", "github", "helloasso") || Non || gray
-|-
-| '''image''' || Nom du fichier image personnalisé (ex : "Custom-Logo.svg") || Non || Logo du preset ou ButtonLink-gray.svg
 |-
-| '''position''' || Position de l'image : "center" (au-dessus), "left" (à gauche), "right" (à droite) || Non || center
+| '''align''' || Alignement du bouton sur la page || Non || (vide)
 |-
-| '''align''' || Alignement du bouton sur la page : "left", "center", "right" || Non || (vide)
+| '''text''' || Texte affiché sous le logo || Non || (vide)
 |-
-| '''size''' || Taille de l'image (format MediaWiki) || Non || x80px
+| '''logo''' || Nom de couleur prédéfinie || Non || gray
 |-
-| '''background''' || Couleur d'arrière-plan personnalisée (hex, rgb, gradient) || Non || (utilise la couleur du preset)
+| '''background''' || Couleur d'arrière-plan personnalisée (hex, rgb, nom) || Non || (utilise color ou défaut)
 |-
-| '''image-background''' || Couleur de fond derrière l'image (utile pour QR codes) || Non || transparent
+| '''size''' || Taille de l'image (format MediaWiki) || Non || x40px
 |-
-| '''noimage''' || Mettre "oui" pour masquer complètement l'image || Non || (vide)
+| '''title''' || Texte du titre HTML (infobulle au survol) || Non || valeur de '''text'''
 |-
 | '''alt''' || Texte alternatif pour l'accessibilité || Non || valeur de '''text'''
@@ Ligne 51 : / Ligne 46 : @@
 {{Bandeau|type=astuce
 |
-* Le paramètre '''logo''' définit automatiquement la couleur du bouton ET l'image par défaut
+* Lorsque '''logo''' est spécifié, le logo du site choisi sera affiché.
-* '''image''' permet de remplacer le logo par défaut tout en gardant la couleur du preset
+* Si '''logo''' et '''background''' sont tous deux spécifiés, '''background''' est prioritaire et la couleur spécifiée sera appliquée à l'arrière-plan et le logo sera conservé.}}
-* '''background''' remplace complètement la couleur du preset
-* '''image-background''' ajoute un fond blanc/coloré derrière l'image (idéal pour QR codes)
-}}
-== Presets disponibles (logo=) ==
+== Couleurs prédéfinies ==
 === Réseaux sociaux ===
@@ Ligne 64 : / Ligne 56 : @@
 ! Code !! Plateforme !! Couleur !! Exemple
 |-
-| <code>discord</code> || Discord || Violet (#5865f2) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=discord}}
+| <code>discord</code> || Discord || violet (#5865f2) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=discord}}
 |-
 | <code>twitter</code> || Twitter/X || Bleu (#1da1f2) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=twitter}}
@@ Ligne 148 : / Ligne 140 : @@
 | <code>bukkit</code> || Bukkit || Orange (#f89a1e) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=bukkit}}
 |-
-| <code>paper</code> || PaperMC || Bleu (#1a8cff) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=paper}}
+| <code>paper</code> / <code>paper</code> || PaperMC || Bleu (#1a8cff) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=paper}}
 |-
 | <code>purpur</code> || Purpur || Violet (#a855f7) || {{ButtonLink|link=https://wiki.nefald.fr/|logo=purpur}}
@@ Ligne 241 : / Ligne 233 : @@
 == Exemples ==
-=== Usage basique (avec preset) ===
+=== Usage basique ===
 <pre>
 {{ButtonLink
-|link = https://nfald.fr/discord
+|link  = https://nfald.fr/discord
-|text = Rejoignez notre Discord
+|text  = Rejoignez notre communauté
 |logo = discord
 }}
@@ Ligne 252 : / Ligne 244 : @@
 {{ButtonLink
-|link = https://nfald.fr/discord
+|link  = https://nfald.fr/discord
-|text = Rejoignez notre Discord
+|text  = Rejoignez notre Discord
 |logo = discord
 }}
@@ Ligne 261 : / Ligne 253 : @@
 <pre>
 {{ButtonLink
-|link = https://github.com/nefald
+|link  = https://github.com/nefald
 |logo = github
 }}
@@ Ligne 267 : / Ligne 259 : @@
 {{ButtonLink
-|link = https://github.com/nefald
+|link  = https://github.com/nefald
 |logo = github
 }}
-=== Image à gauche du texte ===
+=== Couleur personnalisée ===
-<pre>
-{{ButtonLink
-|link     = https://www.helloasso.com/associations/nefald
-|text     = Faire un don
-|logo     = helloasso
-|position = left
-}}
-</pre>
-{{ButtonLink
-|link     = https://www.helloasso.com/associations/nefald
-|text     = Faire un don
-|logo     = helloasso
-|position = left
-}}
-=== QR Code avec fond blanc ===
 <pre>
 {{ButtonLink
-|link             = https://www.helloasso.com/associations/nefald
+|link  = https://exemple.fr
-|text             = Scanner pour donner
+|image = Custom-Logo.svg
-|image            = QRCode-HelloAsso.png
+|text  = Bouton personnalisé
-|logo             = helloasso
+|background    = linear-gradient(135deg, #667eea 0%, #764ba2 100%)
-|image-background = #FFFFFF
-|position         = left
 }}
 </pre>
-=== Couleur et image personnalisées ===
-<pre>
-{{ButtonLink
-|link       = https://exemple.fr
-|image      = Custom-Logo.svg
-|text       = Bouton personnalisé
-|background = linear-gradient(135deg, #667eea 0%, #764ba2 100%)
-}}
-</pre>
-=== Bouton centré sur la page ===
-<pre>
-{{ButtonLink
-|link  = https://nfald.fr/discord
-|text  = Rejoindre
-|logo  = discord
-|align = center
-}}
-</pre>
 === Boutons d'actions ===
@@ Ligne 329 : / Ligne 281 : @@
 <div class="button-link-grid">
 {{ButtonLink
-|link = /wiki/Spécial:Téléverser
+|link  = /wiki/Spécial:Téléverser
-|text = Téléverser un fichier
+|image = Upload-Icon.svg
+|text  = Téléverser un fichier
 |logo = primary
 }}
 {{ButtonLink
-|link = /wiki/Spécial:Modifications_récentes
+|link  = /wiki/Spécial:Modifications_récentes
-|text = Modifications récentes
+|image = Recent-Changes-Icon.svg
+|text  = Modifications récentes
 |logo = info
 }}
 {{ButtonLink
-|link = /wiki/Spécial:Pages_demandées
+|link  = /wiki/Spécial:Pages_demandées
-|text = Pages demandées
+|image = Wanted-Pages-Icon.svg
+|text  = Pages demandées
 |logo = warning
 }}
@@ Ligne 349 : / Ligne 304 : @@
 * Utilise [[mw:Extension:TemplateStyles|TemplateStyles]] pour un CSS isolé
-* Le lien est cliquable sur **toute la surface du bouton** (zone invisible en position absolue)
 * Entièrement responsive (adapté mobile)
-* Accessible (supporte les attributs alt)
+* Accessible (supporte les attributs alt et title)
-* Supporte les liens externes et internes
+* Supporte les liens externes
-* Les icônes de lien externe MediaWiki sont automatiquement masquées
-* Centrage vertical parfait de l'image et du texte (flexbox)
 * Aucun JavaScript requis
 * Compatible tous navigateurs modernes
+* Les icônes de lien externe sont automatiquement masquées
 == Voir aussi ==