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

Version du 5 mars 2026 à 14:19

📚 Modèle:MiniCard

Description

Le modèle MiniCard crée des boutons élégants et cliquables. Il est conçu pour créer des menus de navigation visuels et attractifs vers les pages internes du wiki ou vers des liens externes.

Il s'intègre parfaitement avec la skin Citizen (support natif du mode clair/sombre) et s'adapte automatiquement à la taille de l'écran grâce à son système de grille dynamique.

Caractéristiques

Support automatique des liens internes ET externes.
Image de fond avec effet de flou artistique et overlay (lisibilité garantie).
Cartes sans image personnalisables avec les couleurs du thème (ex: progressive).
Grille intelligente (JavaScript) s'adaptant à la largeur de l'écran.
Animation fluide au survol.

Syntaxe

{{MiniCard
| link  = 
| text  = 
| image = 
| size  = 
| color = 
}}

Paramètres

Paramètre	Description	Requis	Exemple
link	Titre de la page wiki de destination OU URL complète (http://...)	Non (optionnel)	`Accueil` ou `https://nefald.fr`
text	Texte affiché sur le bouton	Oui (recommandé)	`Page d'accueil`
image	Nom du fichier image (sans Fichier:)	Non (optionnel)	`Home.png`
size	Taille de l'image (défaut: 250px)	Non (optionnel)	`250px`
color	Couleur d'accentuation (uniquement si pas d'image).	Non (optionnel)	`progressive`

Notes sur les paramètres

link : Si le lien commence par http ou https, le modèle générera automatiquement un lien externe s'ouvrant dans un nouvel onglet, avec une petite icône ↗.
text : Si vide, le contenu de "link" sera affiché comme texte.
image : Si absent, un fond neutre (ou la couleur définie via color) sera appliqué.

Exemples d'utilisation

Carte avec image

