Hilfe:Einbinden von zusätzlichem CSS und JS/technisch

Das Einbinden von zusätzlichem CSS und JS geschieht mit dem JavaScript-Befehl importArticles(), einer Methode zum gebündelten Laden von Artikeln, die Skripte oder Styles enthalten.

Die Funktionsweise ist ähnlich wie bei den bestehenden Verfahren importScriptPage und importStylesheetPage. Allerdings kann importScriptPage Artikel aus anderen Wikis und mehrere Artikel auf einmal importieren. Dies reduziert sowohl die Dateigröße als auch den Traffic, was die Ladegeschwindigkeit deines Wikis erhöht.

Benutzung

importArticles() braucht eine Modul-Definition, um zu wissen, was es laden soll. Module sind im Wesentlichen JS-Objekte mit einem Schlüssel/Werte-Objekt. Die folgenden Eigenschaften werden in jedem Modul benötigt:

• type – Damit legst du fest, welche Art von Artikel dieses Modul enthält. Unterstützte Typen sind:
  • script – Ein Artikel, der JS enthält (zum Beispiel "MediaWiki:Common.js").
  • style – Ein Artikel, der CSS enthält (zum Beispiel "MediaWiki:Fandomdesktop.css").
• articles – Den Artikel, den du importieren willst. Siehe hier.

Es können beliebig viele Artikel geladen werden, aber sie müssen alle von der selben Art sein.

Cache

Wenn du Artikel mit importArticles() (und den fortgeschrittenen Techniken weiter unten) importierst, dann sehen alle Besucher deines Wikis nach maximal 10 Minuten diese Änderungen.

Finden von Artikeln

Es wird einfacher Syntax verwendet, um Artikel zu finden, die du versuchst zu importieren. Es ist vergleichbar mit Interwiki-Links:

(Prefix:<WikiName>:)<Article>

Alles in den Klammern oben ist optional und alles in den eckigen Klammern bezeichnet den Artikel, den du importierst. Der Doppelpunkt sorgt dafür, dass alle für die Syntaxanalyse in verschiedenen Segmenten ist. Präfixe sagen uns, wie der Artikel zu finden ist und werden in der Regel von einem Wikia-Namen gefolgt, wenn es sich nicht um einen lokalen Artikel handelt.

Lokale Artikel

Artikel, die lokal auf deinem Wiki sind, können mit dem Titel auf die selbe Art und Weise gefunden werden, wie sonst auch. Es wird kein Präfix oder Wiki-Name benötigt, aber der Einfachheit halber gibt es einen lokalen Präfix ("l"). Wenn du zum Beispiel MediaWiki:Common.js importieren möchtest, dann funktioniert folgendes:

MediaWiki:Common.js
l:MediaWiki:Common.js
local:MediaWiki:Common.js

Externe Artikel

Artikel von externen Wikis können auf dem selben Weg, wie sonst auch, importiert werden. Anders als lokale Artikel benötigen externe Artikel einen Präfix und den Wiki-Name, um den Artikel aus dem richtigen Wiki zu importieren. FANDOM unterstützt das Finden mit dem Nutzen des Database-Namens, was normalerweise der englische Name für das Wiki ist, der über die URL herausgefunden wird. Um Artikel aus anderen Wikias zu importieren brauchst du einen externen Präfix ("remote" oder "w") und bei URL-Einbindungen wird der URL-Präfix (kurz "u") benötigt. Wenn du als Beispiel die CSS-Datei MediaWiki:Highlight.css aus dem Dev Wiki importieren willst, dann funktioniert folgender Code:

w:dev:MediaWiki:Highlight.css
remote:dev:MediaWiki:Highlight.css
external:dev:MediaWiki:Highlight.css
u:dev:MediaWiki:Highlight.css
url:dev:MediaWiki:Highlight.css
u:dev.fandom.com:MediaWiki:Highlight.css
url:dev.fandom.com:MediaWiki:Highlight.css

Der Syntax funktioniert auch für Wikis in anderen Sprachen. Wenn du zum Beispiel MediaWiki:Common.js aus der italienischen Version vom One Piece Wiki importieren willst, dann musst du diesen Code verwenden:

