JVFlux:Guide des Modèles (Template)

Un modèle est élément codé qui peut être inséré dans un article.

Comment ça fonctionneModifier

Pour faire simple, une page de type Modèle:Nomdumodèle contient quelque chose (un tableau, une bannière, un simple mot, n'importe quoi). Et dès que le nom du modèle est inséré dans un article entre deux accolades comme ceci : {{Nomdumodèle}}, alors le wiki va aller chercher ce qu'il y a sur la page du modèle et le coller dans l'article.

Sur la page Modèle:CadreBoucle se trouve un code qui donne ça :

Vous avez été happé par la boucle, on espère que vous vous en remettrez...

Et pour insérer cette bannière sympathique, il suffit de mettre {{Bannière Boucle}} dans un article. Par exemple celui-ci.

Même chose pour insérer un smiley, nous avons créé un modèle pour chacun. Par exemple Modèle:noel donne lorsqu'on insère le code {{noel}}

Évidemment il faut respecter scrupuleusement le nom des modèles, sinon ça ne fonctionne pas. Si vous écrivez {{Noël}} voici le résultat : Modèle:Noël !

Tous les modèles

Paramètres d'un modèleModifier

Lorsqu'on code un modèle sur sa page, on peut inclure dedans des paramètres qui permet à celui qui insère le modèle dans un article de choisir la valeur de ces paramètres.

Un modèle avec des paramètres s'écrit comme ceci :>

{{NomDuModèle
|NomduParamètre1= valeur
|NomduParamètre2= valeur
}}

Par exemple le modèle {{Bannière Incomplet}} possède trois paramètres Commentaire1, Commentaire2, Commentaire3 qui correspondent à trois puces dans une liste à remplir.

Cet article est incomplet ! Il manque beaucoup d'informations cruciales sur le sujet qu'il aborde.
Un enrichissement dans ce sens serait très apprécié Voici les points à améliorer :

Préciser la date de création du forum
Rajouter quels forumeurs étaient actifs
Qui a créé le délire et quand ?

Le code est :

{{Bannière Incomplet
|Commentaire1= Préciser la date de création du forum
|Commentaire2= Rajouter quels forumeurs étaient actifs
|Commentaire3= Qui a créé le délire et quand ?
}}

Ainsi sur chaque article incomplet, on peut utiliser un même modèle et en même temps donner des indications différentes sur comment l'améliorer.

On peut utiliser les paramètres de bien d'autres manières, par exemple pour remplir un tableau, pour choisir des couleurs. Voici un autre exemple, c'est un modèle que l'on met sur les pages utilisateurs pour qu'ils renseignent leur profil JVC :

Me contacter

Profil JVC : Pseudo

Mes contributions | Mes stats

Son code d'insertion :

{{ContactUtilisateur
|LienJVC= https://www.jeuxvideo.com/profil/pseudo
|PseudoJVC= Pseudo
}}

Comment créer un modèleModifier

C'est une tâche difficile car il faut savoir coder un minimum en CSS, et connaître deux trois astuces que nous allons vous donner ici. Pour mieux comprendre il est conseillé de regarder le code de quelques modèles.

Nous allons vous montrer ce que nous utilisons sur JVFlux dans nos besoins quotidiens.

DivModifier

Une division permet de créer des encarts, des cadres et bannières. C'est très utilisé sur JVFlux.

Pour commencer il faut écrire la balise <div>, mais souvent il est nécessaire de préciser deux choses :

les propriétés de la div (couleur de la bordure et du fond notamment)
et les propriétés de ce que va contenir la div, que ce soit texte ou images (taille du texte, espacement des lignes par exemple).

Alors pour préciser cela, nous allons inclure des bouts de codes dans la balise <div> grâce au code style="boutdecode: valeur; boutdecode:valeur; boutdecode:valeur"

Cela nous donne :<div style="boutdecode: valeur; boutdecode:valeur; boutdecode:valeur">

Vous remarquez qu'on a "ouvert" la balise div et que le > la referme à la fin. Des guillemets ouvrent et ferment la liste de bouts de codes.

C'est presque fini figurez-vous, parce qu'ensuite il suffit d'écrire ce qu'on veut que contienne la div, et ensuite on la referme avec la balise </div>

Ce qui nous donne : <div style="boutdecode: valeur; boutdecode:valeur; boutdecode:valeur">contenu de la div</div>

TableModifier

Pour des choses un peu plus compliquées on peut faire un tableau avec la balise <table>

Même chose, on peut préciser avec style= : <table style="boutdecode: valeur; etc">

Après il faut indiquer ce qu'il y a dans les colonnes et les lignes. Pour cela on ouvre une ligne avec <tr> et ensuite on ouvre une cellule avec <td>

<table cellpadding="12" cellspacing="0" style="boutdecode: valeur; etc">
   <tr style="boutdecode: valeur; etc">
      <td style="boutdecode: valeur; etc> Contenu de la cellule </td>
      <td style="boutdecode: valeur; etc> Contenu de la cellule </td>
      <td style="boutdecode: valeur; etc> Contenu de la cellule </td>
   </tr>
</table>

Mais bon là ça devient compliqué, regardez par exemple à quoi ça ressemble ici : Exemple1

Bouts de codesModifier

Couleurs : En général il faut rentrer un code Hex après un hashtag. Mais il existe aussi des couleurs internes à wikimedia listées ici. Il suffit de rentrer le nom de la couleur à la place du #codehex comme GreenYellow ou bien SaddleBrown. Sachez que la couleur "transparent'" peut être utile pour du texte invisible.

Valeurs : La plupart du temps on peut préciser une valeur en pixel, en pourcentage, ou en em (une unité qui s'adapte en fonction de l'affichage, peut être utile).

Balises utiles : <span> permet d'insérer un texte ou un fichier en précisant un style pour cet élément (comme pour la div)

Bouts de codes utiles :

width: heigth: max-width: max-heigth: précise la largeur ou longueur de l'élément en pixel, ou en pourcentage.
border-color: #code Hex couleur de la bordure.
border: 1px solid la bordure sera de 1 pixel d'épaisseur. On peut mettre 0 pour qu'il n'y ait pas de bordure.
border-top/bottom/left/right: 1px solid permet de préciser que la bordure doit avoir une certaine épaisseur d'un seul côté
border-radius: 5px donne un côté arrondi aux coins d'une div
background-color: #code Hex la couleur du fond d'une div
background-image: [[Fichier: nom.jpg]] permet de mettre une image en fond d'une div ou bien background-image: linear-gradient(to bottom, #FFB092, #FFFFFF) permet de mettre un fond dégradé, on peut préciser l'orientation et les couleurs qu'il comporte.
text-align: center/left/right pour centrer le texte ou le ferrer à droite ou à gauche dans une div.
padding: 10px il s'agit de l'espacement entre les éléments, vous pouvez préciser la valeur pour l'espacement du haut/droite/bas/gauche (dans cet ordre) comme ceci : padding:10px 5px 1px 29px
font-size: 11px taille du texte
font-color: #code Hex couleur du texte

Paramètres du modèleModifier

Pour inclure dans le code du modèle un paramètre (on en a parlé plus haut) on utilise la triple accolade.

Par exemple le code {{{Donnée1}}} dans un modèle permet de remplacer ce code par la valeur précisée dans le champs Donnée1. Ce qui donne :
{{Modèle |Donnée1= n'importe quoi }}

Autre exemple avec un modèle nommé {{ViveLaHaine}} contenant Je déteste les {{{TypeDePersonne}}} ils sont stupides.

On peut écrire

{{ViveLaHaine
|TypeDePersonne=golems
}}

Et le résultat sera Je déteste les golems ils sont stupides.

Quelques modèles utilisant des paramètres, jettez un oeil pour comprendre :

ConditionnellesModifier

Dans le code du modèle, on peut rajouter à un ou plusieurs paramètres une conditionnelle. Grâce à elle le paramètre ne sera pas visible lors de l'insertion, sauf si il est demandé.

On utilise l'expression if pour cela. Si le paramètre est demandé, alors il doit afficher ce qui apparaît après la barre verticale. L'expression s'écrit entre deux accolades.

Reprenons l'exemple plus haut avec un modèle appelé ViveLAmour : J'adore les kheys !{{#if: {{{TypeDePersonne}}} | Par contre je déteste les {{{TypeDePersonne}}}, ils sont stupides.}}

Lors de l'insertion on a deux options :

Écrire uniquement {{ViveLAmour}} Résultat : J'adore les kheys !
Écrire avec le paramètre :{{ViveLAmour|chouffins}} Résultat : J'adore les kheys ! Par contre je déteste les chouffins, ils sont stupides.

C'est un exemple simple, mais avec la conditionnelle on peut rendre optionnels des pans entiers d'un modèle.

Modèles avec des conditionnelles :