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
-
@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 */
- Import unique — clair et efficace
-
@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.
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
-
/* CSS */ @import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css");
- Bonne position
-
@import url("/load.php?mode=articles&only=styles&articles=MediaWiki:LocalCSS1.css|MediaWiki:LocalCSS2.css|u:dev:MediaWiki:InterWikiCSS.css"); /* 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
-
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');
- Import unique — clair et efficace
-
importArticles({ type: 'script', articles: [ 'u:dev:Script1.js', 'MediaWiki:Script2.js', 'u:dev:Script3/code.js', 'u:wiki:Page1.js', 'u:wiki:Page2.js' ] });
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 bien plus à exploiter de importArticles que cela !
Le balisage HTML et la syntaxe wikitexte sur Fandom[]
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
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
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 seulement modifier les modèles dans le mode source.