FANDOM


Cet article est une aide pour l'installation de code sur Fandom.

Imports de CSS sur Fandom

Sur Fandom, le code CSS @import peut importer efficacement une série de personnalisations pour :

  • réduire leur place et améliorer leur performance
  • avoir un code plus aéré
  • cacher un code systématiquement

Prenez les exemples ci-dessous.

Exemples d'utilisation de @import

À gauche, un exemple de plusieurs imports utilisant le code @import. À droite, la façon de les fusionner en une simple règle, ce qui va les réduire, et donc améliorer leur performance :

Imports multiples — désordonné et lent

  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 */

Import unique — clair et efficace

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

Placement de codes CSS @import

Les codes d'imports CSS doivent être placés au début de la page, avant toutes les autres règles CSS. Autrement, ils ne fonctionneront pas. Voici un exemple de leur position correcte :

Mauvaise position

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

Bonne position

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

Il est également possible d'importer du CSS en utilisant des pages JavaScript avec le code importArticles (en savoir plus).

Imports de JavaScript sur Fandom

Le code importArticles vise à importer efficacement plusieurs scripts pour :

  • accélérer la performance
  • faire en sorte que votre code ait l'air plus clair
  • combiner plusieurs requêtes HTTP dans une seule transmission de données
  • et de permettre à plusieurs scripts de charger et s'exécuter plus rapidement

Si vous avez installé différents scripts, votre fichier JavaScript a probablement accumulé des déclarations d'import inutiles.

Exemples d'utilisation de importArticles

Si votre fichier JavaScript a plusieurs lignes avec importScript, importScriptPage, ou importArticles, vous devriez pouvoir les fusionner ! voyez l'exemple ci-dessous. À gauche, c'est un exemple de ce à quoi votre fichier JavaScript resemble pour le moment. À droite, vous pouvez voir comment l'améliorer.

Imports multiples — désordonné et lent

  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');

Import unique — clair et efficace

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

Notes à propos de JavaScript

Note : dans cet exemple, faites très attention aux points-virgules et autres ponctuations. pour ceux qui ne connaissent que très peu la programmation (et même ceux qui sont initiés !), une erreur récurrente lorsque l`�'on écrit du code est de supprimer, oublier, ou mal placer involontairement des caractères spéciaux comme les virgules ou les points d'interrogation. Cela crée une erreur de syntaxe qui casse le code. Suivez attentivement la convention exposée ici lors de l'utilisation de importArticles.

Une autre approche est d'utiliser MediaWiki:ImportJS. Mais il y a également But there's bien plus à exploiter de importArticles que cela !

Le balisage HTML et la syntaxe wikitexte sur Fandom

Location Source

Comment changer au mode source pour que votre code soit plus net.

Le mode source est fait pour supporter le code HTML compliqué dans un article, qui réduit la quantité de code inutile qui est parfois ajouté par accident. Le mode source est le meilleur façon de contribuer si vous utilisez les modèles ou des balises HTML comme <span>, <p>, et <div>.

Voici des conseils utiles :

  • Quand vous voyez l'icône Double Brackets Icon dans le mode visuel de l'éditeur, il veut dire qu'il y a un modèle, ou du contenu avec du code qui n'est pas supporté ou est trop complexe pour l'éditeur visuel. Dans le mode source, vous verrez tout le code.
  • Quand vous voyez l'icône Comment Icon dans le mode visuel de l'éditeur, il veut dire qu'il y a un commentaire. Dans le mode source, vous verrez ceci comme <!-- -->.
  • MediaWiki a un langage spécial appelé le wikitexte pour faciliter les modifications. Il est supporté dans le mode visuel et ne va pas briser aussi facilement que le HTML.
  • Quelques balises HTML comme <u> ou <s> sont supportés dans le mode visuel.
  • Vous pouvez aussi utiliser le mode source quand vous contribuez dans le forum, ou quand vous utilisez un mur de discussion by clicking Comment Source Modus underneath the edit area.
  • Vous pouvez seulement modifier les modèles dans le mode source.

Voir aussi

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+