FANDOM


Vous concevez du code personnalisé pour votre communauté ou pour vous-même ? Cette page va plus loin que notre page de présentation, histoire de vous donner quelques détails utiles.

Mais avant de commencer, vous devriez consulter quelles pages sont personnalisables. Si vous envisagez d'écrire du JavaScript pour votre communauté, vous devrez demander qu'il soit activé en contactant le Support Fandom. Enfin, vous voudrez sans doute vous familiariser avec le processus de vérification du JavaScript.

Personnalisation de page spécifiqueModifier

CSSModifier

L'élément HTML <body> dans les articles inclut un identifiant unique se basant sur le nom de la page. Par exemple, sur cette page d'aide, la classe est .page-Aide_CSS_et_JS_avancés

Le format général est .page-[nom de l'article], où les espaces, les deux-points et autres caractères spéciaux sont remplacés par des soulignés.

JavaScriptModifier

Dans MediaWiki:Common.js, utilisez un switch pour appliquer du JavaScript que sur certaines pages :

switch (mw.config.get('wgPageName')) {
    case 'nom de la page':
        // Le JS ici sera appliqué sur "nom de la page"
        break;
    case 'autre page':
        // Le JS ici sera appliqué sur "autre page"
        break;
}

Appliquer du CSS et du JS sur des communautés spécifiquesModifier

Dans votre CSS personnel, vous pouvez ajouter une classe au début de tous les autres sélecteurs CSS qui vous permettra de styliser la façon dont votre compte ressemblera sur des wikis spécifiques.

Cette classe est basée sur le nom de la base de données d'une communauté, et non sur l'URL — qui sont généralement, mais pas toujours, les mêmes. Le format est :

.wiki-[nom de la base de données]

ou, si c'est un wiki non anglophone :

.wiki-[code langue][nom de la base de données]

Par exemple, si vous vouliez faire apparaître en rouge une partie de l'arrière-plan de Harry Potter, ajoutez ceci à votre fichier global.css :

.wiki-frharrypotter #WikiaMainContent { background-color:red; }

Pour le JavaScript, wgDBname peut être utilisé pour identifier une communauté spécifique.

Ordre de chargementModifier

L'ordre général de chargement pour le CSS et le JS est le suivant :

  1. code du noyau de Fandom
  2. code local de la communauté
  3. code personnel

À chaque niveau, l'ordre de chargement est d'abord Common, puis Wikia. Cela signifie que si vous avez mis .class { color: red } dans Common.css, mais .class { color : green } dans Wikia.css, la .class sera verte. Et comme le CSS personnel est le dernier, tout ce que vous y mettez passe toujours avant les choix du wiki local.

Cela signifie également que si vous importez du CSS ou des fonts (polices de caractères) — et que votre wiki possède à la fois Common.css et Wikia.css — ces importations doivent se trouver tout en haut de Common.css.

Fandom CSS Importing Best Practices

Ce tableau vous aidera à trouver la meilleure façon de fusionner Common.css avec Wikia.css tout en respectant le bon ordre de chargement.

Si vous souhaitez simplifier le CSS de votre wiki, vous pouvez greffer le contenu de Common.css sur Wikia.css. Mais vous devez respecter les principes fondamentaux de l'ordre de chargement lorsque vous le faites. Suivez l'organigramme qui se trouve à proximité, et tout ira bien !

Pour le JS, l'ordre de chargement est particulièrement important lorsqu'il s'agit de déterminer comment utiliser au mieux MediaWiki:ImportJS. Comme ImportJS se charge en dernier, vous pouvez mettre votre configuration d'un script Dev Wiki dans Common.js ou Wikia.js, mais vous devez importer le script lui-même dans ImportJS. L'ordre de chargement complet du JS est :

  1. Common.js
  2. Wikia.js
  3. Scripts importé via Common.js
  4. Scripts importé via Wikia.js
  5. ImportJS

Enfin, retenez une chose évidente : les pages se chargent de haut en bas. Cela signifie que les déclarations faites en haut d'une page peuvent être écrasées par celles du bas.

!important dans le CSS Modifier

En raison des ordres de chargement du CSS, vous devrez parfois utiliser la propriété !important pour vous assurer qu'une règle CSS est appliquée. Mais !important doit être évité dans la mesure du possible par l'utilisation de sélecteurs CSS spécifiques (même trop spécifiques).

Problèmes de cacheModifier

Chaque fichier que vous téléchargez sur Internet est mis en cache. En temps normal, c'est une bonne chose car cela réduit le trafic à la fois pour votre propre appareil et pour les serveurs de Fandom, mais cela peut poser un problème lorsqu'il s'agit de tester les changements visuels. Il peut s'écouler un certain temps avant que vos modifications ne prennent effet, à moins que vous purgiez votre cache.

Si la purge de votre cache ne fonctionne pas, vous pouvez essayer de déboguer votre code en ajoutant ?debug=1 à la fin de l'URL de n'importe quelle page. Le débogage de votre code signifie que le code garantira presque à 100 % la charge du ou des scripts et/ou feuilles de style récemment ajoutés.

Extraits de code Javascript populairesModifier

Pour avoir une idée de certains scripts que d'autres ont écrits et qui pourraient vous être utiles ou que vous aimeriez essayer, consultez la liste des améliorations JS sur le Fandom Developers Wiki.

JavaScript dupliqué Modifier

De nombreux scripts peuvent avoir des problèmes s'ils sont exécutés plusieurs fois sur la même page. Assurez-vous d'écrire le code de telle sorte qu'un morceau de code particulier ne s'exécute qu'une seule fois. Évitez de coller le même JS dans plusieurs fichiers car il risque de provoquer des conflits et des erreurs déroutantes pour vous et les autres visiteurs.

Désativer temporairement le CSS/JS Modifier

Les CSS et JS personnalisés peuvent être temporairement désactivés à l'aide des commandes suivantes.

La ou les commandes doivent être ajoutées à la fin de l'URL (exemple: https://communaute.fandom.com/fr/wiki/Sp%C3%A9cial:Random?usesitecss=0. [L'exemple suivant désactive le CSS du site]).