{{MiniCard|link=Accueil|text=Page d'accueil|image=Chateau de Nefald Ouest.png}}

Fichier:Chateau de Nefald Ouest.png

Page d'accueil

Carte sans image (Couleur thématique)

En utilisant color=progressive, la carte prendra la couleur d'accentuation de Nefald :

{{MiniCard|link=Faire un don|text=Soutenir le serveur|color=progressive}}

Soutenir le serveur

Carte avec Lien Externe

Le modèle détecte automatiquement les URLs :

{{MiniCard|link=https://discord.nefald.fr|text=Rejoindre le Discord|color=progressive}}

Rejoindre le Discord

Couleurs thématiques

Le paramètre color permet d'appliquer une couleur de fond spécifique à la carte (fonctionne uniquement si aucune image n'est définie). Les couleurs utilisent les variables de thème de la skin Citizen (gérant nativement le mode clair/sombre) et la palette de Nefald.

{{MiniCard|link=Accueil|text=success|color=success}}
{{MiniCard|link=Accueil|text=danger|color=danger}}
{{MiniCard|link=Accueil|text=info|color=info}}
{{MiniCard|link=Accueil|text=warning|color=warning}}
{{MiniCard|link=Accueil|text=surface-0|color=surface-0}}
{{MiniCard|link=Accueil|text=surface-1|color=surface-1}}
{{MiniCard|link=Accueil|text=surface-2|color=surface-2}}
{{MiniCard|link=Accueil|text=surface-3|color=surface-3}}
{{MiniCard|link=Accueil|text=surface-4|color=surface-4}}

Rendu

Grille de cartes dynamique

Pour afficher plusieurs cartes côte à côte, englobez-les dans une <div class="minicard-grid"></div>. Le système calculera automatiquement le nombre de colonnes et la hauteur idéale en fonction de l'écran du visiteur !

<div class="minicard-grid">
{{MiniCard|link=Nefald|text=Nefald|image=Chateau de Nefald Ouest.png}}
{{MiniCard|link=Raplonas|text=Raplonas|image=Raplonas_1.png}}
{{MiniCard|link=Histoire|text=Histoire|image=Chateau de Nefald Ouest.png}}
{{MiniCard|link=https://nefald.fr|text=Site web}}
</div>

Fichier:Chateau de Nefald Ouest.png

Nefald

Fichier:Raplonas 1.png

Raplonas

Fichier:Chateau de Nefald Ouest.png

Histoire

Site web

Bonnes pratiques

Choix des images

Format : PNG (transparent) ou JPG
Taille : 400×400px minimum pour un bon rendu du flou d'arrière-plan.
Poids : < 200 Ko (optimiser les images pour le web).
Style : Gardez une cohérence visuelle (ex: uniquement des icônes ou uniquement des paysages) dans une même grille.

Grilles et Mise en page

Utilisez toujours <div class="minicard-grid"></div> dès que vous avez plus d'une carte. Cela supprime les marges parasites et active l'alignement intelligent.
Évitez de mélanger des cartes "avec image" et "sans image" dans une même ligne, pour des raisons esthétiques.

Dépannage

Problème	Solution
L'image ne s'affiche pas	Vérifiez que le fichier existe sur le wiki et que son nom est correct (sensible à la casse).
Le lien externe ne marche pas	Assurez-vous d'avoir bien mis `https://` au tout début du paramètre `link=`.
La grille s'affiche bizarrement (cartes écrasées)	Attendez une seconde : le script JavaScript peut mettre un instant à calculer l'espace au chargement. Vérifiez aussi que vous avez bien fermé la balise `</div>` de la grille.
La couleur progressive ne s'affiche pas	Assurez-vous que vous n'avez pas mis d'image en même temps (les couleurs ne s'appliquent qu'aux cartes sans image).

Voir aussi

Modèle:Card - Pour des grandes cartes cliquables
Modèle:Button - Pour des boutons textuels plus classiques
Aide:Modèle - Guide général sur l'utilisation des modèles

@@ Ligne 1 : / Ligne 1 : @@
-<includeonly><templatestyles src="Modèle:MiniCard/styles.css" /><div class="minicard{{#if:{{{image|}}}|| minicard--no-image}}">{{#if:{{{image|}}}|<div class="minicard-background">[[Fichier:{{{image}}}|link=]]<div class="minicard-overlay"></div></div>}}{{#if:{{{link|}}}|{{#ifeq:{{lc:{{#sub:{{{link}}}|0|4}}}}|http|<span class="minicard-link-external">[{{{link}}} {{{text|{{{link}}}}}}]</span>|[[{{{link}}}|{{{text|{{{link}}}}}}]]}}|<span style="position: relative; z-index: 1; padding: 0 16px; color: #ffffff;">{{{text|Texte}}}</span>}}</div></includeonly>
+<includeonly><templatestyles src="Modèle:MiniCard/styles.css" /><div class="minicard plainlinks {{#if:{{{image|}}}|minicard--image|minicard--no-image}} {{#if:{{{color|}}}|minicard-color-{{{color}}}}}">{{#if:{{{image|}}}|<div class="minicard-background">[[Fichier:{{{image}}}|link=|{{{size|250}}}px]]<div class="minicard-overlay"></div></div>}}<div class="minicard-content">{{#if:{{{link|}}}|{{#ifeq:{{lc:{{padleft:|4|{{{link}}}}}}}|http|[{{{link}}} <span class="minicard-text">{{{text|{{{link}}}}}}</span>]|[[{{{link}}}|<span class="minicard-text">{{{text|{{{link}}}}}}</span>]]}}|<span class="minicard-text">{{{text|Texte}}}</span>}}</div></div></includeonly>
-<noinclude>[[Catégorie:Modèle de navigation]]{{Documentation}}</noinclude>
+<noinclude>
+[[Catégorie:Modèle de bouton]]
+{{Documentation}}{{SHORTDESC:Modèle de tuile de navigation cliquable}}
+</noinclude>