FANDOM


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

  1. @import url("/index.php?title=MediaWiki:LocalCSS1.css&action=raw&ctype=text/css");
  2. @import url("/index.php?title=MediaWiki:LocalCSS2.css&action=raw&ctype=text/css");
  3. @import url("https://dev.fandom.com/index.php?title=MediaWiki:InterWikiCSS.css&action=raw&ctype=text/css");
  4. /* CSS */

Ein einziger Import — sauber und effizient

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

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

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

Korrekte Platzierung

  1. @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
  2. /* 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

  1. importScriptPage('Script1.js', 'dev');
  2. importScript('MediaWiki:Script2.js');
  3. importArticle({
  4.   type: 'script',
  5.   article: 'u:dev:Script3/code.js'
  6. });
  7. importScriptPage('Page1.js', 'wiki');
  8. importScriptPage('Page2.js', 'wiki');

Ein einziger Import — sauber und effizient

  1. importArticles({
  2.     type: 'script',
  3.     articles: [
  4.         'u:dev:Script1.js',
  5.         'MediaWiki:Script2.js',
  6.         'u:dev:Script3/code.js',
  7.         'u:wiki:Page1.js',
  8.         'u:wiki:Page2.js'
  9.     ]
  10. });

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 Double Brackets Icon 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 Comment Icon 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 den Quelltextmodus auch öffnen, wenn du einen Diskussionsfaden oder eine Antwort im Forum schreibt, oder wenn du dich auf einer Nachrichtenseite befindest, indem du auf Comment Source Modus unterhalb des Bearbeitungsbereichs klickst.
  • Du kannst Vorlagen nur im Quelltextmodus bearbeiten.

Siehe auch

Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+