OOUI/Themes/nl
Thema's geven aan hoe OOUI-interfaces eruit zien en aanvoelen. Een maker van een skin kan thema's aanmaken en deze gebruiken in MediaWiki.
Thema's bieden voornamelijk de CSS, maar ze kunnen ook wat JavaScript-code leveren (in de praktijk wordt dit alleen gebruikt om pictogramvarianten te implementeren) en aangepaste pictogramafbeeldingen (in de praktijk nu niet gebruikt).
Ingebouwde thema's
Twee thema's worden standaard verstrekt.
- "WikimediaUI" thema dat voldoet aan Wikimedia Foundation's ontwerp stijlgids. Dit is het standaardthema en in actieve ontwikkeling.
- "Special:MyLanguage/Skin:Apex" thema geïnspireerd door de gelijknamige skin. Het ontvangt alleen onderhoudsupdates.
We zijn niet van plan om meer dan twee ingebouwde thema's te hebben vanwege de extra inspanning die nodig zou zijn om ze te onderhouden.
Aangepaste thema's
Het is mogelijk om aangepaste OOUI-thema's te maken. Merk op dat dit veel initieel werk en veel voortdurende inspanning vereist om uw thema up-to-date te houden met OOUI-wijzigingen.
OOUI-thema's moeten nu in dezelfde repository leven als de hoofdbroncode van OOUI (T76632), vanwege beperkingen in het bouwproces.
Een nieuw OOUI-thema maken:
- Fork de OOUI-repository, bijvoorbeeld van https://github.com/wikimedia/oojs-ui.
- Navigeer naar de map
oojs-ui
en voernpm install
uit - Zorg ervoor dat u de bibliotheek kunt maken met
grunt build
en bekijk de demo. Om de demo te initialiseren, voert unpm run-script demos
uit en opent u/resources/lib/oojs-ui/demos/index.html
in uw browser. - Voer
grunt add-theme --name=FooBar --template=Blank
uit en vervang de naam van uw thema doorFooBar
. In plaats van het themaBlank
te gebruiken, kunt u ook beginnen metApex
ofWikimediaUI
.- Hiermee wordt een kopie van het sjabloonthema onder een nieuwe naam gemaakt en worden het bouwproces en de demo's aangepast om uw nieuwe thema op te nemen. Voer daarna
grunt build
uit om het bouwproces het nieuwe thema te laten oppikken. - De stijlen van uw thema staan nu in src/themes/foobar/.
- De themanamen zijn hoofdlettergevoelig; Als u de naam van het sjabloonthema in kleine letters typt, krijgt u verwarrende fouten. Misschien wilt u uw thema ook een hoofdletter met hoofdletters geven om lint-fouten te voorkomen.
- Hiermee wordt een kopie van het sjabloonthema onder een nieuwe naam gemaakt en worden het bouwproces en de demo's aangepast om uw nieuwe thema op te nemen. Voer daarna
- Schrijf de stijlen voor uw thema!
- Voer
grunt build
(ofgrunt quick-build
) uit om het te bouwen, gebruik de demo om uw wijzigingen te testen.
- Voer
- Voeg regelmatig de wijzigingen uit de OOUI-repository samen in uw fork. We brengen om de paar weken een versie van OOUI uit. U moet het waarschijnlijk op zijn minst doen voor nieuwe MediaWiki-versies (ongeveer elke 6 maanden).
- Hoewel we meestal geen onnodige wijzigingen aanbrengen waarvoor oplossingen voor themastijlen nodig zijn, gebeuren ze soms en zijn er waarschijnlijk geen waarschuwingen. Sorry. U kunt kijken naar wijzigingen in het Apex-thema om dingen te herkennen die waarschijnlijk ook van invloed zijn op uw thema (Apex is niet in actieve ontwikkeling).
- Zelfs als er geen dergelijke brekende wijzigingen waren, moet u uw versie nog steeds af en toe opnieuw opbouwen om eventuele wijzigingen in de basisstijlen op te nemen.
Thema's gebruiken
Elke widget gebruikt het thema dat is gedefinieerd door de huidige skin met behulp van SkinOOUIThemes
in extension.json.
Om een ingebouwd thema te gebruiken, is dit alles wat u hoeft te doen.
Een aangepast thema gebruiken in uw MediaWiki-skin:
- Run
grunt build
. - Kopieer en plak de gegenereerde bestanden van dist/ (u heeft
oojs-ui-foobar.js
en alleoojs-ui-...-foobar.css
nodig, negeer de oveirge) in een submap in uw skin. Kopieer ookFooBarTheme.php
in php/. - Als u aangepaste afbeeldingen hebt, kopieert en plakt u ook de inhoud van dist/themes/foobar/ en de .json-bestanden van src/themes/foobar/.
- Definieer het thema met
OOUIThemePaths
in het skin.json-bestand en laat uw skin het nieuwe thema gebruiken metSkinOOUIThemes
zoals voorheen.
Voorbeeldwijziging met een aangepast thema in een skin: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Example/+/343240
OOUI wordt onderhouden door the Design System Team.
Hulp krijgen:
|