Wenn du Code für dein Wiki schreibst, wie z.B. CSS-Stile, Funktionsverbesserungen oder völlig neue Werkzeuge mit JavaScript, oder fortgeschrittene Vorlagen mit Lua, kommst du vielleicht an einen Punkt, an dem du deine Arbeit mit der breiteren Fandom-Community teilen und anderen Wikis erlauben möchtest, von deinem Code zu profitieren.

In der Vergangenheit haben Wikis den Code voneinander kopiert und ihn in ihre eigenen Anwendungen übernommen. Jetzt gibt es eine viel bessere Möglichkeit: Du kannst deine Arbeit dem Dev Wiki zur Verfügung stellen.

Dev Wiki ist kein typisches Wiki, in dem nur Administratoren Codeseiten bearbeiten können. Hier kann jeder angemeldete Benutzer seinen eigenen Code beisteuern, der dann von Wikis und Benutzern in ganz Fandom genutzt werden kann, ohne dass er manuell kopiert werden muss. Stattdessen werden Importe verwendet, um den Code aus Dev Wiki zu laden, wodurch sichergestellt wird, dass jeder immer Zugriff auf die aktuellste Version hat.

Damit dein Code auf dem Dev Wiki veröffentlicht und von allen genutzt werden kann, solltest du deinem Projekt einen Namen geben, der leicht zu erkennen und daran zu denken ist. Einige gute Beispiele wären DiscordIntegrator - ein Skript, mit dem Sie Discord-Widgets in ein Wiki integrieren können, oder AntiBigText - ein Stil, der die Schriftgröße auf Seiten reduziert. Ein guter Name wird anderen Benutzern helfen, deinen Code zu finden, wenn sie nach einer bestimmten Lösung suchen.

Nachdem du einen Namen für deine JavaScript-, CSS- oder Lua-Modulseite gewählt hast, ist es an der Zeit, deinen Code auf dem Dev Wiki zu veröffentlichen. Da das Dev Wiki jedem erlaubt, Codeseiten zu bearbeiten, kannst du dein Projekt einfach unter Namen wie MediaWiki:<NamesDeinesProjektes>.css, MediaWiki:<NamesDeinesProjektes>.js oder Module:NamesDeinesProjektes> veröffentlichen. Wenn du Code schreibst, der auf dem Dev Wiki veröffentlicht werden soll, könntest du auch die Kodierungskonventionen nützlich finden!

JavaScript Seiten auf dem Dev Wiki durchlaufen einen Überprüfungsprozess durch das Trust & Safety Team, um die Sicherheit zu gewährleisten, bevor sie verwendet werden können. Im Gegensatz zum manuellen Kopieren von Code, bei dem jedes Wiki eine separate Überprüfung benötigt, deckt die Überprüfung vom Dev Wiki den Code für den universellen Gebrauch ab.

Sobald dein Code veröffentlicht und zur Überprüfung eingereicht wurde, ist es an der Zeit, eine Dokumentationsseite für dein Projekt zu schreiben. Je nach Art deines Projekts kann diese von detaillierten technischen Beschreibungen für JavaScript-Bibliotheken bis hin zu benutzerfreundlichen Anleitungen oder einer Mischung aus beidem reichen.

Es ist immer gut, einen Blick darauf zu werfen, wie andere Projektseiten strukturiert und aufgebaut sind, und dies für die eigene Seite zu nutzen. Sie als Referenz zu verwenden, kann Fehler vermeiden. Eine WHAM-Projektseite ist ein gutes Beispiel dafür.

Die WHAM-Seite demonstriert die Einbeziehung von Parametern für andere Seiten. Dies ist Teil des Internationalisierungsprozesses, der darauf abzielt, sowohl die Code-Projekte selbst als auch ihre jeweiligen Dokumentationsseiten für Benutzer, die verschiedene Sprachen auf der ganzen Welt sprechen, zugänglich und einfach zu benutzen zu machen. Das Dev Wiki beschreibt diesen Prozess auf seiner Internationalisierungs-Seite.

Bei der Internationalisierung deines Codes solltest du dich darauf konzentrieren, den Text in deinem JavaScript übersetzbar zu machen. Wenn du zum Beispiel eine neue Option zum „Bearbeiten“-Dropdown auf Seiten hinzufügst, kannst du das folgende Beispiel verwenden:

(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: 'Seitenautoren'
        })
    );

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

Du kannst die I18n-js Bibliothek vom Dev Wiki verwenden, um dein Skript einfach und schnell übersetzbar zu machen:

(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 );
    } );
})();

Schauen wir uns kurz an, was sich hier geändert hat:

1. Der Hauptcode befindet sich nicht innerhalb einer Funktion main mit i18n-Parameter, die eine Brücke zwischen deinem Code und der i18n-js-Bibliothek darstellt
2. Nach dem Ende des main-Codes gibt es eine importArticle()-Anweisung, die den I18n-js-Code lädt. Keine Sorge! Wenn bereits i18n-js geladen ist, wird es nichts kaputt machen.
3. Dann wird ein spezieller Hook verwendet, um zu warten, bis alle I18n-js-Elemente einsatzbereit sind.
4. Nach der Ausführung des Hooks wird eine Funktion ausgeführt, die Text aus dem Dev-Wiki lädt und deine main-Funktion startet.

Das bedeutet, dass Textteile deines Codes auf dem Dev Wiki getrennt vom programmatischen Code in einer Seite gespeichert werden, die diesem Namensschema folgt: https://dev.fandom.com/wiki/MediaWiki:Custom-<CodeName>/i18n.json, also in diesem Fall - https://dev.fandom.com/wiki/MediaWiki:Custom-pageAuthorsLink/i18n.json, da 'pageAuthorsLink' das ist, was wir die Funktion loadMessages() laden lassen.

Werde ein Pro: Technische Fragen

Vorstellung von DynamicPageLists auf Fandom

Vorstellung von Lua auf Fandom

Zum Dev-Wiki beitragen

Richtlinien für die Verwendung von Bots auf Fandom

Lerne die Basics Unternimm deine nächsten Schritte
Werde ein Community-Mentor