Fandom Developers Wiki
Advertisement

Dieser Artikel beschreibt die Code-Installation auf Fandom.

CSS-Importe auf Fandom[]

Auf Fandom kann der CSS-Befehl @import eine Sammlung von Stylesheets effizient importieren, um Styles

  • zu minimieren und die Performance zu erhöhen
  • sauberer aussehen zu lassen
  • konsequent zu cachen

Sieh dir dazu auch die Beispiele unten an.

Beispiele zur Nutzung von @import[]

Auf der linken Seite befindet sich ein Beispiel mit mehreren Importen unter Verwendung der klassischen @import-Regel. Auf der rechten Seite siehst du, wie du sie in einem einzigen Befehl unterbringen kannst, was sie kleiner macht und so die Performance erhöht:

Mehrere Importe — unsauber und langsam
@import url("/index.php?title=MediaWiki:LocalCSS1.css&action=raw&ctype=text/css");
@import url("/index.php?title=MediaWiki:LocalCSS2.css&action=raw&ctype=text/css");
@import url("https://dev.fandom.com/index.php?title=MediaWiki:InterWikiCSS.css&action=raw&ctype=text/css");
/* CSS */
Ein einziger Import — sauber und effizient
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
/* CSS */

Note: That, however, would not work well for some stylesheets which import other stylesheets in their turn. Those "parent" stylesheets may break if combined with other stylesheets in the same @import statement.

Platzierung der CSS @import-Regeln[]

CSS-Importregeln müssen am Anfang der Seite stehen, vor jeder anderen Regel. Sonst funktionieren sie nicht. Hier ist ein Beispiel zur korrekten Platzierung:

Falsche Platzierung
/* CSS */
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
Korrekte Platzierung
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
/* CSS */

Es ist außerdem möglich, CSS über JavaScript-Seiten via importArticles zu importieren (mehr dazu lesen).

JavaScript-Importe auf Fandom[]

Der Befehl importArticles wurde so angepasst, dass er Import-Skripte effizient abarbeitet:

  • um eine schnellere Performance zu erreichen,
  • um deinen Code sauberer aussehen zu lassen,
  • um mehrere HTTP-Anfragen zu einem einzigen Datenaustausch zu bündeln
  • und um mehreren Skripten zu ermöglichen, schneller zu laden und ausgeführt zu werden

Wenn du viele verschiedene Skripte installiert hast, hat deine JavaScript-Datei wahrscheinlich überflüssige Import-Anweisungen angehäuftt.

Beispiele zur Nutzung von importArticles[]

Wenn deine JavaScript-Datei mehrere Codezeilen hat, in denen importScript, importScriptPage oder importArticles steht, könntest du diese vereinen! Sieh dir das Beispiel unten an. Auf der linken Seite ist ein Beispiel, wie deine JavaScript-Datei jetzt gerade aussehen könnte. Auf der rechten Seite siehst du, wie du diesen Code verbessern könntest.

Mehrere Importe — unsauber und langsam
importScriptPage('Script1.js', 'dev');
importScript('MediaWiki:Script2.js');
importArticle({
  type: 'script',
  article: 'u:dev:Script3/code.js'
});
importScriptPage('Page1.js', 'wiki');
importScriptPage('Page2.js', 'wiki');
Ein einziger Import — sauber und effizient
importArticles({
    type: 'script',
    articles: [
        'u:dev:Script1.js',
        'MediaWiki:Script2.js',
        'u:dev:Script3/code.js',
        'u:wiki:Page1.js',
        'u:wiki:Page2.js'
    ]
});

Bemerkungen zum Import von JavaScript[]

Bemerke: Achte in diesem Beispiel genau darauf, wo sich Kommata und andere Satzzeichen befinden. Bei Leuten, die nicht mit Programmierung vertraut sind (und bei denen, die es sind!), ist ein häufiger Fehler, dass sie versehentlich funktionell wichtige Symbole wie Kommata oder Fragezeichen löschen, vergessen oder an der falschen Stelle platzieren. Das kann einen Syntaxfehler bezwecken, der den Code kaputt macht. Folge der hier gezeigten Konvention achtsam, wenn du importArticles benutzt.

Ein anderer Weg ist, MediaWiki:ImportJS zu verwenden. Aber es gibt noch so viel mehr, wofür importArticles gut zu gebrauchen ist, als nur das!

HTML und Wikitext-Markup auf Fandom[]

Location Source

Wie du in den Quelltextmodus wechselt und den Code schöner aussehen lässt.

Die Code-Ansicht ist darauf ausgerichtet, mit komplexen Codes in einem Artikel umzugehen, was es möglich macht, die Menge an unerwünschtem Code, der manchmal automatisch hinzugefügt wird, zu reduzieren. Die Code-Ansicht ist der beste Weg, Seiten zu bearbeiten, wenn du Vorlagen oder HTML-Tags, wie z. B. <span>, <p> und <div>, verwendest.

Hier sind einige nützliche Tipps:

  • Wenn du ein Code-Element-Symbol im Bearbeitungsbereich des visuellen Modus siehst, bedeutet dies, dass sich dort eine Vorlage oder Code, der wegen seiner Komplexität nicht vom Visuellen Editor behandelt werden kann, befindet. Im Quelltextmodus werden dir diese Elemente vollständig angezeigt.
  • Wenn du ein Kommentar-Symbol im Bearbeitungsbereich des visuellen Modus siehst, bedeutet dies, dass sich dort ein Kommentar befindet. Im Quelltextmodus wird dir dies als <!-- --> angezeigt.
  • MediaWiki hat eine besondere Sprache, genannt Wikitext, um das Bearbeiten einfacher zu machen. Diese Sprache wird im visuellen Modus unterstützt und wird nicht so schnell zu Fehlern führen wie HTML.
  • Einige HTML-Tags, darunter <u> und <s>, werden im visuellen Modus unterstützt.
  • Du kannst Vorlagen nur im Quelltextmodus bearbeiten.

Siehe auch[]

Advertisement