OOUI/Thèmes
OOUI |
---|
Introduction |
Pour commencer |
Travailler avec les widgets |
Voir aussi |
Les thèmes spécifient l'aspect et le comportement des interfaces OOUI. Les auteurs d'habillages peuvent créer des thèmes supplémentaires et les utiliser dans MediaWiki.
Les thèmes fournissent principalement le CSS, mais ils peuvent également apporter du code JavaScript (en pratique uniquement pour l'implémentation des variantes d'icônes) et des images d'icônes personnalisées (pas utilisé en pratique actuellement).
Thèmes prédéfinis
Deux thèmes vous sont proposés prêts à l'emploi :
- le thème WikimediaUI – conformément au guide de style de conception de la Fondation Wikimedia. C'est le thème par défaut; il est en phase active de développement.
- le thème Special:MyLanguage/Skin:Apex inspiré de l'habillage du même nom. Il reçoit uniquement les mises à jour de maintenance.
Nous n'avons pas l'intention d'avoir plus de deux thèmes prédéfinis à cause de l'effort supplémentaire qui serait demandé pour les maintenir.
Thèmes personnalisés
Il est possible de créer des thèmes OOUI personnalisés. Notez que cela demande beaucoup de travail préparatoire ainsi qu'un effort continu pour que votre thème soit toujours compatible avec les modifications de OOUI.
Les thèmes OOUI doivent actuellement être dans le même dépôt que le code source principal de OOUI (T76632), ceci à cause des limitations imposées par le processus de construction.
Pour créer un nouveau thème OOUI :
- faites un fork du répertoire OOUI par exemple à partir de https://github.com/wikimedia/oojs-ui .
- allez jusqu'au répertoire
oojs-ui
et exécuteznpm install
- vérifiez que vous pouvez construire la bibliothèque avec
grunt build
et regardez la démonstration. Pour initialiser la démonstration, exécuteznpm run-script demos
et ouvrez/resources/lib/oojs-ui/demos/index.html
dans votre navigateur. - exécutez
grunt add-theme --name=FooBar --template=Blank
, en substituant le nom de votre thème parFooBar
. Plutôt que d'utiliser le thèmeBlank
, vous pouvez aussi commencer avecApex
ouWikimediaUI
.- ceci va créer sous un nouveau nom, une copie du thème du modèle et modifier le processus de construction ainsi que les démonstrations, pour prendre en compte votre nouveau thème. Ensuite exécutez
grunt build
pour que la construction prenne en compte le nouveau thème. - les styles de votre thème sont maintenant dans src/themes/foobar/ .
- le nom des thèmes est sensible à la casse; si vous entrez le nom du thème du modèle en minuscules vous obtiendrez des erreurs perturbantes. Vous pouvez aussi nommer votre thème en commençant son nom par une lettre majuscule pour éviter les erreurs de lint.
- ceci va créer sous un nouveau nom, une copie du thème du modèle et modifier le processus de construction ainsi que les démonstrations, pour prendre en compte votre nouveau thème. Ensuite exécutez
- écrivez les styles pour votre thème !
- exécutez
grunt build
(ougrunt quick-build
) pour le construire; utilisez la démonstration pour tester vos modifications.
- exécutez
- pensez à fusionner régulièrement dans votre fork, les modifications venant du dépôt OOUI. Nous fournissons une version de OOUI toutes les deux semaines. Vous devriez probablement le faire au moins pour les nouvelles versions de MediaWiki (en gros tous les six mois).
- bien que nous ne fassions pas habituellement de modifications gratuites qui nécessitent de corriger les styles des thèmes, nous le faisons quelques fois et sans préavis. Désolé. Vous pouvez suivre les modifications du thème Apex et détecter les éléments qui pourraient aussi impacter votre thème (Apex n'est pas dans une phase active de développement).
- même s'il y a des modifications qui ne cassent pas l'existant, vous devez néanmoins reconstruire périodiquement votre version pour y inclure les modifications apportées aux styles de base.
Utiliser les thèmes dans MediaWiki
Chaque widget va utiliser le thème défini par l'habillage actuel en utilisant SkinOOUIThemes
de extension.json.
Pour utiliser un thème prédéfini, c'est tout ce que vous avez à faire.
Pour utiliser un thème personnalisé dans votre habillage MediaWiki :
- exécutez
grunt build
. - copiez-collez les fichiers générés de dist/ (il vous faudra
oojs-ui-foobar.js
et tous lesoojs-ui-...-foobar.css
, ignorez les autres) vers un sous-répertoire de votre habillage. Copier aussiFooBarTheme.php
de php/. - si vous avez des images personnalisées, copiez et collez les contenus des fichiers dist/themes/foobar/ et .json de src/themes/foobar/.
- définir le thème en utilisant
OOUIThemePaths
dans le fichier skin.json, et faites que votre habillage utilise le nouveau thème avecSkinOOUIThemes
comme auparavant.
Exemple de modification utilisant un thème personnalisé dans un habillage : https://gerrit.wikimedia.org/r/c/mediawiki/skins/Example/+/343240
the Design System Team assure la maintenance de OOUI.
Obtenir de l'aide :
|