u:it.onepiece:MediaWiki:Common.js
url:it.onepiece:MediaWiki:Common.js
url:it.onepiece.fandom.com:MediaWiki:Common.js

Es ist meistens einfacher externe Artikel über die URL zu importieren.

Fortgeschrittene Benutzung

Die importArticles()-Methode erledigt diese notwendigen Aufgaben:

1. Erzeugung einer korrekt formatierten URL für den Einsatz des ResourceLoaders,
2. Überprüft die Gültigkeit der Module, um sicherzustellen, dass sie richtig formatiert sind und
3. Stellt Feedback für den Benutzer da, wenn er einen Fehler macht.

Jedoch ist das Prozedere nicht unbedingt erforderlich, um die Vorteile des Imports mehrerer Codeseiten in einem Rutsch zu erhalten. Wenn du möchtest, dann kannst du die URL manuell generieren und sie mit @import direkt in einer CSS-Seite zu laden oder mit jQuery.getScript im JS. Der Vorteil liegt darin, dass dann CSS-Importe auch bei deaktiviertem Javascript funktionieren werden.

Du kannst mehrere Parameter in die URL einbinden. Die folgenden sind die nützlichsten:

Parameter	Parameter-Beschreibung
mode	Dieser Befehl sagt dem ResourceLoader, dass wir Artikel importieren möchten. Es sollte auf "articles" eingestellt werden.
articles	Die Liste der Artikel. Wenn du mehrere Artikel importierst, dann sollten diese durch "|" getrennt werden.
only	Der Typ des Artikels, der importiert wird. Das sollte auf "scripts" oder "styles" eingestellt sein.
debug	Dieser Parameter ist nicht notwendig, kann aber auf "true" gesetzt werden, um die Verkleinerung des Codes zu deaktivieren und Fehler in importierten Codeseiten einfacher zu finden. Dies sollte nur vorübergehend benutzt werden, da sich hierbei die Ladezeiten erhöhen.

Am Ende sollte die URL ungefähr so aussehen:

/load.php?mode=articles&articles=One.css|Two.css&only=styles

Was in Verbindung mit @import benutzt werden kann, so wie da:

@import url("/load.php?mode=articles&articles=One.css|Two.css&only=styles");

Beispiele

Importieren mehrere Skripte. Eins aus dem lokalen Wiki und eins aus einem externen Wiki:

importArticles({
    type: "script",
    articles: [
        "MediaWiki:MyCustomJavaScript.js",
        "external:dev:MediaWiki:External_include.js"
    ]
});

Importieren mehrerer Style-Artikel. Eins aus dem lokalen Wiki und eins aus einem externen Wiki:

importArticles({
    type: "style",
    articles: [
        "MediaWiki:Common.css",
        "external:starwars:MediaWiki:External_include.css"
    ]
});

Importieren mehrere Module in einem Aufruf:

importArticles({
    type: "script",
    articles: [
        "MediaWiki:MyCustomJavaScript.js",
        "external:dev:MediaWiki:External_include.js"
    ]
}, {
    type: "style",
    article: "MediaWiki:Common.css"
});

Alternative Syntax-Beispiele

Analog zur importArticles()-Methode existiert auch importArticle() für den Import von nur einer Datei.

Das Einfügen eines Modul-Typs aus dem lokalen Wiki geht so:

importArticle({
    type: "style",
    article: "MediaWiki:Common.css"
});

Siehe auch

• Hilfe:CSS- und JS-Anpassungen
• Hilfe:Fortgeschrittenes CSS und JS
• Hilfe:Einbinden von zusätzlichem CSS und JS

Mehr Hilfe

• Ein Stichwortverzeichnis zu verschiedensten Hilfeseiten findest du auf Hilfe:Index.
• Einen geordneten Einstieg zur Hilfe gibt es auf der Seite Hilfe:Übersicht.
• Fragen an andere Benutzer kannst du in den Diskussionen des Community-Wikis stellen.
• Anmerkungen zu dieser Hilfeseite kannst du auf der dazugehörigen Diskussionsseite hinterlassen.
• Um Fehler zu melden, kontaktiere bitte einen Ansprechpartner oder nutze das entsprechende Kontaktformular.