Pomoc:Zaawansowane CSS i JS

Tworzysz własny kod dla swojej społeczności albo tylko dla własnego konta? Na tej stronie znajdziesz szczegóły, które pozwolą ci z jednym i drugim.

Zanim zaczniesz, sprawdź które strony możesz edytować w tym celu. Jeśli planujesz pisać JavaScript dla całej wiki, musisz najpierw poprosić o jego włączenie, kontaktując się z Fandomem. Gdy to się stanie, zapoznaj się z procesem przeglądu kodu JavaScript.

Zmiana stylu konkretnych stron lub wiki[]

CSS[]

Każda strona na Fandomie automatycznie dodaje do elementu <body> unikalną klasę, opartą na nazwie artykułu. Dzięki temu możesz łatwo stosować CSS tylko dla wybranych artykułów. Format tej klasy to:

.page-[nazwa_strony]

Spacje, dwukropki i inne znaki są zamieniane na podkreślenia (_).

Przykład: Dla tej strony pomocy, ww. klasa to .page-Pomoc_Zaawansowane_CSS_i_JS.

Podobny mechanizm umożliwia tworzenie styli działających jedynie na konretnych całych wiki. W swoim osobistym arkuszu CSS możesz stosować klasy oparte na nazwie bazy danych wiki, a nie na jej adresie URL. Klasa ma format:

.wiki-[nazwa_bazy_danych]

Jeśli wiki działa w innym języku niż angielski, jej nazwa bazy danych będzie zawierała również kod języka.

Nazwa bazy danych nie zmienia się, nawet jeśli wiki zostanie przeniesiona pod inny adres.

Przykład: Dla Centrum Społeczności, ww. klasa to .wiki-plwikia.

JavaScript[]

Aby uruchamiać skrypty JavaScript tylko na określonej stronie lub wiki, możesz użyć zmiennych konfiguracyjnych wgPageName (nazwa strony) oraz wgDBname (nazwa bazy danych wiki):

switch (mw.config.get('wgPageName')) {
    case 'nazwa_strony':
        // Ten kod działa tylko na stronie „nazwa_strony”
        break;
    case 'przykladowa_strona':
        // Ten kod działa tylko na stronie „przykladowa_strona”
        break;
}

switch (mw.config.get('wgDBname')) {
    case 'plwikia':
        // Ten kod działa tylko na Centrum Społeczności
        break;
    case 'starwars':
        // Ten kod działa tylko na Wookiepedii
        break;
}

Kolejność ładowania[]

CSS[]

Style na Fandomie wczytywane są w następującej kolejności:

Główny kod Fandomu (domyślne style platformy)
Lokalny kod społeczności (np. MediaWiki:Common.css, MediaWiki:Fandomdesktop.css)
Prywatny kod użytkownika (np. Special:MyPage/common.css)

W przypadku lokalnego kodu społeczności i prywatnego kodu użytkownika, najpierw ładowany jest common.css, a dopiero potem fandomdesktop.css. Przykładowo, jeśli umieściłeś ten sam kod w obu arkuszach:

/* W Common.css */
.klasa { color: red; }

/* W Fandomdesktop.css */
.klasa { color: green; }

Efektem będzie zielony kolor, ponieważ Fandomdesktop.css ładuje się później i nadpisuje wcześniejsze ustawienia.

Ważne: Jeśli importujesz dodatkowe pliki CSS albo czcionki Google Fonts, zawsze rób to na początku pliku common.css – nie w fandomdesktop.css.

Czasami może zajść potrzeba użycia właściwości !important do pominięcia kolejności w celu upewnienia się, że reguła została zastosowana. Staraj się jednak nie korzystać z tej funkcji.

JavaScript[]

W przypadku JS-u, kolejność ładowania jest szczególnie istotna w celu jak najlepszego użycia MediaWiki:ImportJS. Ponieważ wczytuje się jako ostatnie, możesz dostosowywać skrypty z Dev Wiki w Common.js lub Wikia.js, a sam import zachować w ImportJS. Pełną kolejnością ładowania JavaScriptu jest:

MediaWiki:Common.js
MediaWiki:Fandomdesktop.js
Skrypty importowane przez MediaWiki:Common.js
Skrypty importowane przez MediaWiki:Fandomdesktop.js
MediaWiki:ImportJS

Na koniec zapamiętaj oczywistą rzecz: strony ładują się od góry do dołu, więc style i skrypty zapisane u góry, mogą zostać nadpisane przez te znajdujące się na dole.

Uwaga: Wiele skryptów może sprawiać problemy, jeśli uruchamiają się wiele razy na tej samej stronie. Wobec tego musisz pamiętać, aby twój określony fragment kodu działał tylko raz. Unikaj umieszczania tych samych skryptów w różnych arkuszach, gdyż prawdopodobnie spowoduje to wiele błędów dla ciebie oraz innych, odwiedzających twoją społeczność.

Problemy z pamięcią podręczną[]

Każdy plik, który pobierasz z internetu ląduje w pamięci podręcznej. Normalnie to dobrze, ponieważ zmniejsza to ilość ruchu zarówno na Twoim urządzeniu jak i na serwerach Fandomu, ale często może być problemem przy testowaniu zmian. Opróżnienie pamięci podręcznej może trochę potrwać chyba, że użyjesz tych trików.

