dev

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

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:

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

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

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:

See also