Jump to content

Manuel:$wgResourceModuleSkinStyles

From mediawiki.org
This page is a translated version of the page Manual:$wgResourceModuleSkinStyles and the translation is 100% complete.
ResourceLoader: $wgResourceModuleSkinStyles
Tableau de feuilles de style supplémentaires fournies par les habillages pour les modules ResourceLoader existants.
Introduit dans la version :1.24.0 (Gerrit change 141259; git #3971d064)
Retiré dans la version :Encore utilisé
Valeurs autorisées :(tableau multidimensionnel)
Valeur par défaut :[]
Cette option de configuration ne doit pas être utilisée par les extensions. Elles doivent utiliser la propriété skinStyles de leurs propres modules ResourceLoader pour fournir des styles par habillage. Ceci est pour les habillages uniquement pour adapter les modules existants pour eux-mêmes.

La variable globale $wgResourceModuleSkinStyles permet aux habillages de fournir des feuilles de style supplémentaires pour personnaliser les modules ResourceLoader existants. Les habillages peuvent la modifier en éditant la clé ResourceModuleSkinStyles dans skin.json. Les extensions peuvent adapter les styles de leur module avec les habillages, en initialisant la clé skinStyles avec les définitions de leur module ResourceLoader.

Ces deux éléments facilitent (ou rend possible) le remplacement des styles par défaut et réduit l'empreinte du style d'un habillage en ne chargeant pas les styles non utilisés sur la plupart des pages. Par exemple, si un habillage a beaucoup de code CSS pour remplacer la présentation de la page Special:UserLogin, il peut le mettre dans un fichier CSS ou LESS séparé qui remplace 'mediawiki.special.userlogin.login.styles' et ResourceLoader ne chargera ce CSS d'habillage que lorsqu'une page aura besoin de ce module.

$wgResourceModuleSkinStyles est un tableau multidimensionnel. Au premier niveau, on trouve le nom du paquet (habillage ou extension) qui ajoute des styles complémentaires (dans l'exemple suivant appelé « foo »). Au second niveau on trouve les paires clé et valeur :

  • Les clés sont toujours les noms de modules, pour lesquels les styles supplémentaires doivent être utilisés. Par défaut votre définition va ensuite remplacer le fichier CSS/LESS, qui avait déjà défini les styles pour ce module auparavent. Si le nom de module en contraste est préfixé par le signe +, alors vos styles seront ajoutés aux styles existants qui ont déjà été définis antérieurement, sans remplacer tous les fichiers, mais en préservant tous les styles et en ajoutant simplement (ou en remplaçant s'ils existent déjà) les styles que vous définissez.
  • La valeur est le chemin relatif vers le fichier correspondant. Plusieurs fichiers peuvent être ajoutés à un module en les inscrivant dans un tableau.

Vector est un des habillages qui utilise cette méthode et fournit une bonne démonstration d'utilisation pratique. Vous trouverez la définition sous la clé ResourceModuleSkinStyles.

Voir la documentation de $wgResourceModules pour les informations de base à propos de la définition et de l'utilisation des modules ResourceLoader.

Documentation

La clé ResourceModuleSkinStyles à l'intérieur de skin.json peut être utilisée pour modifier les styles des modules ResourceLoader connus qui ont été définis dans la clé ResourceModules des autres extensions.

Les styles définis utilisant $wgResourceModuleSkinStyles seront ajoutés ultérieurement à la liste skinStyles des modules existants. La liste styles ne peut pas être modifiée ni désactivée.

Par exemple, si ceci est la définition du module ResourceLoader bar :

$wgResourceModules['bar'] = [
  'scripts' => 'resources/bar/bar.js',
  'styles' => 'resources/bar/main.css',
];

Ensuite voilà comment l'habillage Foo lui fournirait des styles supplémentaires :

$wgResourceModuleSkinStyles['foo'] = [
  'bar' => 'skins/Foo/bar.css',
];

Cela équivaut le plus souvent à :

$wgResourceModules['bar'] = [
  'scripts' => 'resources/bar/bar.js',
  'styles' => 'resources/bar/main.css',
  'skinStyles' => [
    'foo' => 'skins/Foo/bar.css',
  ],
];

Si le module définit déjà sa propre entrée dans skinStyles pour un habillage donné, alors $wgResourceModuleSkinStyles est ignoré.

Si un module définit skinStyles['default'], l'habillage peut vouloir l'étendre plutôt que de le remplacer. Cela peut être fait en utilisant le préfixe +.

Exemple :

$wgResourceModules['bar'] = [
  'scripts' => 'resources/bar/bar.js',
  'styles' => 'resources/bar/basic.css',
  'skinStyles' => [
    'default' => 'resources/bar/additional.css',
  ],
];
// noter le caractère <code>+</code>
$wgResourceModuleSkinStyles['foo'] = [
  '+bar' => 'skins/Foo/bar.css',
];

Cela équivaut le plus souvent à :

$wgResourceModules['bar'] = [
  'scripts' => 'resources/bar/bar.js',
  'styles' => 'resources/bar/basic.css',
  'skinStyles' => [
    'default' => 'resources/bar/additional.css',
    'foo' => [
      'resources/bar/additional.css',
      'skins/Foo/bar.css',
    ],
  ],
];

En d'autres termes, si vous êtes l'auteur du module, utilisez la liste styles pour les feuilles de style qui ne peuvent pas être désactivées par un habillage. Pour fournir les styles par défaut pouvant être étendus ou remplacés, utilisez skinStyles['default'].

Comme avec $wgResourceModules, les valeurs par défaut des chemins sont relatives par rapport à la racine de MediaWiki. Vous devez toujours fournir un localBasePath et remoteBasePath (ou remoteExtPath / remoteSkinPath).

Exemple :

$wgResourceModuleSkinStyles['foo'] = [
  'bar' => 'bar.css',
  'quux' => 'quux.css',
  'remoteSkinPath' => 'Foo',
  'localBasePath' => __DIR__,
];
Version de MediaWiki :
1.25
Gerrit change 161173

Effacer les styles de l'interface utilisateur MediaWiki

Le noyau MediaWiki ajoute le CSS des modules ResourceLoader MediaWiki UI en tant que default skinStyles, ce qui permet aux habillages de redéfinir leurs styles. Un exemple extrême, pour éléminer la plupart des styles :

$wgResourceModuleSkinStyles['foo'] = [
        'mediawiki.ui' => [],
        'mediawiki.ui.checkbox' => [],
        'mediawiki.ui.radio' => [],
        'mediawiki.ui.anchor' => [],
        'mediawiki.ui.button' => [],
        'mediawiki.ui.input' => [],
        'mediawiki.ui.icon' => [],
        'mediawiki.ui.text' => [],
);

Voir aussi