Centre des communautés
Centre des communautés


Lorsque vous écrivez du code pour votre wiki, comme des styles CSS, des améliorations de fonctionnalité ou des outils entièrement nouveaux avec JavaScript, ou encore des modèles avancés avec Lua, il se peut que vous souhaitiez partager votre travail avec l'ensemble de la communauté Fandom et permettre à d'autres wikis de bénéficier de votre code.

Dans le passé, les wikis copiaient le code des uns et des autres. Aujourd'hui, il existe une bien meilleure option : contribuer au Dev Wiki.

La page principale du Dev Wiki est disponible sur dev

Le Dev Wiki n'est pas un wiki classique où seuls les administrateurs peuvent modifier les pages de code. Ici, chaque utilisateur enregistré peut contribuer à son propre code, qui peut ensuite être utilisé par les wikis et les utilisateurs à travers Fandom sans qu'il soit nécessaire de le copier manuellement. Au lieu de cela, les importations sont utilisées pour charger le code à partir du Dev Wiki, garantissant que tout le monde a toujours accès à la version la plus récente.

Pour que votre code soit publié sur le Dev Wiki afin que tout le monde puisse l'utiliser, vous devez donner à votre projet un nom facile à reconnaître et à mémoriser. Quelques bons exemples peuvent être DiscordIntegrator - un script qui vous permet d'intégrer des widgets Discord dans un wiki, ou AntiBigText - un style qui réduit la taille des polices de caractères sur les pages. Un bon nom aidera les autres utilisateurs à trouver votre code lorsqu'ils recherchent une solution spécifique.

En-tête et quelques premières lignes de code pour « MediaWiki:AntiBigText

Après avoir choisi un nom pour votre page JavaScript, CSS, ou Lua, il est temps de publier votre code sur le Dev Wiki. Puisque le Dev Wiki permets à tout le monde de modifier les pages de code, vous pouvez tout simplement créer votre page dans l'espace de noms MediaWiki (par exemple : MediaWiki:<VotreNomDeProjet>.css, MediaWiki:<VotreNomDeProjet>.js ou Module:VotreNomDeProjet>. Lorsque vous écrivez du code qui sera ensuite publié sur le Dev Wiki, vous devriez jeter un coup d'oeil aux standards de programmation!

Boîte « Custom JavaScript status » dans le rail droit des pages JS montrant le statut de l'examen du code - tout vert et approuvé !

Les pages JavaScript sur le Dev Wiki sont soumises à un processus d'examen par l'équipe Trust & Safety afin de garantir leur sécurité avant qu'elles ne puissent être utilisées. Contrairement à la copie manuelle de code, où chaque wiki nécessite des révisions séparées, avec le Dev Wiki, la révision couvre le code pour un usage universel.

Une fois votre code publié et soumis à examen, il est temps de rédiger une page de documentation pour votre projet. Selon la nature de votre projet, il peut s'agir de descriptions techniques détaillées pour les bibliothèques JavaScript, de guides d'utilisation conviviaux ou d'un mélange des deux.

Page de documentation pour le script « CustomizeAce » disponible à l'adresse suivante : dev

Il est toujours bon de regarder comment les pages d'autres projets sont structurées et construites et de s'en inspirer pour les vôtres. Les utiliser comme référence permet d'éviter les erreurs. Le projet WHAM est un bon exemple à suivre.

Le wikitexte de la page de documentation du projet WHAM

La page WHAM démontre l'inclusion de paramètres pour d'autres pages. Cela fait partie du processus d'internationalisation, un effort pour rendre les projets de code eux-mêmes et leurs pages de documentation respectives accessibles et faciles à utiliser pour les utilisateurs parlant différentes langues à travers le monde. Le Dev Wiki décrit ce processus sur sa page d'internationalisation.

Lorsque vous internationalisez votre code, veillez à ce que le texte soit traduisible dans votre JavaScript. Par exemple, si vous ajoutez une nouvelle option à la liste déroulante « Modifier » sur les pages, considérez l'exemple suivant :

(function() {
    'use strict';

    var editDropdown = $('.page-header__actions .wds-list');
    var pageAuthorsLink = $('<li>').append(
    	$('<a>', {
            id: 'ca-credits',
            href: mw.util.getUrl( mw.config.get( 'wgPageName' ), { action: 'credits' } ),
            text: 'Page authors'
        })
    );

    editDropdown.append( pageAuthorsLink );
})();

Vous pouvez utiliser la bibliothèque I18n-js du Dev Wiki pour rendre votre script facilement et rapidement traduisible :

(function() {
    'use strict';

    function main( i18n ) {
        var editDropdown = $('.page-header__actions .wds-list');
        var pageAuthorsLink = $('<li>').append(
            $('<a>', {
                id: 'ca-credits',
                href: mw.util.getUrl( mw.config.get( 'wgPageName' ), { action: 'credits' } ),
                text: i18n.msg( 'editDropdownLabel' ).plain()
            })
        );

        editDropdown.append( pageAuthorsLink );
    }

    importArticle( {
        type: 'script',
        article: 'u:dev:MediaWiki:I18n-js/code.js'
    } );

    mw.hook( 'dev.i18n' ).add( function( i18nlib ) {
        i18nlib.loadMessages( 'pageAuthorsLink' ).then( main );
    } );
})();

Voyons voir ce qui a changé ici :

  • Le code principal n'est pas situé dans une fonction main avec le paramètre i18n, ce qui en fait une liaison entre votre code et la librairie i18n-js.
  • Après la fin du code main, il y a un appel à importArticle() qui charge le code de I18n-js. Ne vous inquiétez pas! Même si la librairie i18n-js est déjà chargée, ça ne brisera rien.
  • Ensuite, une accroche spéciale est utilisée pour attendre que tous les éléments de I18n-js soient prêts à être utilisés.
  • Lorsque le code est executé, une fonction charge le texte à partir du Dev Wiki et lance votre fonction main.

Cela veut donc dire que le texte de votre code sera stocké séparément du code lui-même sur le Dev Wiki dans une page suivant ce format de nom : https://dev.fandom.com/wiki/MediaWiki:Custom-<NomDeCode>/i18n.json, donc dans cette situation - https://dev.fandom.com/wiki/MediaWiki:Custom-pageAuthorsLink/i18n.json, puisque 'pageAuthorsLink' est ce que nous demandons à la fonction loadMessages() de charger.


Vous pouvez consulter l'article original ici (en anglais).

Vous souhaitez être informé(e) sur les billets postés en rapport avec l'actualité Fandom et ses nouvelles fonctionnalités ?
Cliquez ici pour suivre les blogs du Staff.
Nous expérimentons ! Apprenez-en plus sur les types d'événements et autres choses que nous avons fait jusqu'à présent ou que nous prévoyons de faire !


Vous souhaitez un accès à temps réel à vos camarades éditeurs et au staff ?
Rejoignez notre serveur Discord officiel pour les utilisateurs enregistrés !