Modélisation et codage
Cette page s'adresse aux utilisateur·rices qui souhaitent connaître les codes nécessaires pour éditer le contenu via l'éditeur Wikicode.
Généralités
Les bases de Semantic - Mediawiki
Pour connaître les codes de mise en forme, voir :
Pour tester : Manual:CSS
"Si activé sur votre wiki, les utilisateur·rices individuel·les peuvent créer des feuilles de style personnalisées juste pour eux-mêmes à Special:MyPage/<skin_name>.css (par exemple Special:MyPage/vector.css s'il·elles utilisent l'habillage vectoriel). Special:MyPage/common.css permet la création de feuilles de style personnelles pour tous les skins."
Ancres
Attention! Si le nom de la page ou de la section change, le lien ne sera plus fonctionnel.
Dans la même page
[[#Titre de la section|Texte à afficher]]
Sur une autre page interne
[[Titre page#Titre de la section|Texte à afficher]]
Attributs / Propriétés
Types possibles :
- Cette propriété est de type [[A le type::Boolean]].
- Cette propriété est de type [[A le type::Code]].
- Cette propriété est de type [[A le type::Date]].
- Cette propriété est de type [[A le type::Enumeration]].
- Cette propriété est de type [[A le type::Number]].
- Cette propriété est de type [[A le type::Page]].
- Cette propriété est de type [[A le type::Texte]].
- Cette propriété est de type [[A le type::URL]].
Bandeau d'attribution d'auteur·rice
Pour trouver les modèles de bandeau disponibles, rechercher le mot « bandeau » dans la barre de recherche puis restreindre les résultats affichés en sélectionnant "Modèle".
Pour la révision d'une page du Guide de gestion globale :
- S'inspirer du modèle suivant : Modèle:Bandeau Source du contenu Fertilisation 2022;
- Copier le code de ce modèle;
- Créer une nouvelle page avec le titre "Bandeau Source du contenu [Nom du thème]";
- Coller le code;
- Modifier le code en fonction des auteur·rices de la révision.
Pour une page issue de la mise en ligne d'un ouvrage existant :
- S'inspirer du modèle suivant : Modèle:Bandeau Source du contenu Guide essais variétaux;
- Voir les étapes plus haut.
Pour une nouvelle page issue du travail d'une ou plusieurs personnes :
- S'inspirer d'un des modèles suivants :
- Voir les étapes plus haut.
Bannière d'entête
Image
- Dimensions : 1920px X 250px.
- Au besoin, diminuer la luminosité de l'image afin que le titre en blanc soit facilement lisible.
- Suggestion d'application de traitement d'image : Canva.
Titre
- Pour afficher un autre titre si aucun n'apparaît, coller ce bout de code en haut de page et l'adapter: <div class="titreBandeau fluid">[Titre]</div>
Bas de page
Boutons
<span class="btn border border-success">{{#formlink:form=Suggestion|link text=Ajouter une suggestion|link type=link}}</span>
{{#formlink:form=Suggestion|link text=Ajouter une suggestion|link type=post button}}
Cartes
- Pour changer l'affichage : Dans #display_map, modifier l'ordre des layers=
Citations
1. <blockquote> -> générique, vanille, pour les citations. CSS générique ou contextuel (div blockquote)
2. <blockquote class="NomDuneClassePourWM"> OU <div class="NomDuneClassePourWM"><blockquote /> ---> on veut une certaine mise en page standard du blockquote qui sera modifiable génériquement par la feuille de style. FORTEMENT SUGGÉRÉ - plus facile à faire des changements sur l'ensemble des pages. Ne pas hésiter à créer ce genre de classe (mais sans exagérer)
3. <blockquote class="codeBootstrap (comme my-2 px-3, etc)" -> ici on utilise des classes pour altérer localement le blockquote, qu'il se présente différemment à cet endroit précisément. DONC altération locale -> ne pas abuser. Si c'est d'un usage fréquent, transformer en classe CSS. Par exemple :
Modèle actuel
(avec fond beige et police cursive)
...(TEXTE)...
<blockquote class="citationF my-2 px-3"> ...(TEXTE)... <p class="blockquote-footer">Auteur·e, titre, organisation (Année)</p> </blockquote>
Vieux modèle
« ...(TEXTE)... »
<blockquote class="bg-light my-2 px-3"> « ...(TEXTE)... » <p class="blockquote-footer">Auteur·e, titre, organisation (Année)</p> </blockquote>
Code
Masquage
Pour laisser une note/un commentaire dans une page de code sans qu'elle n'apparaisse dans la page en mode lecture, utilisez ce code :
<!-- [Note] -->
Colonnes
<div class="row justify-content-start"> <div class="col"> </div> </div>
Commentaires
Pour cacher la zone de commentaires en bas de page, insérez ce code :
<no-comment-streams />
Édition de section
Cacher
Pour que les liens " [Modifier | Modifier le wikicode] " ne s'affichent pas après chaque titre, coder :
__NOEDITSECTION__
Encadré
Titre de l'encadré
Texte de l'encadré
<div class="my-5 p-4 afficheImage shadow"> <big>'''Titre de l'encadré'''</big> Texte de l'encadré </div>
Exportation d'un chiffrier
Figures / Images
Modèles de base
Procédure d'importation :
- Réduire la taille du fichier image à max 450 Ko à l'aide d'un logiciel tiers;
- Renommer le fichier de l'image avec un nom significatif et unique (max 5-6 mots);
- Copier le nom du fichier avec son extension (ex.: .jpg);
- Dans le wikicode de la page, inscrire à l’endroit souhaité le code du modèle Image désiré (voir plus bas);
- Coller le nom du fichier au bon endroit; Inscrire les légendes de l'image au besoin);
- Enregistrer;
- Importer les images par glisser-déposer via la fenêtre d’importation qui apparaît à l’endroit des photos dans la page;
- Recharger la page une fois que le % d'importation ait dépassé 90%;
- Attribuer les propriétés à l'image (ex. : personne, organisation, opération, etc.) en ouvrant la page du fichier image et apporter les modification (si le fichier n’a pas de champs de propriétés, inscrire {{Photo}} dans le wikicode de la page du fichier).
{{ImageUne
| Fichier:
|'''Figure X.''' Légende de l'image
}}
{{ImageDeux
| Fichier:NomImage1.jpeg
| a) Légende image 1
| Fichier:NomImage2.jpeg
| b) Légende image 2
|'''Figure X.''' Légende du bloc d'images</br>
<small>Tiré de : [Auteur (année)]</small>
}}
a) Charbon du maïs
b) Vesce commune
Tiré de : Auteur (année)
Modèles avancés
Image non cliquable
- Code : [[Fichier:Nom_image.png|lien=]]
Fil d'Ariane
- Code : <div class="fil-ariane"> </div>
- Utilisez " > " pour séparer les pages;
- Ne pas intégrer le lien de la page active.
Formulaire
Boîte de texte
{{{standard input|free text|rows=10|autogrow}}}
Hyperliens
- Externe
[URL Titre]
- Interne
[[Nom de la page|Texte]]
Infobulle
{{#info: Texte de l'infobulle}}
Listes
Formats possibles de listes (ex.: par catégorie, arbre, ligne du temps)
Listes à puces
Avec points
* Texte 1 * Texte 2
- Texte 1
- Texte 2
Numérotée
# Texte 1 # Texte 2
- Texte 1
- Texte 2
Pour forcer la numérotation à un chiffre précis, utiliser :
<ol> <li value="Chiffre"> Texte </li> </ol>
- Exemple avec le chiffre 4
Alphabétique
<ol style="list-style-type:lower-alpha"> <li>Texte 1</li> <li>Texte 2</li> </ol>
- Texte 1
- Texte 2
Modèles et formulaires
- Créer le modèle
- Code qui détermine l'affichage du titre de la page : {{DISPLAYTITLE:{{{Propriété ayant le titre souhaité|}}} }}
- Code pour l'attribution(?) des propriétés :
<!-- INSTANCIATION -->
{{#set:
| Nom propriété 1={{{Nom propriété 1|}}}
| ...
}}
Pour que le formulaire s'ouvre lorsqu'on souhaite modifier une page
- Dans le modèle de la page
- Inscrire le code : <includeonly>[[Catégorie:Nom du modèle]]</includeonly>
- Créer le formulaire en choisissant le modèle qui s'y rapporte
- Créer la page de catégorie pour le modèle :
- Définir les attributs du modèle
- Ouvrir une page avec des données complètes; Cliquer sur l'icône "Outils" en bas à gauche et sélectionner "Parcourir les propriétés"; Cliquer sur chacune des propriétés (colonne de gauche) et insérer dans leur page le code Cette propriété est de type [[A le type::Texte]], les types pouvant être Texte, Date, URL, Page.
- Si des données sont déjà existantes, les importer via un fichier csv créé via LibreOffice
- Colonnes: Titre; Nom du modèle[Nom de propriété 1]; Nom du modèle[Nom de propriété 2]; etc. (voir Aide);
- Enregistrer en CSV : Cocher "éditer les paramètres du filtre"; Sélectionner UTF-8 ou UTF-16; Cochez les cases 1 et 3 sur les 4; Laissez Champ = " , " et Caractère = " " " ;
- Importer le Fichier CSV;
- Note : Cela peut prendre quelques heures, voire quelques jours, pour que l'importation soit complétée.
Pages d'aide
https://www.mediawiki.org/wiki/Help:Extension:ParserFunctions
https://www.mediawiki.org/wiki/Extension:Page_Forms https://www.mediawiki.org/wiki/Extension:Page_Forms/Defining_forms https://www.mediawiki.org/wiki/Extension:Page_Forms/Input_types
Mots-clés
Pour ajouter un mot du texte à la liste des mots-clés du bas de la page, ajouter le modèle C autour dudit mot :
{{C|leditmot}}
Mots magiques
https://www.mediawiki.org/wiki/Help:Magic_words
Pages
Création de page
Méthode 1 : Barre de recherche
Taper le nom de la page dans la boîte de recherche ; si elle n'existe pas, cliquer sur "Créer la page « [Nom de la page] » sur ce wiki !"
Méthode 2 : URL directe
Saisir l'URL du wiki suivie de /Nom_de_la_page, puis cliquer sur "créer cette page" si elle est absente.
Ex.: https://wikimaraicher.ca/wiki/Nom_de_la_page
Renommage et suppression de page
Si aucune redirection n'est laissée, s'assurer qu'aucune page n'est liée. Corriger au besoin le code dans les pages qui pointent vers l'ancienne page, avant la suppression idéalement. Pour connaître les pages liées à une page, faire une recherche via Spécial:Pages liées.
Paragraphe de début
Utiliser les balises suivantes pour mettre de l'avant le premier paragraphe d'une page lorsqu'il n'est pas précédé d'un titre :
<p class="lead"> ...(TEXTE)... </p>
Requêtes
https://www.semantic-mediawiki.org/wiki/Help:Semantic_search
https://www.semantic-mediawiki.org/wiki/Help:Selecting_pages
Saisie de valeur
Voici les options d'affichage (input type=) pour saisir une ou des valeurs :
- checkboxes (cases à cocher, choix multiples)
- combobox (ligne de texte + flèche pour menu déroulant)
- dropdown (menu déroulant)
- listbox (fenêtre avec curseur)
- radio (choix unique)
- text (texte sur une ligne; largeur ajustable via size=)
- textarea (boîte de texte; hauteur ajustable via height=)
- tokens (jeton supprimable)
- tree (arborescence)
Exemple de code pour créer un menu déroulant qui permet d'affecter une propriété ("Sous-type de" dans ce cas-ci) à une page (d'équipement):
{{{field|Sous-type de|property=Sous-type de|values from category=Type d'équipement|list|delimiter=;|input type=dropdown|class=form-control|}}}
Table des matières (TDM)
Afficher à un endroit précis
__TOC__
Cacher
__NOTOC__
Création d'une TDM pour un guide
- Créez une nouvelle page TDM dont le titre est : https://wikimaraicher.ca/wiki/TDM-Nom_du_guide.
- Accédez à une autre page TDM (ex.: TDM-Guide pollinisation), copiez le code (sauf {{Item TDM}} ), collez ce code dans la nouvelle page TDM et cliquez sur le bouton "Enregister".
- Cliquez sur le bouton "Crayon" pour modifier la page en édition visuelle; Un bouton "Ajouter" apparaîtra. Cliquez dessus pour afficher le formulaire de TDM.
- Remplissez le formulaire de TDM avec les titres de pages souhaitées pour ce guide.
- Enregistrez.
- Créez les pages en cliquant sur l'icône d'ouverture d'une page (petit carré vert avec une flèche).
- Copiez le code de base d'une page similaire.
- Créez les modèles d'affichage pour ce guide :
- Affichage TDM et TDM compacte :
- Créez une nouvelle page dont le titre est : https://wikimaraicher.ca/wiki/Modèle:Affichage_Page_Nom_du_guide; Y recopier le code d'une page de modèle d'affichage de TDM similaire.
- Créez une nouvelle page dont le titre est : https://wikimaraicher.ca/wiki/Modèle:Affichage_TDM_Nom_du_guide_Compacte; Y recopier le code d'une page de modèle d'affichage de TDM compacte similaire.
- Modèles de navigation Haut et Bas :
- Créez les 4 modèles de "NavigationHaut", "NavigationBas", "Affichage NavigationHaut", "Affichage NavigationBas" attitrés au guide en recopiant et adaptant le code de pages similaires.
- Modèle de bandeau de source de contenu :
- Créez le modèle en recopiant et adaptant le code de pages similaires.
- Affichage TDM et TDM compacte :
- Adaptez le code des nouvelles pages en fonction du contenu spécifique au nouveau guide (ex.: nom des modèles d'affichage).
Tableaux
- Voir la page d'aide sur Wikipédia pour en savoir plus;
- Marge et remplissage (margin and padding).
Modèle actuel
Tableau x. Titre
| Titre colonne 1 | Titre colonne 2 | |
|---|---|---|
| Valeur colonne 1 ligne 1 | Valeur colonne 2 ligne 1 | Valeur colonne 3 ligne 1 |
| Valeur colonne 1 ligne 2 | Valeur colonne 2 ligne 2 | Valeur colonne 3 ligne 2 |
Notes
a Texte Source : Texte
<div class="p-2">
'''Tableau x.''' Titre
{| class="table table-bordered table-responsive table-sm"
! Titre colonne 1
! colspan="2"| Titre colonne 2
|-
| Valeur colonne 1 ligne 1
| Valeur colonne 2 ligne 1
| Valeur colonne 3 ligne 1
|-
| Valeur colonne 1 ligne 2
| Valeur colonne 2 ligne 2
| Valeur colonne 3 ligne 2
|}
<div class="notes"><small>
'''Notes'''<br>
<p style="line-height:1.1rem;">
<sup>a</sup> Texte
'''Source : '''Texte
</p>
</small>
</div>
</div>
Titre et classes du modèle
<div class="shadow px-2 mb-2 pb-2">
'''Tableau x.''' Titre tableau
{| class="table table-bordered table-responsive table-sm"
- px, mb, etc. : Code pour les marges et le remplissage (autour du tableau vs autour du texte)
- table-responsive : Code pour les tableaux réactifs
- table-sm : Code pour rendre plus compact le tableau en diminuant de moitié le remplissage
Alignement du texte
| style="text-align:center/left/right"| Texte de la cellule
Fusion de cellules
Lignes
| colspan="Nombre de cellules d'une ligne à fusionner"|Titre de la cellule ! colspan=""| | colspan=""|
Colonnes
| rowspan="Nombre de cellules d'une même colonne à fusionner"|Titre de la cellule ! rowspan=""| | rowspan=""|
Lignes
Data table
Texte
Couleur
Texte rouge
<p style="color:red">Texte</p>
Interligne
Texte interligne 1.1
Texte interligne 1.1
<p style="line-height:1.1rem;">Texte interligne 1.1<br>Texte interligne 1.1</p>
Texte interligne 1.9
Texte interligne 1.9
<p style="line-height:1.9rem;">Texte interligne 1.9<br>Texte interligne 1.9</p>
Justification
À droite : <div style="text-align: right;">Texte à droite</div> Au centre : <div style="text-align: center;">Texte au centre</div> À gauche : <div style="text-align: left;">Texte à gauche</div>
Saut de ligne
Balise html :
<br>
Sinon en wiki code, laisser une ligne vide pour paragraphe (texte ou autre).
Titre de page
Pour forcer l'affichage d'un titre de page différent du nom de la page, utiliser le code suivant :
{{DISPLAYTITLE:Titre}}
{{DISPLAYTITLE:{{{Nom de la propriété|}}} }}
Pour masquer un titre de page :
{{DISPLAYTITLE:<span style="position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);">{{FULLPAGENAME}}
Titres et hiérarchie
= H1 : Titre de la page (Mod./Chap./Sect.)= == H2 : Titre de section (Sous-section) == === H3 : Sous-titre 1 (Sous-sous-section) === ==== H4 : Sous-titre 2 (Sous-sous-sous-section) ====
du maraîchage biologique diversifié
<no-comment-streams />