Jeśli pamięć podręczna nadal nie chce się odświeżyć, spróbuj dodać ?debug=1 do adresu URL dowolnej strony. Dzięki temu upewnisz się, że skrypty lub style ładują się w 100% prawidłowo.

Tymczasowe wyłączenie CSS/JS[]

Możesz tymczasowo wyłączyć ładowanie CSS i JS na dowolnej stronie wiki, dodając odpowiednie komendy do końcówki adresu URL:

https://spolecznosc.fandom.com/wiki/Specjalna:Losowa_strona?usesitecss=0

Jeśli potrzebujesz więcej niż jednej komendy, zacznij od znaku zapytania (?), a drugie, trzecie i każde kolejne komendy oddzielaj znakiem et (&):

https://spolecznosc.fandom.com/wiki/Specjalna:Losowa_strona?usesitecss=0&useuserjs=0

Oto tabela dla wszystkich komend dezaktywujących CSS i JS:

Komenda	Rola
`?useusercss=0`	Wyłączenie osobistego CSSu użytkownika
`?useuserjs=0`	Wyłączenie osobistego JSu użytkownika
`?usesitecss=0`	Wyłączenie lokalnego CSSu społeczności
`?usesitejs=0`	Wyłączenie lokalnego JSu społeczności

Sprawdzanie błędów CSS i JS w edytorze[]

Edytory CSS i JS Fandomu posiadają funkcję aktywnego sprawdzania błędów ("lintowania") oraz podświetlanie składni:

W czasie pisania kodu, edytor zwróci Ci uwagę na błędy w składni, które się pojawią.
Zwróć uwagę na to, że nie wszystkie problemy muszą zostać rozwiązane – technologia CSS (oraz nawet JS) ciągle się rozwija, a przeglądarki nie zawsze zachowują się identycznie: niektóre komunikaty nie potrzebują podjęcia akcji.

Częste problemy[]

Problemy z CSS
Problem	Wytłumaczenie
`@import prevent parallel downloads, use <link> instead` @import uniemożliwia równoległe pobierania, zamiast tego użyj <link>	Tagi link są z reguły używane do importowania CSS. Ponieważ MediaWiki nie pozwala na dodawanie własnych tagów link bez użycia JS, ten problem może zostać zignorowany.
`Expected X but found Y` Oczekiwano X, ale znaleziono Y	Oznacza to, że została wprowadzona niepoprawna wartość dla właściwości. Na przykład, w '`color: foo;`', wartość foo nie jest poprawna, ponieważ to nie kolor.
`Use of !important` Użycie !important	Z reguły powinno się unikać używania `!important`, ponieważ powoduje trudności w utrzymaniu kodu oraz utrudnia użytkownikom nadpisanie wartości za pomocą osobistego arkusza. W większości wypadków użycie poprawnego selektora powinno zniwelować potrzebę użycia `!important`.
`Unknown property 'codename'` Nieznana właściwość 'codename'	Chociaż nie cały kod CSS jest rozpoznawany przez narzędzie (CSS jest często aktualizowane) niektóre kody CSS ciągle mogą być odczytane jeśli są zaimplementowane dla jakiegoś obiektu na stronie (np: `mix-blend-mode: color-dodge;`).
`Expected (<color> \| inherit) but found 'var(--theme-accent-color)'.` Oczekiwano (<color> \| inherit), ale znaleziono 'var(--theme-accent-color)'	Ten błąd pojawia się, gdy używasz zmiennych CSS do kolorowania elementów, np. tła lub obramowań. Narzędzie do sprawdzania składni (CSS Lint), z którego korzysta edytor CSS w Fandomie, nie obsługuje jeszcze zmiennych CSS. Możesz bezpiecznie zignorować ten błąd.^[1]
`Expected RBRACE at line 4, col 5.` Oczekiwano RBRACE w linii 4, kolumnie 5	Ten błąd również pojawia się przy używaniu zmiennych CSS. Symbol `--` na początku definicji zmiennej powoduje, że CSS Lint „myśli”, że brakuje nawiasu zamykającego.

Zobacz też[]

Importowanie CSS i JS – jak importować pliki CSS i JS.
Importowanie Google Fonts – używanie własnych czcionek.
Dostosowywanie CSS i JS – strona zbierająca wszystkie szczegóły na temat CSS i JS.
Strony CSS i JS – przegląd wszystkich możliwych do edycji arkuszy CSS i JS.
Sprawdź listę popularnych skryptów JavaScript dostępną na Fandom Developers Wiki.

Dalsze wsparcie

Szukasz dalszego wsparcia lub masz pytanie? Sprawdź poniższe linki, aby dowiedzieć się więcej.

Dowiedz się więcej, sprawdzając inne strony pomocy.
Uzyskaj pomoc od innych użytkowników Fandomu w Dyskusjach na Centrum Społeczności.
Skontaktuj się ze wsparciem Fandomu poprzez formularz kontaktowy.

↑ Edytor korzysta z Ace, który używa CSS Lint — a ten nie wspiera jeszcze zmiennych CSS, co potwierdza ten problem na GitHubie.

[1] Edytor korzysta z Ace, który używa CSS Lint — a ten nie wspiera jeszcze zmiennych CSS, co potwierdza ten problem na GitHubie.

[1]