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

Version du 5 novembre 2025 à 20:35

[{{{link}}} Fichier:ButtonLink-gray.svg]

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)
|text       = Texte affiché (optionnel)
|color      = Nom de couleur prédéfinie (optionnel)
|bg         = 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	-
text	Texte affiché sous le logo	Non	(vide)
color	Nom de couleur prédéfinie	Non	gray
bg	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 color est spécifié, le logo du site choisi sera affiché.
Si color et bg sont tous deux spécifiés, bg est prioritaire.

Couleurs prédéfinies

Réseaux sociaux

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

Développement & Tech

Code	Plateforme	Couleur	Exemple
`stackoverflow`	Stack Overflow	Orange (#f48024)	Fichier:ButtonLink-stackoverflow.svg
`npm`	npm	Rouge (#cb3837)	Fichier:ButtonLink-npm.svg
`pypi`	PyPI	Bleu (#3775a9)	Fichier:ButtonLink-pypi.svg
`docker`	Docker	Bleu (#2496ed)
`kubernetes`	Kubernetes	Bleu (#326ce5)	Fichier:ButtonLink-kubernetes.svg
`codepen`	CodePen	Noir (#000000)	Fichier:ButtonLink-codepen.svg
`gitlab-ci`	GitLab CI	Orange (#fc6d26)	Fichier:ButtonLink-gitlab-ci.svg

Plateformes de financement

Code	Plateforme	Couleur	Exemple
`kofi`	Ko-fi	Rouge (#ff5e5b)	Fichier:ButtonLink-kofi.svg
`liberapay`	Liberapay	Jaune (#f6c915)	Fichier:ButtonLink-liberapay.svg
`buymeacoffee`	Buy Me a Coffee	Jaune (#ffdd00)	Fichier:ButtonLink-buymeacoffee.svg
`opencollective`	Open Collective	Bleu (#7fadf2)	Fichier:ButtonLink-opencollective.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
`papermc` / `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)	Fichier:ButtonLink-minecraft.svg
`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
|image = Discord-Logo-White.svg
|text  = Rejoignez notre Discord
|color = discord
}}

Rejoignez notre Discord

Sans texte (icône seule)

{{ButtonLink
|link  = https://github.com/nefald
|image = GitHub-Logo-White.svg
|color = github
}}

Fichier:GitHub-Logo-White.svg

Lien interne

{{ButtonLink
|link  = /wiki/Aide:Sommaire
|image = Help-Icon.svg
|text  = Centre d'aide
|color = primary
}}

[/wiki/Aide:Sommaire Centre d'aideCentre d'aide]

Couleur personnalisée

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

Grille de téléchargements multi-plateformes

<div class="button-link-grid">
{{ButtonLink
|link  = https://modrinth.com/plugin/mon-plugin
|image = Modrinth-Logo.svg
|text  = Modrinth
|color = modrinth
}}
{{ButtonLink
|link  = https://www.curseforge.com/minecraft/bukkit-plugins/mon-plugin
|image = CurseForge-Logo.svg
|text  = CurseForge
|color = curseforge
}}
{{ButtonLink
|link  = https://hangar.papermc.io/nefald/MonPlugin
|image = Hangar-Logo.svg
|text  = Hangar
|color = hangar
}}
{{ButtonLink
|link  = https://www.spigotmc.org/resources/mon-plugin.12345/
|image = Spigot-Logo.svg
|text  = SpigotMC
|color = spigot
}}
{{ButtonLink
|link  = https://polymart.org/resource/mon-plugin.1234
|image = Polymart-Logo.svg
|text  = Polymart
|color = polymart
}}
{{ButtonLink
|link  = https://github.com/nefald/MonPlugin/releases
|image = GitHub-Logo-White.svg
|text  = GitHub
|color = github-releases
}}
</div>

ModrinthModrinth

CurseForgeCurseForge

HangarHangar

SpigotMCSpigotMC

PolymartPolymart

GitHubGitHub

Rangée de réseaux sociaux

<div class="button-link-grid">
{{ButtonLink|link=https://discord.gg/xxx|image=Discord-Logo-White.svg|color=discord}}
{{ButtonLink|link=https://twitter.com/xxx|image=Twitter-Logo-White.svg|color=twitter}}
{{ButtonLink|link=https://github.com/xxx|image=GitHub-Logo-White.svg|color=github}}
{{ButtonLink|link=https://www.patreon.com/xxx|image=Patreon-Logo-White.svg|color=patreon}}
</div>

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
|color = primary
}}
{{ButtonLink
|link  = /wiki/Spécial:Modifications_récentes
|image = Recent-Changes-Icon.svg
|text  = Modifications récentes
|color = info
}}
{{ButtonLink
|link  = /wiki/Spécial:Pages_demandées
|image = Wanted-Pages-Icon.svg
|text  = Pages demandées
|color = 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 et internes
Aucun JavaScript requis
Compatible tous navigateurs modernes
Les icônes de lien externe sont automatiquement masquées

Accessibilité

Le modèle est conçu pour être accessible :

Utilisation d'attributs alt pour les images
Attributs title pour les infobulles
Contraste de couleur respectant les normes WCAG
Navigation au clavier possible
Compatible avec les lecteurs d'écran

Voir aussi

@@ Ligne 1 : / Ligne 1 : @@
 <templatestyles src="ButtonLink/styles.css" />
-{{#invoke:ButtonLink|main
+<div class="button-link-wrapper {{#if:{{{color|}}}|button-link--{{{color}}}|}}" {{#if:{{{bg|}}}|style="background: {{{bg}}};"|}}><div class="button-link-content">[{{{link}}} [[Fichier:{{#if:{{{image|}}}|{{{image}}}|ButtonLink-{{#if:{{{color|}}}|{{{color}}}|gray}}.svg}}|{{{size|x40px}}}|link=|alt={{{alt|{{{text|}}}}}}]]{{#if:{{{text|}}}|
-|link={{{link|}}}
-|image={{{image|}}}
+'''{{{text}}}'''|}}]</div></div><noinclude>
-|text={{{text|}}}
-|color={{{color|}}}
-|bg={{{bg|}}}
-|size={{{size|x40px}}}
-|title={{{title|}}}
-|alt={{{alt|}}}
-}}<noinclude>
 {{Documentation}}
 </noinclude>