Si plusieurs commandes sont nécessaires, au lieu d'un point d'interrogation (?), mettez une esperluette (&) pour les deuxième, troisième et quatrième commandes (au cas où il y en aurait) (exemple: https://communaute.fandom.com/fr/wiki/Sp%C3%A9cial:Random?usesitecss=0&useuserjs=0. [L'exemple suivant désactive les CSS du site et les JS personnels]).

Voici un tableau de toutes les commandes CSS/JS.

Commande Rôle
?useusercss=0 Désactive tout le CSS qui a été ajouté dans vos pages CSS personnelles.
?useuserjs=0 Désactive tout le JS qui a été ajouté dans vos pages JS personnelles.
?usesitecss=0 Désactive tout le CSS qui a été ajouté dans la page MediaWiki:Wikia.css du wiki.
?usesitejs=0 Désactive tout le JS qui a été ajouté dans la page MediaWiki:Wikia.js du wiki.

Vérification des erreurs de CSS et JS dans l'éditeurModifier

Lorsque l'éditeur de texte de Fandom est utilisé pour modifier le CSS ou le JS, sont activées la vérification des erreurs ("linting") et la coloration syntaxique :

  • Au fur et à mesure que vous saisissez du code, la page vous indiquera toute erreur de syntaxe trouvée
  • Veuillez noter que tout problème ne doit pas nécessairement être résolu ; la technologie du CSS (et même du JS) est en constante évolution et tous les navigateurs ne se comportent pas de la même façon : certains messages peuvent ne pas nécessiter d'action.

Problèmes courantsModifier

CSS issues
Problème Expllication
@import prevent parallel downloads, use <link> instead Les liens sont normalement utilisées pour importer du CSS. Toutefois, MediaWiki ne prend pas charge l'ajout de balises Link personnelles sans l'utilisation de JS, cetter erreur peut donc être ignorée.
Expected X but found Y Cela signifie que vous avez saisi une valeur incorrecte pour une propriété. Par exemple, dans 'color: truc;' truc est une valeur non valide pour la propriété color parce ce n'est pas un nom de couleur.
Use of !important !important doit être évité au maximum dans le CSS car cela rend la maintenance plus difficile et il est aussi plus difficile pour les utilisateurs de surcharger les paramètres dans leur CSS personel. La plupart du temps, utiliser le bon sélecteur vous permettra d'éviter d'utiliser !important.
Unknown property 'codename' Ben que l'outil ne reconnaisse pas tout le code CSS (comme le CSS en lui-même est une plateforme mise à jour en permanence), certains codes CSS peuvent toujours être lus quand ils sont implémentés pour un objet spécifique sur une page de Fandom (par exemple, mix-blend-mode: color-dodge;).

Voir aussi Modifier

Plus d'aideModifier

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA .